Vue.js - Sierpinski Triangle

Render bug?

What if the task is to fill the Sierpinski Triangle?

The code, as it is, can not do this as you render each triangle from the top level to the deepest. Thus the first triangle would fill over all triangle inside it.

Also the stroke quality, of your code, is degraded when you repeatedly render over the same line segments.

The fix is simple. Only render the deepest (bottom) triangles, ie when n === 0

Render performance

With the render only bottom triangles you would get some render improvement. However GPU based rendering (which is the case for most devices) suffers from a state change bottle neck.

The 2D canvas API requires a state change when you call ctx.beginPath

You render each triangle using ctx.beginPath thus a triangle of depth 7 would need at min 3⁷ = 2187 state changes. That's a lot especially considering that all strokes are the same style.

When rendering using the 2D canvas API try to group all renders that use the same style into one path (one ctx.beginPath) as this will greatly (really, massively, wow) improve performance.

How deep to go?

You can not draw triangles smaller than 2 by 2 pxs (with some imagination) so any attempt to draw to a depth smaller than that is just a waste of CPU cycles, time and money..

You can calculate the smallest visible detail before you start the render and limit the depth to avoid rendering the unseeable.

The max depth can be approximated by getting the log of the outer triangles longest side plus 1. See example.

Avoid division

A minor points by when applied millions of times you should (as a habit) avoid using the divide operators '/' and '%' when practical.

 (v2.x + v3.x) / 2

is better as

 (v2.x + v3.x) * 0.5

Generally multiplication is much faster than division and JS (JIT compilers) are not smart enough to optimise this problem away.

As a good coding habit even good compilers don't know how to multiple where there is a divide.

Example Sierpinski Triangle

I could not see the point in adding the extra load of VUE and wrote a native example.

The slider will set the iteration depth and shows the number of triangles required.

The renderer will limit the depth so that it does not try to draw triangles smaller than pixels. The label will show the limiting when detected.

class Vec2 {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    distanceTo(v) { return Math.hypot(this.x - v.x, this.y - v.y) }
    addScale(v, scale) {
        this.x = (this.x + v.x) * scale;
        this.y = (this.y + v.y) * scale;
        return this;
    }
};
const V2 = (x, y) => new Vec2(x, y);
const CloneV2 = v => new Vec2(v.x, v.y);
const ctx = canvas.getContext("2d");
const {width, height} = canvas;

depthInput.addEventListener("input", () => createSierpinskiTriangle());
createSierpinskiTriangle();

function createSierpinskiTriangle(depth = depthInput.value | 0, w = width, h = height) {
    labelEl.textContent = depth ? (3 ** depth) + " triangles." : "1 triangle.";
    const [p1, p2, p3] = [V2(w * 0.5, 0), V2(w, h), V2(0, h)];
    const maxDepth = Math.log(p1.distanceTo(p2)) + 1 | 0;
    if (maxDepth < depth) {
        depth = maxDepth;
        labelEl.textContent += " Depth limited to " + (3 ** depth) + " triangles";
    }
    ctx.clearRect(0, 0, w, h);
    ctx.beginPath();
    sierpinskiTriangle(depth, p1, p2, p3);
    ctx.stroke();
}

function sierpinskiTriangle(depth, p1, p2, p3) {
    if (depth > 0) {
        const m1 = CloneV2(p1).addScale(p2, 0.5);
        const m2 = CloneV2(p2).addScale(p3, 0.5);
        const m3 = CloneV2(p3).addScale(p1, 0.5);
        depth --;
        sierpinskiTriangle(depth, p1, m1, m3);
        sierpinskiTriangle(depth, m1, p2, m2);
        sierpinskiTriangle(depth, m3, m2, p3);
        return;
    }
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.lineTo(p3.x, p3.y);
    ctx.closePath(); 
}

input{ position: absolute; left: 0px; top: 0px}
label{ position: absolute; right: 0px; top: 0px}

<input id="depthInput" type='range'  value=1 min='0' max='15' /><label for="depthInput" id="labelEl">1</label>
<canvas id="canvas" width="600" height="500"></canvas>