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.
