分形起始图

Question

获得了使用 webgl 和仿射变换绘制分形的计算机图形作业。

我不知道我应该在 drawFigure() 函数中画什么图形，或者我什至没有采取正确的方法来解决问题。

到目前为止我都做到了：

    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);

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

目标是制作如下所示的分形：

Answer 1

我设法自己弄明白了。我需要做的就是在 k < 0 时翻转图形。通过更改实现它：

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

至

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

分形起始图

Fractal starting figure

javascript

fractals

affinetransform