Pythagoras Tree

// Pythagoras tree fractal. Each square spawns two children whose
// hypotenuse coincides with the parent's top edge. With angle alpha, the
// left child has side L*cos(alpha) and the right child L*sin(alpha) —
// proving Pythagoras visually: the two children sit on the legs of a
// right triangle whose hypotenuse is the parent. Mouse X scrubs alpha in
// [10deg, 80deg]; alpha = 45 gives the symmetric classical tree.

let smoothAlpha = 45 * Math.PI / 180;
let lastMouseX = -1;
let bgGradient = null;
let maxDepth = 11;

function init({ ctx, width, height }) {
  smoothAlpha = 45 * Math.PI / 180;
  lastMouseX = width * 0.5;
  bgGradient = ctx.createLinearGradient(0, 0, 0, height);
  bgGradient.addColorStop(0, "#0a0f18");
  bgGradient.addColorStop(0.7, "#101724");
  bgGradient.addColorStop(1, "#1a2030");
  // depth scales gently with canvas size so phones don't choke
  const s = Math.min(width, height);
  maxDepth = s < 500 ? 10 : s < 800 ? 11 : 12;
}

function tick({ ctx, dt, time, width, height, input }) {
  ctx.fillStyle = bgGradient;
  ctx.fillRect(0, 0, width, height);

  // soft floor glow
  const gg = ctx.createRadialGradient(width / 2, height + 30, 20, width / 2, height + 30, height * 0.55);
  gg.addColorStop(0, "rgba(120,150,110,0.18)");
  gg.addColorStop(1, "rgba(0,0,0,0)");
  ctx.fillStyle = gg;
  ctx.fillRect(0, 0, width, height);

  // mouse X -> alpha in [10, 80] deg; phones don't hover so latch
  let mx = input.mouseX;
  if (mx == null || mx < 0) mx = lastMouseX;
  else lastMouseX = mx;
  const tx = Math.max(0, Math.min(1, mx / width));
  const targetAlpha = (10 + tx * 70) * Math.PI / 180;
  const k = Math.min(1, dt * 6);
  smoothAlpha += (targetAlpha - smoothAlpha) * k;

  const alpha = smoothAlpha;
  const ca = Math.cos(alpha);
  const sa = Math.sin(alpha);
  // size the trunk so a symmetric tree fits the canvas
  const trunk = Math.min(width, height) * 0.13;
  const x0 = width / 2 - trunk / 2;
  const y0 = height - 6 - trunk;

  ctx.lineJoin = "miter";
  ctx.lineCap = "butt";

  // recursive square draw. (px, py) = bottom-left of parent square in
  // parent-local frame; we carry an affine transform via (ox,oy)+basis
  // (ux,uy) "right" and (vx,vy) "up" so each square is a unit-square
  // mapping. Children build on the top edge: the apex of the
  // right-triangle on top is at distance ca along the top edge from the
  // left-top corner. Left child = scaled square sitting on the left leg;
  // right child sits on the right leg.
  function draw(ox, oy, ux, uy, vx, vy, depth) {
    if (depth > maxDepth) return;
    // cull squares smaller than ~0.5px on screen
    const side2 = ux * ux + uy * uy;
    if (side2 < 0.25) return;
    // square corners in world: BL = o, BR = o+u, TR = o+u+v, TL = o+v
    const blx = ox,           bly = oy;
    const brx = ox + ux,      bry = oy + uy;
    const trx = ox + ux + vx, try_ = oy + uy + vy;
    const tlx = ox + vx,      tly = oy + vy;

    // color by depth: trunk warm brown -> twigs cyan/teal
    const df = depth / maxDepth;
    const hue = 28 + df * 150;     // brown -> green -> teal
    const sat = 55 + df * 25;
    const light = 28 + df * 38;
    ctx.fillStyle = "hsl(" + hue.toFixed(1) + "," + sat.toFixed(1) + "%," + light.toFixed(1) + "%)";
    ctx.strokeStyle = "rgba(10,15,22,0.55)";
    ctx.lineWidth = Math.max(0.5, 1.2 * (1 - df));

    ctx.beginPath();
    ctx.moveTo(blx, bly);
    ctx.lineTo(brx, bry);
    ctx.lineTo(trx, try_);
    ctx.lineTo(tlx, tly);
    ctx.closePath();
    ctx.fill();
    if (depth < maxDepth - 1) ctx.stroke();

    if (depth === maxDepth) return;

    // Build the two child squares. Top edge of parent (TL -> TR) is the
    // hypotenuse of a right triangle whose legs are the child bases.
    //   left child: side = L*cos(alpha), basis rotated +alpha (scaled by ca)
    //   right child: side = L*sin(alpha), basis rotated -(90-alpha) (scaled by sa)
    // Handedness preserved so v always points "outward" from each parent.
    const lux = ca * (ca * ux + sa * vx);
    const luy = ca * (ca * uy + sa * vy);
    const lvx = ca * (-sa * ux + ca * vx);
    const lvy = ca * (-sa * uy + ca * vy);

    const rux = sa * (sa * ux - ca * vx);
    const ruy = sa * (sa * uy - ca * vy);
    const rvx = sa * (ca * ux + sa * vx);
    const rvy = sa * (ca * uy + sa * vy);

    // apex of right triangle (corner shared by both children) = TL + l_u
    const apexX = tlx + lux;
    const apexY = tly + luy;

    draw(tlx, tly, lux, luy, lvx, lvy, depth + 1);
    draw(apexX, apexY, rux, ruy, rvx, rvy, depth + 1);
  }

  // trunk: u points right (+trunk, 0), v points up (0, -trunk)
  draw(x0, y0 + trunk, trunk, 0, 0, -trunk, 0);

  // HUD
  const alphaDeg = alpha * 180 / Math.PI;
  ctx.font = "12px ui-monospace, monospace";
  ctx.textBaseline = "top";
  ctx.fillStyle = "rgba(220,230,240,0.9)";
  ctx.fillText("alpha = " + alphaDeg.toFixed(1) + " deg", 10, 10);
  ctx.fillText("legs: cos = " + ca.toFixed(3) + "  sin = " + sa.toFixed(3), 10, 26);
  ctx.fillText("cos^2 + sin^2 = " + (ca * ca + sa * sa).toFixed(3), 10, 42);
  ctx.fillText("depth = " + maxDepth, 10, 58);
  ctx.fillStyle = "rgba(180,200,210,0.6)";
  ctx.fillText("move cursor: x = right-triangle angle", 10, height - 22);
}