Mirror a Line in a Canvas 2: Kaleidoscope

kaleidoscope.js

function render() {
  ctx.beginPath();
  ctx.lineWidth = 2;

  while (pointQueue.length > 1) {
    const lastPoint = pointQueue.shift();
    const curPoint  = pointQueue[0];

    // Render a line segment from lastPoint to curPoint, but mirrored in each
    // quadrant.
    for (let i = 0; i < 4; ++i) {
      const toOrigin = gl.mat2d.fromTranslation(
        gl.mat2d.create(),
        gl.vec2.fromValues(-startPoint[0], -startPoint[1])
      );
      const flipX = gl.mat2d.fromScaling(
        gl.mat2d.create(),
        gl.vec2.fromValues(-1, 1)
      );
      const rot = gl.mat2d.fromRotation(
        gl.mat2d.create(),
        Math.PI / 2 * i
      );
      const fromOrigin = gl.mat2d.fromTranslation(
        gl.mat2d.create(),
        gl.vec2.fromValues(startPoint[0], startPoint[1])
      );

      const transform1 = mul(fromOrigin, rot, toOrigin);
      const transform2 = mul(fromOrigin, rot, flipX, toOrigin);

      ctx.setTransform(...transform1);
      ctx.moveTo(...lastPoint);
      ctx.lineTo(...curPoint);

      ctx.setTransform(...transform2);
      ctx.moveTo(...lastPoint);
      ctx.lineTo(...curPoint);
    }
  }

  ctx.stroke();
}