)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

T Plant

  1. const { PI } = Math
  2. const canvas = document.createElement('canvas')
  3. const c = canvas.getContext('2d')
  4.  
  5. canvas.width = innerWidth * 2
  6. canvas.height = innerHeight * 2
  7. canvas.style.scale = '.5 .5'
  8. canvas.style.transformOrigin = '0 0'
  9.  
  10. c.fillStyle = 'black'
  11. c.fillRect(0, 0, canvas.width, canvas.height)
  12.  
  13. document.body.append(canvas)
  14. let o = -PI / 2
  15.  
  16. const r = (n = 1) => Math.random() * n
  17.  
  18. function branch(x, y, ang = o, f) {
  19.   let vx, vy
  20.   let life = 0
  21.   let dead
  22.   let vv = 1 + r(2)
  23.   let ll = r(200)
  24.   let a = 1;
  25.   if (f) a = 0
  26.  
  27.   return () => {
  28.     if (dead) return
  29.     if (life > 200 + ll) {
  30.       dead = true;
  31.       let n = 10 + r(20)
  32.       for (let i = 0; i < n; i++) {
  33.  
  34.         let dest = {
  35.           x,
  36.           y: y + r(30) - 15
  37.         }
  38.         bs.push(leafPart(x, y, dest))
  39.       }
  40.     }
  41.  
  42.     life++
  43.     if (life > 10 && a >= 1 && Math.random() < .02 && bs.length < 20) {
  44.       if (r() < .3) {
  45.         dead = true
  46.         bs.push(
  47.           branch(x, y, ang + r(PI / 4)))
  48.         branch(x, y, ang + r(-PI / 4))
  49.         return
  50.       }
  51.       bs.push(
  52.         branch(x, y, o + r(2) - 1))
  53.     }
  54.     vx = Math.cos(ang)
  55.     vy = Math.sin(ang) * vv
  56.     ang += r(.1) - .05
  57.  
  58.     x += vx
  59.     y += vy
  60.     c.fillStyle = `rgba(255, 255, 255, ${a})`
  61.     if (f) {
  62.       a += .01
  63.     }
  64.  
  65.     c.fillRect(x, y, 4, 4)
  66.   }
  67. }
  68.  
  69. function leafPart(x, y, dest) {
  70.   let ang = r(7)
  71.   let rr = r(1) + .5
  72.   let vv = -r(3)
  73.   let life = 0
  74.   let maxLife = 40 + r(200)
  75.   let vx
  76.   let vy
  77.   let CC = 190 + r(30)
  78.  
  79.   return () => {
  80.     life++
  81.     if (life < maxLife) {
  82.       vx = Math.cos(ang) * rr
  83.       vy = Math.sin(ang) * rr + vv
  84.       x += vx
  85.       y += vy
  86.       ang += r(.4) - .2
  87.       c.fillStyle = 'rgba(255, 255, 255, .1)'
  88.     } else {
  89.       c.fillStyle = `rgba(255, ${CC}, ${CC}, .25)`
  90.       x += (dest.x - x) / 42
  91.       y += (dest.y - y) / 12
  92.     }
  93.  
  94.     c.fillRect(x, y, 4, 4)
  95.   }
  96. }
  97. let bs = []
  98. let lf = []
  99.  
  100. bs.push(
  101.   branch(innerWidth, innerHeight * 1.9, o, true)
  102. )
  103.  
  104. function loop() {
  105.   bs.forEach(b => b())
  106.   requestAnimationFrame(loop)
  107. }
  108. loop()

Been pretty consistently posting speed-coded youtube shorts. This is a recent one. Magic numbers, nonsense variable names, and strange noops 😀

See the short here…

// animation // canvas // codegolf // color // curves // graphics // hacks // javascript // random // speed-coded // speedcoding // tricks

Recent

Archive

RSS
snippet.zone /// {s/z}