AI Temporal Dendrite - Time-Driven Fractal Tree - xelsed.ai

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100);
  noFill();
  strokeCap(ROUND);
}

function draw() {
  // Soft cream / paper background
  // HSB: warm hue, low saturation, high brightness
  background(45, 12, 96);

  // --- Time-based parameters ---
  // Hour → number of main branches (1–12)
  let h = hour() % 12;
  if (h === 0) h = 12;
  const mainBranches = h;

  // Minute → angle spread (15°–45°)
  const m = minute();
  const spreadDeg = map(m, 0, 59, 15, 45);
  const spreadRad = radians(spreadDeg);

  // Second → subtle global sway (smooth using millis())
  timeSeconds = second() + millis() / 1000.0;
  globalSway = radians(2) * sin(timeSeconds * 0.6); // ±2° in radians

  // Base trunk length relative to canvas
  const baseLength = min(height * 0.35, 280);

  // --- Draw the tree from bottom center ---
  push();
  translate(width / 2, height); // bottom center origin
  noFill();

  // Draw trunk (depth 0)
  const trunkAngle = -HALF_PI + globalSway * 0.4; // trunk gently sways as one piece
  const trunkEndX = baseLength * cos(trunkAngle);
  const trunkEndY = baseLength * sin(trunkAngle);

  // Trunk color: dark brown
  strokeWeight(MAX_STROKE);
  const trunkHue = 30;   // brownish
  const trunkSat = 80;
  const trunkBri = 40;
  stroke(trunkHue, trunkSat, trunkBri);
  line(0, 0, trunkEndX, trunkEndY);

  // Move to top of trunk where main branches start
  translate(trunkEndX, trunkEndY);

  // --- Spawn main branches based on hour() ---
  const firstBranchLength = baseLength * LENGTH_FACTOR;

  if (mainBranches === 1) {
    // Single main branch straight up
    drawBranch(firstBranchLength, 1, spreadRad * 0.8, 0, 1);
  } else {
    // Fan of branches within [-spread, +spread]
    const totalSpread = spreadRad * 2;
    const step = totalSpread / (mainBranches - 1);
    const startAngle = -spreadRad;
    for (let i = 0; i < mainBranches; i++) {
      const angleOffset = startAngle + step * i;
      drawBranch(firstBranchLength, 1, spreadRad * 0.8, angleOffset, i + 1);
    }
  }

  pop();
}

function drawBranch(len, depth, spread, angle, branchId) {
  if (depth > MAX_DEPTH || len < 2) return;

  push();

  // Normalized depth 0..1
  const t = depth / MAX_DEPTH;

  // Local sway increases toward the tips
  const localSway = globalSway * (0.4 + 0.6 * t);

  // Noise-based tip motion (stronger toward tips)
  const noiseInput = branchId * 0.35 + depth * 0.7;
  const n = noise(noiseInput, timeSeconds * 0.2); // [0,1]
  const noiseAmp = radians(1 + 5 * t);           // up to ~6° at tips
  const noiseAngle = map(n, 0, 1, -noiseAmp, noiseAmp);

  // Apply rotation for this branch
  rotate(angle + localSway + noiseAngle);

  // Depth-based color from dark brown → spring green
  // Brownish: H≈30, S≈80, B≈40
  // Spring green: H≈110, S≈60, B≈90
  const hCol = lerp(30, 110, t);
  const sCol = lerp(80, 60, t);
  const bCol = lerp(40, 90, t);
  stroke(hCol, sCol, bCol);

  // Stroke weight decreases with depth
  const sw = map(depth, 0, MAX_DEPTH, MAX_STROKE, MIN_STROKE);
  strokeWeight(sw);

  // Draw the branch segment
  line(0, 0, 0, -len);
  translate(0, -len);

  // Compute next branch length
  const nextLen = len * LENGTH_FACTOR;

  // Recurse: each branch splits into two children
  if (depth < MAX_DEPTH) {
    const childSpread = spread;

    // Left child
    drawBranch(nextLen, depth + 1, spread * 0.9, -childSpread, branchId * 2 + 1);
    // Right child
    drawBranch(nextLen, depth + 1, spread * 0.9, childSpread, branchId * 2 + 2);
  }

  pop();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}