// Credit to Hamza on discord for proposing the initial changes import * as c from "codetoy/canvas" import * as screen from "codetoy/screen" import * as input from "codetoy/input" // DO NOT CHANGE THIS MORE THAN 10 or it will freeze const MAX_BRANCHES = 8; const maxLen = 100; const minLen = 10; const rotAmp = random(5, 10); let rotAmp2 = 0.0; // random percentage of length kept from parent branch const b1 = new Array(MAX_BRANCHES).fill(0).map(() => random(0.65, 0.85)); const b2 = new Array(MAX_BRANCHES).fill(0).map(() => random(0.65, 0.85)); // random rotation amounts const c1 = new Array(MAX_BRANCHES).fill(0).map(() => random(1, 4)); const c2 = new Array(MAX_BRANCHES).fill(0).map(() => random(-4, -8)); // randomized colors const col1 = new Array(MAX_BRANCHES).fill(0).map(() => random(200, 255)); const col2 = new Array(MAX_BRANCHES).fill(0).map(() => random(150, 150)); const col3 = new Array(MAX_BRANCHES).fill(0).map(() => random(100, 140)); const leavesOpacity: f64 = 0.9 const branchesOpacity: f64 = 0.9 let colorIndex = 0; // ==================== PHYSICS ==================== // Binary tree has 2^MAX_BRANCHES - 1 branch segments total const TOTAL: i32 = (1 << MAX_BRANCHES) - 1; // Per-joint spring-damper state (indexed by DFS pre-order) const bend = new Array(TOTAL).fill(0); // angular displacement (radians) const bendV = new Array(TOTAL).fill(0); // angular velocity // World-space positions (computed during draw, used next frame for grab detection) const bwx = new Array(TOTAL).fill(0); // branch base X const bwy = new Array(TOTAL).fill(0); // branch base Y const twx = new Array(TOTAL).fill(0); // branch tip X const twy = new Array(TOTAL).fill(0); // branch tip Y // Tree structure arrays const par = new Array(TOTAL).fill(-1); // parent index (-1 = root) const dep = new Array(TOTAL).fill(0); // depth in tree // Build parent/depth arrays matching DFS pre-order traversal function buildTree(depth: i32, idx: i32, parent: i32): i32 { if (depth >= MAX_BRANCHES) return idx; par[idx] = parent; dep[idx] = depth; let next = buildTree(depth + 1, idx + 1, idx); // left child return buildTree(depth + 1, next, idx); // right child } buildTree(0, 0, -1); // Grab state let grabbed: i32 = -1; let wasDown: bool = false; // Physics tuning const SPRING: f64 = 0.04; // base spring stiffness (trunk) const DAMP: f64 = 0.94; // velocity damping per frame const GRAB_R: f64 = 35.0; // grab detection radius in pixels const GRAB_STR: f64 = 0.12; // grab force multiplier const GRAV: f64 = 0.0003; // gravity on tilted branches const MAX_BEND: f64 = 1.3; // max bend ~75 degrees // DFS node counter (reset each frame) let _ni: i32 = 0; // ==================== INIT ==================== c.lineCap("round") draw() // ==================== FRAME LOOP ==================== export function update(): void { rotAmp2 = rotAmp + Math.sin(performance.now() / 400); physics(); draw(); } export function resize(): void { draw() } // ==================== PHYSICS UPDATE ==================== function physics(): void { let mx = input.mouseX(); let my = input.mouseY(); let down = input.isMouseDown(0); // On initial press, find nearest branch to grab if (down && !wasDown) { grabbed = -1; let best: f64 = GRAB_R; for (let i: i32 = 0; i < TOTAL; i++) { let d = segDist(mx, my, bwx[i], bwy[i], twx[i], twy[i]); if (d < best) { best = d; grabbed = i; } } } if (!down) grabbed = -1; wasDown = down; // Apply grab force — pulls grabbed branch toward mouse, // with diminishing force propagated up to ancestor joints if (grabbed >= 0) { let curA = Math.atan2( twx[grabbed] - bwx[grabbed], bwy[grabbed] - twy[grabbed] ); let desA = Math.atan2( mx - bwx[grabbed], bwy[grabbed] - my ); let diff = desA - curA; if (diff > Math.PI) diff -= 2.0 * Math.PI; if (diff < -Math.PI) diff += 2.0 * Math.PI; let force = diff * GRAB_STR; let idx = grabbed; let atten: f64 = 1.0; while (idx >= 0) { bendV[idx] += force * atten; atten *= 0.35; // each ancestor gets 35% of child's force idx = par[idx]; } } // Spring-damper + gravity for every joint for (let i: i32 = 0; i < TOTAL; i++) { // Trunk is stiff, tips are flexible let stiffness = SPRING * (1.0 + (MAX_BRANCHES - 1 - dep[i]) * 0.5); let spring = -stiffness * bend[i]; // Gravity torque — tilted branches get pulled downward let dx = twx[i] - bwx[i]; // horizontal component ≈ sin(worldAngle)*len let grav = GRAV * dx; bendV[i] = (bendV[i] + spring + grav) * DAMP; bend[i] += bendV[i]; // Clamp with soft bounce at limits if (bend[i] > MAX_BEND) { bend[i] = MAX_BEND; bendV[i] *= -0.3; } if (bend[i] < -MAX_BEND) { bend[i] = -MAX_BEND; bendV[i] *= -0.3; } } } // ==================== DRAW ==================== export function draw(): void { c.push() c.fill(220, 100, 100) c.rect(0, 0, screen.width(), screen.height()) let ox = screen.centerX(); let oy = screen.height() * 0.9; c.translate(ox, oy) _ni = 0; colorIndex = 0; branch(maxLen, 0, 0.0, ox, oy); c.pop() } // Recursive tree — draws branches and computes world positions for physics function branch(len: f64, i: i32, wAng: f64, wx: f64, wy: f64): void { c.push() if (i < MAX_BRANCHES) { let idx = _ni++; let rotAmpTemp = rotAmp2; if (i == MAX_BRANCHES - 1) rotAmpTemp *= 2; // Apply physics bend at this joint let ang = wAng + bend[idx]; c.rotate(bend[idx]) // Compute world-space tip position let ex = wx + len * Math.sin(ang); let ey = wy - len * Math.cos(ang); bwx[idx] = wx; bwy[idx] = wy; twx[idx] = ex; twy[idx] = ey; // Draw branch segment c.stroke(70, 40, 20, branchesOpacity) c.lineWidth(map(len, minLen, maxLen, 1, 15)) c.line(0, 0, 0, -len) c.translate(0, -len) // First child let r1 = c1[i] * rotAmpTemp * Math.PI / 180; c.rotate(r1) branch(len * b1[i], i + 1, ang + r1, ex, ey) // Second child (rotation accumulates on top of r1) let r2 = c2[i] * rotAmpTemp * Math.PI / 180; c.rotate(r2) branch(len * b2[i], i + 1, ang + r1 + r2, ex, ey) } else { var r = col1[(colorIndex + 0) % MAX_BRANCHES] var g = col2[(colorIndex + 1) % MAX_BRANCHES] var b = col3[(colorIndex + 2) % MAX_BRANCHES] colorIndex++; c.fill(r, g, b, leavesOpacity) c.ellipse(0, 0, 7, 2) c.ellipse(10, -10, 7, 2) c.ellipse(-10, 10, 7, 2) } c.pop() } // ==================== UTILITIES ==================== // Shortest distance from point (px,py) to line segment (ax,ay)-(bx,by) function segDist(px: f64, py: f64, ax: f64, ay: f64, bx: f64, by: f64): f64 { let dx = bx - ax, dy = by - ay; let lenSq = dx * dx + dy * dy; if (lenSq < 0.001) return Math.sqrt((px - ax) * (px - ax) + (py - ay) * (py - ay)); let t = ((px - ax) * dx + (py - ay) * dy) / lenSq; if (t < 0.0) t = 0.0; if (t > 1.0) t = 1.0; let cx = ax + t * dx, cy = ay + t * dy; return Math.sqrt((px - cx) * (px - cx) + (py - cy) * (py - cy)); } function random(min: f64, max: f64): f64 { return min + Math.random() * (max - min) } function map(value: f64, start1: f64, stop1: f64, start2: f64, stop2: f64, withinBounds: bool = false): f64 { let result = start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)) if (!withinBounds) return result if (start2 < stop2) return result < start2 ? start2 : (result > stop2 ? stop2 : result) return result > start2 ? start2 : (result < stop2 ? stop2 : result) }