Javascript 形状内的聚类元素

我已经看到，在一个没有重叠的“一致”形状中，它似乎负责对元素进行聚类，但是如果形状更模糊，会怎么样，如下所示：

我的第一次尝试似乎指向将形状简化为最基本的形式，然后检查元素是否在实际形状坐标范围内，但这似乎是我希望简化的许多潜在计算。任何想法都将不胜感激。谢谢

---

JS Fiddle供参考：

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);  
});

var tilesize=18，tilecount=15；
var growth=Math.floor（$（“.container”）.innerWidth（）/tilesize）；
var gCols=Math.floor（$（'.container'）.innerHeight（）/tilesize）；
var VAL=u.shuffle（u.range（tilecount））；
var xpos=u0.shuffle（0.range（growth））；
var ypos=u0.shuffle（0.range（gCols））；
_.每个（VAL、功能（d、i）{
var$newdiv=$（''）.addClass（“磁贴”）；
$newdiv.css({
'位置'：'绝对'，
“左”：（xpos[i]*波浪形化）+“px”，
“top”：（ypos[i]*tilesize）+“px”
}).appendTo（'.container'）.html（d）；
});

编辑

---

在已定义的形状中具有随机聚类，但由于该形状的上下文不是正方形，我需要先将SVG对象转换为画布元素，然后通过类似的方式运行代码。请尝试创建图像的ascii表示形式，

css

空白

设置为

pre

，

.html（）

，

String.prototype.replace（）

为

RegExp

匹配字符串中的任何字符，返回元素作为输入字符串中匹配字符的替换

html

$（函数（）{
$（“div”）.html（函数（索引，html）{
返回html.replace（/g/g，函数（匹配）{
返回“”+匹配+“”
})
})
})

div{
字体：8px/4px单空格；
文本对齐：居中；
空白：预处理；
}
跨度{
背景色：淡蓝色；
颜色：海军蓝；
文字阴影：0.75em 0.75em金色；
}

gggg
gggggggg
gggggggggggg
gggggggggggggggg
gggggggggggggggggg
gggggggggggggggggg
gggggggggggggggggggggg
gggggggggggggggggggg
gggggggggggggggggggggg
gggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggg
gggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggg