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.
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.com/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>