分形起始图

Question

使用webgl和仿射变换进行计算机图形分配以绘制分形。

我无法弄清楚我应该在drawFigure（）函数中绘制哪个数字，或者我是否采用了正确的方法解决问题。

到目前为止，这是我所有人都设法做到的：

＆＃13;

＆＃13;

    var canvas = document.getElementById("fractal")
        , ctx = canvas.getContext("2d")
        , depth =  6
        , HEIGHT = canvas.height
        , WIDTH = canvas.width;


    function drawFigure(color) {
        ctx.beginPath();
        ctx.fillStyle = color;   
        ctx.fillRect(WIDTH * 0.25, HEIGHT * 0.25, WIDTH * 0.5, HEIGHT * 0.5);
        ctx.fill();   
    }

    function drawFractal(depth, color, k) {
        if (depth == 0) {
            drawFigure(color);    
            return;
        }

        k = k || 1;

        // NW
        ctx.save();
        ctx.transform(0.5, 0, 0, 0.5, 0, 0);
        drawFractal(depth - 1, color  || "#FF0000", k * (-1));
        ctx.restore();

        // NE
        ctx.save();
        ctx.transform(0.5, 0, 0, 0.5, WIDTH / 2, 0);
        drawFractal(depth - 1, color  || "#00FF00", k);
        ctx.restore();

        // SW
        ctx.save();
        ctx.transform(0.5, 0, 0, 0.5, 0, HEIGHT / 2);
        drawFractal(depth - 1, color  || "#0000FF", k);
        ctx.restore();

        // SE   
        ctx.save();
        ctx.transform(-0.25 * k, 0, 0, 0.25 * k, 0.75 * WIDTH, 0.75 * HEIGHT);
        drawFractal(depth - 1, color || "#FF00FF", k);
        ctx.restore();
    }

    drawFractal(depth);

＆＃13;

<canvas width="600" height="600" id="fractal"></canvas>	

＆＃13;

＆＃13;

＆＃13;

目标是使分形看起来像这样：

Answer 1

我设法弄明白了。我需要做的就是当k

if (depth == 0) {
    drawFigure(color);
    return;
}

到

if (depth == 0) {
    if (k < 0) {
        ctx.translate(WIDTH, HEIGHT);
        ctx.scale(-1, -1);
    }
    drawFigure(color);
    return;
}