Untitled

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Gen</title>
    <style type="text/css"></style>
</head>
<body>
    <canvas id="canvas2" width="512" height="512"></canvas>
    <canvas id="canvas1" width="32" height="32"></canvas>
    <script type="text/javascript">
    var
        // основная канва:
        canvas = document.getElementById("canvas1"),
        c = canvas.getContext("2d"),
        // "более крупная" канва:
        canvas2 = document.getElementById("canvas2"),
        context2 = canvas2.getContext('2d'),
        // размер стороны канвы:
        size = canvas.width,
        imageData = c.createImageData(size, size),
        // массив с данными:
        mas = new Array(size),
        // перечисляемые переменные:
        mas, cc, x, y;
    // ставит отдельный пиксель в imageData:
    function setPixel(imageData, x, y, r, g, b, a) {
        index = (x + y * imageData.width) << 2;
        imageData.data[index++] = r;
        imageData.data[index++] = g;
        imageData.data[index++] = b;
        imageData.data[index]   = a;
    }
    // очищает массив данных:
    function clear() {
        for(var i = 0; i < size; i++) {
            mas[i] = new Array(size);
            for(var j = 0; j < size; j++) {
                mas[i][j] = 0;
            }
        }
    }
    // рисует в массив круг:
    function circle(x, y, r, h) {
        for(var i = x-r; i <= x+r; i++) {
            for(var j = y-r; j <= y+r; j++) {
                if((i-x)*(i-x) + (j-y)*(j-y) <= r*r) {
                    mas[Math.floor(i)][Math.floor(j)] = h;
                }
            }
        }
    }

    // возвращает случайную в диапазоне:
    function rand(min, max) { return Math.random() * (max - min) + min }
    // сглаживает массив с указанным количеством шагов:
    function smooth(steps) {
        for(var a = 0; a < steps; a++) {
            for(var i = 0; i < size-1; i++) {
                for(var j = 0; j < size-1; j++) {
                    var round = Math.floor(( mas[i][j] + mas[i+1][j] + mas[i][j+1] + mas[i+1][j+1])/4);
                    mas[i][j] = round;
                    mas[i+1][j] = round;
                    mas[i][j+1] = round;
                    mas[i+1][j+1] = round;
                }
            }
        }
    }
    // делаем кучу островов:
    for (cc = 0; cc < 256; cc++) {
        clear();
        x = size / 2;
        y = size / 2;
        r = size / 4;
        // изначальный круг:
        circle(x, y, r, 100);
        // круги суши:
        for(var i = 0; i < rand(5, 10); i++) {
            circle(rand(x-r, x+r), rand(y-r, y+r), rand(0.2*r, 0.5*r), 100);
        }
        // круги воды:
        for(var i = 0; i < rand(5, 10); i++) {
            circle(rand(x-r, x+r), rand(y-r, y+r), rand(0.2*r, 0.5*r), 0);
        }
        // сглаживание, технически (size >> 3) = ОК:
        smooth(1);
        // заполняем imageData пикселями:
        for(var i = 0; i < size; i++) {
            for(var j = 0; j < size; j++) {
                if(mas[i][j] <= 0) setPixel(imageData, i, j, 67, 170, 255, 255);
                else if(mas[i][j] <= 20) setPixel(imageData, i, j, 239, 211, 52, 255);
                else if(mas[i][j] <= 80) setPixel(imageData, i, j, 150, 75, 0, 255);
                else setPixel(imageData, i, j, 125, 225, 100, 255);
            }
        }
        //
        context2.putImageData(imageData, (cc & 15) << 5, (cc >> 4) << 5);
        //context2.drawImage(canvas, (i & 7) << 5, (i >> 3) << 5);
    }
    </script>
</body></html>