I've seen this solution which appears to take care of clustering elements within a "consistent" shape without overlaps, but what if the shape was more obscure, like the following:

My first couple stabs at this seem to point to simplifying the shape to it's most basic form, then performing checks if the element is within the actual shape coordinates, but that seems like A LOT of potential calculations that I was hoping to simplify. Any thoughts would be extremely appreciated. Thanks!

---

JS Fiddle for reference:

var tilesize = 18, tilecount = 15;
var gRows = Math.floor($(".container").innerWidth()/tilesize);
var gCols = Math.floor($('.container').innerHeight()/tilesize);

var vals = _.shuffle(_.range(tilecount));
var xpos = _.shuffle(_.range(gRows));
var ypos = _.shuffle(_.range(gCols));

_.each(vals, function(d,i){
    var $newdiv = $('<div/>').addClass("tile");
    $newdiv.css({
        'position':'absolute',
        'left':(xpos[i] * tilesize)+'px',
        'top':(ypos[i] * tilesize)+'px'
    }).appendTo( '.container' ).html(d);  
});

Edit

This example has random clustering within a defined shape, but since the context of that shape isn't a square, I'll need to do some testing on first converting an SVG object to a canvas element and then running the code through something similar.

I've seen this solution which appears to take care of clustering elements within a "consistent" shape without overlaps, but what if the shape was more obscure, like the following:

My first couple stabs at this seem to point to simplifying the shape to it's most basic form, then performing checks if the element is within the actual shape coordinates, but that seems like A LOT of potential calculations that I was hoping to simplify. Any thoughts would be extremely appreciated. Thanks!

---

JS Fiddle for reference:

var tilesize = 18, tilecount = 15;
var gRows = Math.floor($(".container").innerWidth()/tilesize);
var gCols = Math.floor($('.container').innerHeight()/tilesize);

var vals = _.shuffle(_.range(tilecount));
var xpos = _.shuffle(_.range(gRows));
var ypos = _.shuffle(_.range(gCols));

_.each(vals, function(d,i){
    var $newdiv = $('<div/>').addClass("tile");
    $newdiv.css({
        'position':'absolute',
        'left':(xpos[i] * tilesize)+'px',
        'top':(ypos[i] * tilesize)+'px'
    }).appendTo( '.container' ).html(d);  
});

Edit

This example has random clustering within a defined shape, but since the context of that shape isn't a square, I'll need to do some testing on first converting an SVG object to a canvas element and then running the code through something similar.

• javascript
• underscore.js

Share Improve this question Follow edited May 23, 2017 at 12:15 CommunityBot 111 silver badge asked Nov 24, 2015 at 21:46 ZachZach 1,18544 gold badges2525 silver badges6161 bronze badges 4

• perhaps instead of two arrays (one for each axis) you could one with coordinate pairs that you could first filter for ones that fit in the shape, and from those you can randomly select what you want. That would be a linear approach that does not need to re-select until something falls inside. – Gabriele Petrioli Commented Nov 24, 2015 at 22:00
• Thanks for the reply - any chance you've seen that in the wild at all? Trying to gather some inspiration for possible ways this could be achieved. – Zach Commented Nov 27, 2015 at 21:43
• This is a great question actually. Is boxing around the shape an option? – Bob van Luijt Commented Nov 28, 2015 at 12:11
• Unfortunately not; it's more about within this "bounding box" which in this case, is an abstract shape. The challenge I'm facing is how to measure whether a point is within the shape without having an insane amount of calculations based on where it's "trying" to be placed. – Zach Commented Nov 28, 2015 at 12:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6 +25

Try creating ascii representation of image , css white-space set to pre , .html() , String.prototype.replace() with RegExp to match any character in string , return element as replacement for matched character in input string html

$(function() {
  $("div").html(function(index, html) {
    return html.replace(/g/g, function(match) {
      return "<span>" + match + "</span>"
    })
  })
})

div {
  font: 8px/4px monospace; 
  text-align: center;
  white-space:pre;
}

span {
  background-color:dodgerblue;
  color: navy;
  text-shadow: 0.75em 0.75em gold;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
                                                                                     
                                                                             
                                                                                     
                                                                             gggg                                                     
                                                                          ggggggggg                                                   
                                                                         gggggggggggg                                                 
                                                                       ggggggggggggggg                                                
                                                                      ggggggggggggggggg                                               
                                                                      ggggggggggggggggg                                               
                                                                     ggggggggggggggggggg                                              
                                                                    gggggggggggggggggggg                                              
                                                                   gggggggggggggggggggggg                                             
                                                                  ggggggggggggggggggggggg                                             
                                                                 gggggggggggggggggggggggg                                             
                                                                gggggggggggggggggggggggggg                                            
                                                              gggggggggggggggggggggggggggg                                            
                                        gggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                                      gggggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                                     gggggggggggggggggggggggggggggggggggggggggggggggggggggg                                           
                                     gggggggggggggggggggggggggggggggggggggggggggggggggggggg                                           
                                    ggggggggggggggggggggggggggggggggggggggggggggggggggggggg             ggg                           
                                    ggggggggggggggggggggggggggggggggggggggggggggggggggggggg          ggggggggg                        
                                   gggggggggggggggggggggggggggggggggggggggggggggggggggggggg        ggggggggggggg                      
                                   gggggggggggggggggggggggggggggggggggggggggggggggggggggggg     gggggggggggggggggg                    
                                   gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                   
                                   gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                   
                                   ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                   ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                   ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                     ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                      gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                      gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                       ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                  
                                       gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                   
                                        ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                   
                                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                    
                                        ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                     
                                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                      
                                        ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                       
                                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                        
                                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                          
                                       gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                           
                                      ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                             
                                     ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                
                                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                  
                                  ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                     
                                 gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                       
                                ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                         
                               gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                           
                              gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                             gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                            ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                           gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                             
                         ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                        gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                            
                        ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                           
                       ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                          
                      gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                        
                      ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                       
                     ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                      
                     gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                     
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg                                    
                    ggggggggggggggggggggggggggggggggggg       gggggggggggggggggggggggggggggggggggg                                    
                    ggggggggggggggggggggggggggggggggg          ggggggggggggggggggggggggggggggggggg                                    
                    gggggggggggggggggggggggggggggggg            ggggggggggggggggggggggggggggggggg                                     
                    gggggggggggggggggggggggggggggg               gggggggggggggggggggggggggggggggg                                     
                    ggggggggggggggggggggggggggggg                 gggggggggggggggggggggggggggggg                                      
                     ggggggggggggggggggggggggggg                  gggggggggggggggggggggggggggggg                                      
                     gggggggggggggggggggggggggg                    gggggggggggggggggggggggggggg                                       
                      ggggggggggggggggggggggggg                    gggggggggggggggggggggggggggg                                       
                      gggggggggggggggggggggggg                      gggggggggggggggggggggggggg                                        
                       gggggggggggggggggggggg                        gggggggggggggggggggggggg                                         
                        gggggggggggggggggggg                         ggggggggggggggggggggggg                                          
                         gggggggggggggggggg                           ggggggggggggggggggggg                                           
                          gggggggggggggggg                             ggggggggggggggggggg                                            
                            ggggggggggggg                              gggggggggggggggggg                                             
                              ggggggggg                                  ggggggggggggggg                                              
                                                                          gggggggggggg                                                
                                                                            gggggggg                                                  
                                                                                                                                      
                                                                                                                                      
                                                                                                                                      
                                                                                                                                                                                                         
</div>