T Plant
const { PI } = Math
const canvas = document.createElement('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth * 2
canvas.height = innerHeight * 2
canvas.style.scale = '.5 .5'
canvas.style.transformOrigin = '0 0'
document.body.append(canvas)
let o = -PI / 2
const r = (n = 1) => Math.random() * n
function branch(x, y, ang = o, f) {
let vx, vy
let life = 0
let dead
let vv = 1 + r(2)
let ll = r(200)
let a = 1;
if (f) a = 0
return () => {
if (dead) return
if (life > 200 + ll) {
dead = true;
let n = 10 + r(20)
for (let i = 0; i < n; i++) {
let dest = {
x,
y: y + r(30) - 15
}
bs.push(leafPart(x, y, dest))
}
}
life++
if (life > 10 && a >= 1 && Math.random() < .02 && bs.length < 20) {
if (r() < .3) {
dead = true
bs.push(
branch(x, y, ang + r(PI / 4)))
branch(x, y, ang + r(-PI / 4))
return
}
bs.push(
branch(x, y, o + r(2) - 1))
}
vx = Math.cos(ang)
vy = Math.sin(ang) * vv
ang += r(.1) - .05
x += vx
y += vy
c.fillStyle = `rgba(255, 255, 255, ${a})`
if (f) {
a += .01
}
c.fillRect(x, y, 4, 4)
}
}
function leafPart(x, y, dest) {
let ang = r(7)
let rr = r(1) + .5
let vv = -r(3)
let life = 0
let maxLife = 40 + r(200)
let vx
let vy
let CC = 190 + r(30)
return () => {
life++
if (life < maxLife) {
vx = Math.cos(ang) * rr
vy = Math.sin(ang) * rr + vv
x += vx
y += vy
ang += r(.4) - .2
c.fillStyle = 'rgba(255, 255, 255, .1)'
} else {
c.fillStyle = `rgba(255, ${CC}, ${CC}, .25)`
x += (dest.x - x) / 42
y += (dest.y - y) / 12
}
c.fillRect(x, y, 4, 4)
}
}
let bs = []
let lf = []
bs.push(
branch(innerWidth, innerHeight * 1.9, o, true)
)
function loop() {
bs.forEach(b => b())
requestAnimationFrame(loop)
}
loop()
Been pretty consistently posting speed-coded youtube shorts. This is a recent one. Magic numbers, nonsense variable names, and strange noops đ