Пифагорово дерево

by Alexander Shpak

HTML

<canvas id="tree"><canvas>

JavaScript

// фунуция рисует линий из точки (x, y) под углом angle длиною ln
function drawLine(context, x, y, ln, angle) {
    context.moveTo(x, y);
    context.lineTo(Math.round(x + ln * Math.cos(angle)), Math.round(y - ln * Math.sin(angle)));
}

// рекурсивная функция рисующая дерево
function drawTree(context, x, y, ln, minLn, angle) {
    var incompleted = ln > minLn;
    if (incompleted) {
        ln = ln * 0.73;
        context.strokeStyle =  (ln > 15) ? '#C3893C' : '#020';    
        context.beginPath();
        drawLine(context, x, y, ln, angle);
        context.stroke(); // "обводим" линии
        x = Math.round(x + ln * Math.cos(angle));
        y = Math.round(y - ln * Math.sin(angle));
        drawTree(context, x, y, ln, minLn, angle + Math.PI / 4);
        drawTree(context, x, y, ln, minLn, angle - Math.PI / 6);
    }
}

function main() {
    var canvas = document.getElementById("tree"),
        size   = {'width': 480, 'height': 320},
        minLn  = 3,
        ln     = 125, // начальная длина линии (ствола)
        x      = size.width / 2, // координаты начальной точки
        y      = size.height,
        context = canvas.getContext("2d");
    canvas.width  = size.width; // ширина окна
    canvas.height = size.height; // высота окна
    context.lineWidth = 2;
    context.fillStyle = "#ddf"; // цвет фона
    context.fillRect(0, 0, canvas.width, canvas.height); // фон
    drawTree(context, x, y, ln, minLn, Math.PI / 2); // рисуем дерево
}

main();