Trig functions

by Josh Pullen

HTML

<img id="background"...

CSS

canvas {
  border: 1px solid black;
  width: 100%;
}

#background {
  display: none;
}

JavaScript

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

document.body.appendChild(canvas);

canvas.width = 1280;
canvas.height = 720;

const lerp = (a, b, t = 0) => {
	if (Array.isArray(a) && Array.isArray(b)) {
  	let result = [];
    for (let i = 0; i < a.length; i++) {
    	result.push(lerp(a[i], b[i], t));
    }
    return result;
  }

	if (t < 0) t = 0;
  if (t > 1) t = 1;
  return a + (b - a) * t;
}

const ease = {
	sin: (t) => (1 - Math.cos(t * Math.PI)) / 2,
  out: (t) => 1 - (1 - t) ** 3,
}

const fmt = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 4,
  maximumSignificantDigits: 4
});

const bg = document.querySelector("#background");

function render(t) {
	ctx.fillStyle = "white";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  ctx.drawImage(bg, 0, 0);
  
  const scale = 1 + 0.3 * Math.sin((2 * Math.PI) * (t / 4));
  
  triangle(scale);
  
  text(lerp(0, 1, t - 2), scale);
}

recordVideo(render, 8);

function triangle(scale) {
	const center = [100, 620];
  const pt = (x, y) => [
  	center[0] + x * 200 * scale,
    center[1] - y * 200 * scale
  ];
  
  const points = [
  	pt(0, 0),
  	pt(Math.sqrt(3), 0),
  	pt(0, 1)
  ];
  
  const dampedScale = (1 + scale) / 2;
  
  ctx.strokeStyle = "black";
  ctx.lineWidth = 8 * dampedScale;
  ctx.lineJoin = "round";
  ctx.beginPath();
  ctx.rect(points[0][0], points[0][1] - 40 * scale, 40 * scale, 40 * scale);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(...points[1], 90 * scale, Math.PI, -5/6 * Math.PI);
  ctx.stroke();

  ctx.lineWidth = 16 * dampedScale;
  ctx.lineCap = "round";
  
  ctx.strokeStyle = "red";
	ctx.beginPath();
  ctx.moveTo(...points[0]);
  ctx.lineTo(...points[1]);
  ctx.stroke();
  
  ctx.strokeStyle = "blue";
  ctx.beginPath();
  ctx.moveTo(...points[1]);
  ctx.lineTo(...points[2]);
  ctx.stroke();
  
  ctx.strokeStyle = "green";
  ctx.beginPath();
  ctx.moveTo(...points[2]);
  ctx.lineTo(...points[0]);
  ctx.stroke();
  
  ctx.strokeStyle =...