nikkk,
неоптимальный вариант но рабочий
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<canvas width="800" height="600" id="canvas"></canvas>
<script>
function rnd(length)
{
return Math.floor(Math.random()*length)
}
function randomRGBComponent() {
return Math.round(Math.random() * 255);
}
function randomRGBColor() {
return 'rgb(' + randomRGBComponent() + ', ' + randomRGBComponent() + ', ' + randomRGBComponent() + ')';
}
function fn(left, top, width, height, length )
{ var arr = [[left, top, width, height]]
for (var i=0; i< length-1; i++) {
var k = rnd(arr.length),
el = arr[k];
if(Math.random() > .5) {
if(el[2] < 40) {
i--; continue;
};
var w = rnd(el[2]-10)+5;
arr[k][2] -= w ;
arr.push([arr[k][0]+arr[k][2], arr[k][1],w, arr[k][3]])
}
else{
if(el[3] < 40) {
i--; continue;
};
var h = rnd(el[3]-10)+5;
arr[k][3] -= h ;
arr.push([arr[k][0], arr[k][1]+arr[k][3],arr[k][2], h])
}
}
return arr
}
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var arr = fn(0, 0, canvas.width, canvas.height, 80 )
for (var i=0; i<arr.length; i++) {
var el = arr[i];
c.fillStyle = randomRGBColor();
c.fillRect(el[0], el[1], el[2], el[3]);
}
</script>
</body>
</html>