Skip to content

Instantly share code, notes, and snippets.

@dkozyr

dkozyr/triangles.html

Last active September 7, 2023 07:34
Show Gist options
  • Save dkozyr/9cd3243d38f148c082a538371924e53f to your computer and use it in GitHub Desktop.
Save dkozyr/9cd3243d38f148c082a538371924e53f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
triangles.html
<!DOCTYPE html>
<html>
<title>Animated Triangles Pattern</title>
<body>
<h1>Animated Triangles Pattern</h1>
<canvas id='myCanvas' width='600px' height='600px' />
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
function dist(ax, ay, bx, by) {
const x = ax - bx;
const y = ay - by;
return Math.sqrt(x * x + y * y);
}
function areaTriangle(ax, ay, bx, by, cx, cy) {
const a = dist(ax, ay, bx, by);
const b = dist(bx, by, cx, cy);
const c = dist(cx, cy, ax, ay);
const s = a + b + c;
return Math.sqrt(s * (s - a) * (s - b) * (s - c));
}
function mix(t, a, b) {
return a + (b - a) * t;
}
function drawSingleTriangle(ctx, x1, y1, x2, y2, x3, y3) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x1, y1);
ctx.stroke();
}
function drawTriangle(ctx, t, ax, ay, bx, by, cx, cy) {
const x1 = mix(t, ax, bx);
const y1 = mix(t, ay, by);
const x2 = mix(t, bx, cx);
const y2 = mix(t, by, cy);
const x3 = mix(t, cx, ax);
const y3 = mix(t, cy, ay);
drawSingleTriangle(ctx, x1, y1, x2, y2, x3, y3);
if(areaTriangle(x1, y1, x2, y2, x3, y3) > 200.) {
drawTriangle(ctx, 0.1, x1, y1, x2, y2, x3, y3);
}
}
var i = 0;
function animate() {
ctx.rect(0, 0, width, width);
ctx.fillStyle = '#FFFFFF';
ctx.fill();
ctx.strokeStyle = '#123456';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, width);
ctx.lineTo(width, width);
ctx.lineTo(width, 0);
ctx.lineTo(0, 0);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(width / 2, width);
ctx.lineTo(width, 0);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, width);
ctx.lineTo(width / 2, 0);
ctx.lineTo(width, width);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, width / 2);
ctx.lineTo(width, width / 2);
ctx.stroke();
const delta = (i % 10) * 0.01;
drawTriangle(ctx, delta, 0, 0, width / 4, width / 2, width / 2, 0);
drawTriangle(ctx, delta, 0, 0, width / 4, width / 2, 0, width / 2);
drawTriangle(ctx, delta, width / 4, width / 2, width / 2, 0, width * 3 / 4, width / 2);
drawTriangle(ctx, delta, width / 2, 0, width * 3 / 4, width / 2, width, 0);
drawTriangle(ctx, delta, width * 3 / 4, width / 2, width, 0, width, width / 2);
drawTriangle(ctx, delta, width / 4, width / 2, 0, width / 2, 0, width);
drawTriangle(ctx, delta, 0, width, width / 4, width / 2, width / 2, width);
drawTriangle(ctx, delta, width / 4, width / 2, width / 2, width, width * 3 / 4, width / 2);
drawTriangle(ctx, delta, width / 2, width, width * 3 / 4, width / 2, width, width);
drawTriangle(ctx, delta, width * 3 / 4, width / 2, width, width, width, width / 2);
i++;
setTimeout(animate, 100);
}
animate();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment