Skip to content

Instantly share code, notes, and snippets.

@benbotto
Created April 13, 2020 15:46
Show Gist options
  • Save benbotto/cdcc391d54ea7d3a1970aedbf1742dcb to your computer and use it in GitHub Desktop.
Save benbotto/cdcc391d54ea7d3a1970aedbf1742dcb to your computer and use it in GitHub Desktop.
Mirror a Line in a Canvas 2: Kaleidoscope
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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment