// Credit to Hamza on discord for proposing the initial changes import * as c from "codetoy/canvas" import * as screen from "codetoy/screen" // DO NOT CHANGE THIS MORE THAN 10 or it will freeze const MAX_BRANCHES = 8; // Control tree depth here const maxLen = 100; const minLen = 10; const rotAmp = random(5, 10); let rotAmp2 = 0.0; // random percentage of length kept from parent branch (eg. 0.65 = 65% of parent length) 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 colors = new Array(MAX_BRANCHES).fill(0).map(() => random(50, 255)); const col1 = new Array(MAX_BRANCHES).fill(0).map(() => random(200, 255)); // 220 const col2 = new Array(MAX_BRANCHES).fill(0).map(() => random(150, 150)); // 120 const col3 = new Array(MAX_BRANCHES).fill(0).map(() => random(100, 140)); // 170 // randomized colors // const col1 = random(-20, 20); // const col2 = random(-20, 20); // const col3 = random(-20, 20); const leavesOpacity: f64 = 0.9 const branchesOpacity: f64 = 0.9 let colorIndex = 0; c.lineCap("round") draw() export function update(): void { rotAmp2 = rotAmp + Math.sin(performance.now() / 400); draw(); } export function resize(): void { draw() } export function draw(): void { c.push() // background c.fill(220, 100, 100) c.rect(0, 0, screen.width(), screen.height()) // position tree near the bottom c.translate(screen.centerX(), screen.height() * 0.9) branch(maxLen, 0); c.pop() } // recursive tree function function branch(len: f64, i: i32 = 0): void { c.push() if (i < MAX_BRANCHES) { let rotAmpTemp = rotAmp2; if (i == MAX_BRANCHES - 1) rotAmpTemp *= 2; c.stroke(70, 40, 20, branchesOpacity) c.lineWidth(map(len, minLen, maxLen, 1, 15)) c.line(0, 0, 0, -len) c.translate(0, -len) c.rotate(c1[i] * rotAmpTemp * Math.PI / 180) branch(len * b1[i], i + 1) c.rotate(c2[i] * rotAmpTemp * Math.PI / 180) branch(len * b2[i], i + 1) } 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() } 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) } else { return result > start2 ? start2 : (result < stop2 ? stop2 : result) } }