Generative Tree

// Recursive binary-branching tree drawn each frame. At every node we spawn
// two children rotated by ±theta with length ratio r; branches taper and the
// hue marches darker (trunk) -> lighter (twigs). Mouse X scrubs theta in
// [15deg, 50deg], mouse Y scrubs maxDepth in [6, 12]. A slow per-depth wind
// perturbation jiggles the branch angles for a "swaying canopy" feel.

let bgGradient = null;
let trunkLen = 0;
let smoothTheta = 30 * Math.PI / 180;
let smoothDepth = 9;
let lastMouseX = -1;
let lastMouseY = -1;

function init({ ctx, width, height }) {
  bgGradient = ctx.createLinearGradient(0, 0, 0, height);
  bgGradient.addColorStop(0, "#0a1118");
  bgGradient.addColorStop(0.7, "#101a24");
  bgGradient.addColorStop(1, "#1a2632");
  trunkLen = Math.min(width, height) * 0.22;
  smoothTheta = 30 * Math.PI / 180;
  smoothDepth = 9;
  lastMouseX = width * 0.5;
  lastMouseY = height * 0.5;
}

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

  // soft ground 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.25)");
  gg.addColorStop(1, "rgba(0,0,0,0)");
  ctx.fillStyle = gg;
  ctx.fillRect(0, 0, width, height);

  // resolve cursor: phones don't hover, so fall back to last seen pos.
  let mx = input.mouseX;
  let my = input.mouseY;
  if (mx == null || my == null || mx < 0 || my < 0) { mx = lastMouseX; my = lastMouseY; }
  else { lastMouseX = mx; lastMouseY = my; }

  // mouse X -> theta in [15, 50] degrees, mouse Y -> depth in [6, 12]
  const tx = Math.max(0, Math.min(1, mx / width));
  const ty = Math.max(0, Math.min(1, my / height));
  const targetTheta = (15 + tx * 35) * Math.PI / 180;
  const targetDepth = 6 + (1 - ty) * 6; // higher cursor = more depth

  // exponential smoothing so dragging feels buttery, not jittery
  const k = Math.min(1, dt * 6);
  smoothTheta += (targetTheta - smoothTheta) * k;
  smoothDepth += (targetDepth - smoothDepth) * k;
  const maxDepth = Math.max(6, Math.min(12, Math.round(smoothDepth)));

  trunkLen = Math.min(width, height) * 0.22;
  const r = 0.74; // length ratio child/parent

  const t = time;

  // recursive draw: branch(x, y, len, angle, depth)
  function branch(x, y, len, angle, depth) {
    if (depth > maxDepth || len < 0.6) return;
    // wind sway: depends on depth so the canopy moves more than the trunk
    const df = depth / maxDepth;
    const sway =
      (Math.sin(t * 1.1 + depth * 0.9) * 0.045 +
       Math.sin(t * 2.3 + depth * 1.7) * 0.022) * (0.2 + df * 1.4);
    const a = angle + sway;
    const nx = x + Math.cos(a) * len;
    const ny = y + Math.sin(a) * len;

    // hue: trunk dark brown -> twig pale green/yellow
    const hue = 28 + df * 70;          // 28 (brown) -> 98 (light green/yellow)
    const sat = 35 + df * 35;          // duller trunk, livelier twigs
    const light = 22 + df * 48;        // dark -> light
    const lw = Math.max(0.5, trunkLen * 0.08 * Math.pow(1 - df, 1.4) + 0.5);

    ctx.strokeStyle = "hsl(" + hue.toFixed(1) + "," + sat.toFixed(1) + "%," + light.toFixed(1) + "%)";
    ctx.lineWidth = lw;
    ctx.lineCap = "round";
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(nx, ny);
    ctx.stroke();

    // leaf dabs at the tips
    if (depth >= maxDepth - 1) {
      ctx.fillStyle = "hsla(" + (hue + 10).toFixed(1) + ",70%,65%,0.35)";
      ctx.beginPath();
      ctx.arc(nx, ny, 1.6, 0, Math.PI * 2);
      ctx.fill();
    }

    branch(nx, ny, len * r, a - smoothTheta, depth + 1);
    branch(nx, ny, len * r, a + smoothTheta, depth + 1);
  }

  // anchor trunk at bottom center, growing upward (angle = -PI/2)
  const x0 = width / 2;
  const y0 = height - 4;
  branch(x0, y0, trunkLen, -Math.PI / 2, 0);

  // HUD: show live parameters
  const thetaDeg = smoothTheta * 180 / Math.PI;
  ctx.font = "12px ui-monospace, monospace";
  ctx.textBaseline = "top";
  ctx.fillStyle = "rgba(220,230,240,0.85)";
  ctx.fillText("theta = " + thetaDeg.toFixed(1) + " deg", 10, 10);
  ctx.fillText("depth = " + maxDepth, 10, 26);
  ctx.fillText("ratio r = " + r.toFixed(2), 10, 42);
  ctx.fillStyle = "rgba(180,200,210,0.6)";
  ctx.fillText("move cursor: x = angle, y = depth", 10, height - 22);
}