Swaying Fractal Tree - xelsed.ai

function setup() {
  createCanvas(windowWidth, windowHeight);

  branchAngle = radians(25); // base split angle for branches

  // initial trunk length based on canvas
  baseLength = min(width, height) * 0.25;

  // colors for branches
  trunkColor = color(80, 42, 15);  // dark brown
  twigColor  = color(150, 95, 45); // lighter brown

  strokeCap(ROUND);
}

function draw() {
  drawSkyGradient();

  // Smoothly update baseLength if window size changes
  const targetBaseLength = min(width, height) * 0.25;
  baseLength = lerp(baseLength, targetBaseLength, 0.1);

  // Grow the tree over time (approx 5 seconds to fully grow)
  treeGrowth = min(1, treeGrowth + 0.0035);

  // Gentle wind using a sine wave
  const t = millis() * 0.001; // time in seconds
  const wind = sin(t * 0.8) * radians(6); // ±6° sway

  // Draw the tree from bottom center, going upward
  push();
  translate(width / 2, height);
  drawBranch(baseLength, 0, wind);
  pop();
}

function drawBranch(len, depth, wind) {
  if (depth > maxDepth) return;

  // Map global growth to this branch's local progress
  const g = treeGrowth * (maxDepth + 1); // 0..maxDepth+1
  const local = g - depth;

  // Not grown to this level yet
  if (local <= 0) return;

  // 0..1, how much of this segment is drawn
  const progress = local < 1 ? local : 1;

  // Thickness tapers with depth
  const thickness = map(depth, 0, maxDepth, 12, 1.5);

  // Color blends from trunkColor to twigColor with depth
  const c = lerpColor(trunkColor, twigColor, depth / maxDepth);

  // Sway stronger at the tips, weaker in the trunk
  const swayStrength = map(depth, 0, maxDepth, 0.2, 1.0);
  const localSway = wind * swayStrength;

  push();

  // Apply wind sway
  rotate(localSway);

  stroke(c);
  strokeWeight(thickness);
  noFill();

  // Draw this branch segment upwards (negative Y)
  const segLen = len * progress;
  line(0, 0, 0, -segLen);

  // Move to the end of this segment
  translate(0, -segLen);

  // If this is a fully grown tip, draw a leaf
  if (depth === maxDepth && progress >= 1.0) {
    drawLeaf();
  }

  // If this segment is fully grown, spawn child branches
  if (depth < maxDepth && progress >= 1.0) {
    const childLen = len * 0.72;

    // Right branch
    push();
    rotate(branchAngle);
    drawBranch(childLen, depth + 1, wind);
    pop();

    // Left branch
    push();
    rotate(-branchAngle);
    drawBranch(childLen, depth + 1, wind);
    pop();
  }

  pop();
}

function drawLeaf() {
  noStroke();
  fill(34, 139, 34, 220); // forest green with a bit of alpha
  const leafW = 10;
  const leafH = 14;
  // Draw two small overlapping ellipses for a leaf cluster
  ellipse(0, 0, leafW, leafH);
  ellipse(3, -2, leafW * 0.8, leafH * 0.8);
}

function drawSkyGradient() {
  const topColor = color(180, 220, 255);   // light sky blue
  const bottomColor = color(255, 255, 255); // white

  noFill();
  for (let y = 0; y < height; y++) {
    const t = y / max(height - 1, 1);
    const c = lerpColor(topColor, bottomColor, t);
    stroke(c);
    line(0, y, width, y);
  }
}

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