// Tree Planet — ported from Processing.js by u144707 // Adapted for 405×720 mobile portrait let p; function setup() { createCanvas(windowWidth, windowHeight); let r = min(width, height) * 0.14; p = new Planet(width / 2, height / 2, r); } function draw() { background(233); p.update(); p.display(); } function mousePressed() { if (p.isInBody()) { p.addTree(); } } function touchStarted() { if (p.isInBody()) { p.addTree(); } return false; } function mouseMoved() { p.rotateAngle(); } function touchMoved() { p.rotateAngle(); return false; } function windowResized() { resizeCanvas(windowWidth, windowHeight); let r = min(width, height) * 0.14; p.x = width / 2; p.y = height / 2; p.r = r; p.oribitWidth = 5 * r; p.oribitHeight = r; } // ─── Planet ─────────────────────────────────────────────────────────────────── class Planet { constructor(_x, _y, _r) { this.MAX_TREE_COUNT = 3; this.x = _x; this.y = _y; this.r = _r; this.oribitWidth = 5 * _r; this.oribitHeight = _r; this.ballSpeed = 1.5; this.ballAngle = 0; this.rotateTheta = radians(-25); this.trees = []; } update() { // delete extra trees let cnt = this.trees.length - this.MAX_TREE_COUNT; if (cnt >= 0) { for (let i = 0; i < cnt; i++) { this.trees[i].die(); } } // update trees for (let i = this.trees.length - 1; i >= 0; i--) { let t = this.trees[i]; if (t.isDead) { this.trees.splice(i, 1); continue; } t.angle = this.angleByTheta(t.theta); t.r = this.rByTheta(t.theta); t.update(); } // update ball this.ballAngle += this.ballSpeed; this.ballAngle %= 360; } rByTheta(theta) { let scale = noise(sin(theta) + 1, cos(theta) + 1, frameCount / 100); return this.r * (scale / 2 + 1); } angleByTheta(theta) { const offset = 0.06; let theta1 = theta - offset, theta2 = theta + offset; let a = this.rByTheta(theta1); let b = this.rByTheta(theta2); return atan2(a * sin(theta1) - b * sin(theta2), a * cos(theta1) - b * cos(theta2)); } displayTrace(startAngle, endAngle) { push(); let theta = map(noise(frameCount / 100), 0, 1, 0, 25); rotate(radians(theta)); // back (erase) noFill(); stroke(233); strokeWeight(12); arc(0, 0, this.oribitWidth, this.oribitHeight, startAngle, endAngle); // front stroke(0); strokeWeight(4); arc(0, 0, this.oribitWidth, this.oribitHeight, startAngle, endAngle); pop(); } displayBody() { fill(0); strokeWeight(5); stroke(233); beginShape(); for (let i = 0; i <= 360; i += 5) { let theta = radians(i); let pr = this.rByTheta(theta); let px = pr * cos(radians(i)), py = pr * sin(radians(i)); vertex(px, py); } endShape(); } displayBall() { push(); let seed = noise(frameCount / 100); let angle = map(seed, 0, 1, 0, 25); let offsetY = map(seed, 0, 1, -20, 20); rotate(radians(angle)); let theta = radians(this.ballAngle); fill(240); strokeWeight(5); stroke(0); let ballSize = this.r * 0.32; ellipse(this.oribitWidth * cos(theta) / 2, this.oribitHeight * sin(theta) / 2 + offsetY, ballSize, ballSize); pop(); } display() { push(); translate(this.x, this.y); rotate(this.rotateTheta); this.displayTrace(PI, TWO_PI); if (this.ballAngle < 180) { this.displayBody(); this.displayTrace(0, PI); this.displayBall(); } else { this.displayBall(); this.displayBody(); this.displayTrace(0, PI); } for (const t of this.trees) { t.display(); } pop(); } addTree() { let mx = mouseX, my = mouseY; let theta = atan2(my - this.y, mx - this.x) - this.rotateTheta; let type = Math.floor(random(3)); let t = new Tree(theta, type); t.r = this.rByTheta(t.theta); t.angle = this.angleByTheta(t.theta); this.trees.push(t); } rotateAngle() { if (!this.isInBody()) { let theta1 = atan2(mouseY - this.y, mouseX - this.x); let theta2 = atan2(pmouseY - height / 2, pmouseX - width / 2); this.rotateTheta += theta1 - theta2; } } isInBody() { let mx = mouseX, my = mouseY; let theta = atan2(my - this.y, mx - this.x); let r = this.rByTheta(theta); return dist(mx, my, this.x, this.y) < r; } } // ─── Tree ───────────────────────────────────────────────────────────────────── class Tree { constructor(_theta, _type) { this.MAX_DEPTH = 4; this.MAX_LEN = 50; this.MIN_LEN = 25; this.theta = _theta; this.r = 0; this.angle = 0; this.branches = []; this.flowers = []; this.location = createVector(0, 0); this.isDead = false; this.isBlow = false; this.type = _type; let root = new Branch(0, 0, HALF_PI, random(this.MIN_LEN, this.MAX_LEN), 0, null, this.MAX_DEPTH); root.isGrowing = true; this.addBranches(root); } addBranches(b) { this.branches.push(b); let cnt = Math.floor(random(2, 4)); if (b.level > this.MAX_DEPTH) { for (let i = 0; i < cnt; i++) { let offset = random(-10, 10); let c1 = random(255), c2 = random(255); let c = this.type === 0 ? color(c1, c2, 255) : this.type === 1 ? color(c1, 255, c2) : color(255, c1, c2); let f = new Flower(b, offset, c); this.flowers.push(f); } } else { let startAngle = -PI / 4, endAngle = PI / 4; let step = (endAngle - startAngle) / cnt; for (let i = 0; i < cnt; i++) { let offset = random(startAngle + step * i, startAngle + step * (i + 1)); let t = new Branch(b.to.x, b.to.y, b.theta - offset, b.len * 0.8, b.level + 1, b, this.MAX_DEPTH); this.addBranches(t); } } } die() { for (const b of this.branches) { if (b.level === this.MAX_DEPTH + 1) { b.isDying = true; } } } update() { this.location.set(this.r * cos(this.theta), this.r * sin(this.theta)); if (this.branches[0].isDead) { this.isDead = true; } for (const b of this.branches) { b.update(); } for (let i = 0; i < this.flowers.length; i++) { let f = this.flowers[i]; if (f.isFlying && !f.isDown) { let gravity = p5.Vector.sub(createVector(0, -100), f.location); if (abs(gravity.mag() - random(20, 80)) < 10) { f.velocity.set(0, 0); f.accerlation.set(0, 0); f.isDown = true; } else { gravity.normalize(); gravity.mult(0.1); f.applyForce(gravity); } } f.update(); } } blow() { this.isBlow = true; for (const f of this.flowers) { f.down(); f.isFlying = true; } } display() { push(); translate(this.location.x, this.location.y); rotate(this.angle); for (const b of this.branches) { if (p5.Vector.dist(b.from, b.current) > 0.1) { b.display(); } } for (const f of this.flowers) { if (!f.isDown) { f.display(); } } pop(); } } // ─── Branch ─────────────────────────────────────────────────────────────────── class Branch { constructor(fromX, fromY, _theta, _len, _level, _father, MAX_DEPTH) { this.theta = _theta; this.len = _len; this.level = _level; this.sw = map(_level, 0, MAX_DEPTH, 5, 2); this.father = _father; this.isDying = false; this.isGrowing = false; this.isGrown = false; this.isDead = false; this.from = createVector(fromX, fromY); this.current = createVector(fromX, fromY); this.to = createVector(fromX + _len * cos(_theta), fromY + _len * sin(_theta)); } update() { if (this.isDying) { this.current = p5.Vector.lerp(this.current, this.from, 0.2); if (p5.Vector.dist(this.current, this.from) < 0.1) { this.isDead = true; if (this.father !== null) { this.father.isDying = true; } } } else if (this.isGrowing) { this.current = p5.Vector.lerp(this.current, this.to, 0.1); if (p5.Vector.dist(this.current, this.to) < 0.1) { this.isGrown = true; } } else if (!this.isGrowing && !this.isDying) { if (this.father && this.father.isGrown) { this.isGrowing = true; } } } display() { strokeWeight(this.sw); stroke(0); line(this.from.x, this.from.y, this.current.x, this.current.y); } } // ─── Flower ─────────────────────────────────────────────────────────────────── class Flower { constructor(_father, _offset, _c) { this.father = _father; this.location = createVector(this.father.to.x + _offset, this.father.to.y + _offset); this.velocity = createVector(0, 0); this.accerlation = createVector(0, 0); this.origin = createVector(0, -100); this.c = _c; this.isGrown = false; this.isFlying = false; this.isDown = false; } down() { this.velocity = p5.Vector.random2D(); this.velocity.mult(1.5); } applyForce(force) { if (this.isGrown) { this.accerlation.add(force); } } update() { if (this.father.isGrown) { this.isGrown = true; } if (this.father.isDying) { if (!this.isDown && !this.isFlying) { this.down(); this.isFlying = true; } } if (this.isGrown) { this.velocity.add(this.accerlation); this.location.add(this.velocity); this.accerlation.mult(0); } } display() { if (this.isGrown) { fill(this.c); noStroke(); ellipse(this.location.x, this.location.y, 6, 6); } } }