title: Clustering elements within shape
body: <p>I've seen <a href="http://jsfiddle.net/srvikram13/CLs8P/" rel="nofollow noreferrer">this solution</a> 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:</p>
  
  <p><a href="https://i.stack.imgur.com/Wx6jT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wx6jT.jpg" alt="enter image description here"></a></p>
  
  <p>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!</p>
  
  <hr>
  
  <p>JS Fiddle for reference:</p>
  
  <pre><code>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 = $('&lt;div/&gt;').addClass("tile");
      $newdiv.css({
          'position':'absolute',
          'left':(xpos[i] * tilesize)+'px',
          'top':(ypos[i] * tilesize)+'px'
      }).appendTo( '.container' ).html(d);  
  });
  </code></pre>
  
  <h1>Edit</h1>
  
  <p><a href="https://stackoverflow.com/questions/14364161/randomly-generate-objects-in-canvas-without-duplicate-or-overlap">This example</a> 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.</p>