D3 Examples - unfinished diamond square

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <canvas id='c'></canvas>
        <script>
            var canvas = document.getElementById('c');
            canvas.width = 500;
            canvas.height = 500;
            var ctx = canvas.getContext('2d');
            function r() {
                return Math.random();
            }
            function c(x) {
                var y = ~~(x * 255)
                return 'rgb(' + [y, y, y].join(',') + ')';
            }
            var start = [r(), r(),
                r(), r()];
            function draw(m) {
                var w = Math.sqrt(m.length);
                var block = 500 / w;
                for (var i = 0; i < m.length; i++) {
                    ctx.fillStyle = c(m[i]);
                    ctx.fillRect(
                    (i % w) * block, Math.floor(i / w) * block,
                    block, block);
                }
            }
            draw(start);
        </script>
    </body>
</html>
​
    