Snippet Zone

iwrjgnb

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' 
```
```
 
```
```
c.fillStyle = 'rgba(255, 236, 168, 1)'
```

c.fillRect(0, 0, canvas.width, canvas.height)

```
document.body.append(canvas)
```
```
 
```
```
let width = 300
```
```
let height = 300
```
```
 
```
```
function cell(ox = 0, oy = 0) {
```
```
 
```
```
  let ax = ox + width / 2
```
```
  let ay = oy + height / 2
```
```
  let x, y
```
```
  let r = width * Math.random()
```
```
  let rx = r
```
```
  let ry = r
```

  if (Math.random() < .5) rx *= Math.random()

  if (Math.random() < .5) ry *= Math.random()

```
  let t = Math.random() * 7
```
```
 
```
```
  let ti = Math.random() * .1 - .05
```
```
  let te;
```
```
  let dr = 0
```
```
  if (ti > 0) {
```
```
    te = t + Math.random() * 7
```
```
    dr = 1
```
```
  } else {
```
```
    te = t - Math.random() * 7
```
```
  }
```
```
  let rm = 0
```

  if (Math.random() < .5) rm = Math.random() * 3

```
 
```
```
  return () => {
```
```
    x = ax + rx * Math.cos(t)
```
```
    y = ay + ry * Math.sin(t)
```
```
    if (rm !== 0) {
```
```
      rx -= rm;
```
```
      ry -= rm
```
```
    }
```
```
    t += ti
```

    if ((t > te && dr === 1) || (t < te && dr === 0)) {

```
      return
```
```
    }
```
```
    c.fillStyle = 'black'
```
```
    c.fillRect(x, y, 2, 2)
```
```
 
```
```
    if (Math.random() < .5) {
```
```
      cls.push(cl(x, y))
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
function cl(x, y) {
```
```
  let vy = .2 + Math.random() * 2 - 1
```
```
  let col = 'rgba(0, 0, 0, 0.08)'
```

  if (Math.random() < .1) col = 'rgba(0, 178, 227, .3)'

  if (Math.random() < .01) col = 'rgba(255, 0, 0, .3)'

```
  let vx = 0
```
```
  if (Math.random() < .03) {
```
```
    vx = 1
```
```
    vy = 0;
```
```
    col = 'rgba(255, 255, 255, .2)'
```
```
  }
```
```
  let dead = false;
```
```
  return () => {
```
```
    if (dead) return
```
```
    y += vy
```
```
    x += vx
```
```
    if (Math.random() < .01) {
```
```
      dead = true
```
```
    }
```
```
    c.fillStyle = col
```
```
    c.fillRect(x, y, 2, 2)
```
```
  }
```
```
}
```
```
 
```
```
let NUM = 5
```
```
let cs = []
```
```
let cls = []
```
```
for (let j = 0; j < NUM; j++) {
```
```
  let yy = Math.random() * innerHeight
```
```
  let xx = Math.random() * innerWidth
```

  let num = 5 + ~~(Math.random() * Math.random() * 10)

  if (Math.random() < .3) num = Math.random() * 50

```
  for (let i = 0; i < NUM; i++) {
```
```
    for (let k = 0; k < num; k++) {
```
```
      cs.push(cell(xx, yy))
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
function loop() {
```
```
  cs.forEach(f => f())
```
```
  cls.forEach(f => f())
```
```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Just posting more code from recent shorts… more here

August 3, 2025

// canvas // codegolf // curves // golfed // graphics // hacks // javascript // math // random // speed-coded // speedcoding

sTwister

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'
```
```
canvas.style.filter = 'contrast(1.1)'
```
```
document.body.append(canvas)
```
```
 
```
```
 
```

const canvas2 = document.createElement('canvas')

```
const c2 = canvas2.getContext('2d')
```
```
 
```
```
canvas2.width = innerWidth * 2
```
```
canvas2.height = innerHeight * 2
```
```
 
```
```
 
```
```
const r = (n = 1) => Math.random() * n
```
```
 
```
```
let anc = ~~r(360)
```
```
 
```
```
function plaint(x, y) {
```
```
  let vy = r(-20) - 1
```
```
  let vx = 0
```
```
  const cl = ~~r(50) + anc;
```
```
  let t = r(7)
```
```
  let rx = r(1) + .5
```
```
  let jag = r(.5)
```
```
  let bright = r(100)
```
```
  return () => {
```
```
    vx = rx * Math.cos(t)
```
```
    if (r() < jag) {
```
```
      t += r(3)
```
```
    }
```
```
    x += vx
```
```
    y += vy
```

    c.fillStyle = `hsla(${cl}, 20%, ${bright}%, .5)`

```
 
```
```
    c.fillRect(x, y, 4, 4)
```
```
    if (y < 0) {
```
```
      y = canvas.height
```
```
      vy = r(-20) - 1
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
function erase() {
```
```
  c.fillStyle = 'black'
```

  c.fillRect(0, 0, canvas.width, canvas.height)

```
 
```
```
}
```
```
erase()
```
```
 
```
```
const plntNum = 350
```
```
let xStep = canvas.width / plntNum
```
```
 
```
```
const plnt = []
```
```
for (let i = 0; i < plntNum; i++) {
```
```
  const x = i * xStep
```
```
  plnt.push(plaint(x, canvas.height))
```
```
}
```
```
 
```
```
let R = null 
```
```
 
```

function swister(C, x, y, fc, ss, n, slow) {

```
  const shadesNum = n || 100
```
```
  const shades = []
```
```
  const rad = R || 200   
```
```
 
```
```
  for (let i = 0; i < shadesNum; i++) {
```
```
    shades.push({
```
```
      x,
```
```
      y,
```
```
      xx: 0,
```
```
      yy: 0,
```
```
      r: r(rad) + 200,
```
```
      t: r(7),
```
```
      rinc: r(1) - .1,
```
```
      tinc: r(.1),
```
```
      cl: fc(),
```
```
      a: r(.02) + .01
```
```
    }) 
```
```
 
```
```
  }
```
```
 
```
```
  return () => {
```

    for (let i = 0; i < shadesNum; i++) {

```
      let s = shades[i]
```
```
      s.xx = s.x + s.r * Math.cos(s.t)
```
```
      s.yy = s.y + s.r * Math.sin(s.t)
```
```
      s.r -= s.rinc;
```
```
      if (s.r < 200) {
```
```
        s.r = r(rad) + 200
```
```
        s.tinc = r(.1)
```
```
        if (slow) s.tinc *= .1
```
```
        if (r() < .5) s.inc *= -1;
```
```
 
```
```
        s.rinc = r(.1)
```
```
      }
```
```
      s.t += s.tinc
```

      C.fillStyle = `rgba(${s.cl}, ${s.cl}, ${s.cl}, ${s.a})`

```
      C.fillRect(s.xx, s.yy, ss, ss)
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
R = r(canvas.width / 5) + 50
```

let s1x = (canvas.width - R) * r() + R / 2

let s1y = (canvas.height - R) * r() + R / 2

```
let s = swister(c, s1x, s1y,
```
```
  () => r(10), 24
```
```
)
```
```
let s2 = swister(c2,
```
```
  s1x - 50, s1y - 50,
```
```
  () => r(200) + 0, 4
```
```
)
```
```
 
```
```
let s3 = swister(c2,
```
```
  s1x - 50, s1y - 50,
```
```
  () => r(50) + 200, 8, 4, true
```
```
)
```
```
 
```
```
 
```
```
R = r(150) + 50
```

let s2x = (canvas.width - R) * r() + R / 2

let s2y = (canvas.height - R) * r() + R / 2

```
let sa = swister(c, s2x, s2y,   
```
```
  () => r(10), 24
```
```
)
```
```
let sb = swister(c2,
```
```
  s2x - 50, s2y - 50,
```
```
  () => r(200) + 0, 4
```
```
)
```
```
 
```
```
let sc = swister(c2,
```
```
  s2x - 50, s2y - 50,
```
```
  () => r(50) + 200, 8, 4, true
```
```
) 
```
```
 
```
```
function draw() {
```
```
 
```
```
  c.globalAlpha = 1;
```

  c.globalCompositeOperation = 'source-over'

```
  plnt.forEach(p => p())
```
```
 
```
```
  s()
```
```
  sa()
```
```
  c.globalAlpha = .05;
```

  c.drawImage(canvas, -10, -10, canvas.width + 10, canvas.height + 10)

  // c.globalCompositeOperation = 'source-atop'

```
  s2()
```
```
  sb()
```
```
  s3()
```
```
  sc()
```
```
  c.globalAlpha = 1
```

  c.globalCompositeOperation = 'hard-light'

```
  c.drawImage(canvas2, 0, 0);
```
```
  c.globalAlpha = .02; 
```
```
 
```

  c.drawImage(canvas, 0, 0, canvas.width, canvas.height + 10)

```
  requestAnimationFrame(draw)
```
```
}
```
```
draw()
```

Speed-coded this on the train the other day. Might port over to WebGL sometime soon…

August 2, 2025

// canvas // codegolf // golfed // graphics // hacks // javascript // random // speed-coded // speedcoding // tricks

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 😀

See the short here…

August 2, 2025

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

Collatz Conjecture

```
collatz = n => 
```
```
  n % 2 == 0 ? n / 2 : 3 * n + 1
```
```
 
```
```
iter = (v, i = 10, o = 0) => {
```
```
  n = collatz(v)
```
```
  console.log(n)
```
```
  o < i && iter(n, i, ++o)
```
```
} 
```
```
 
```
```
iter(111, 100)
```

334, 167, 502, 251, 754, 377, 1132, 566, 283, 850, 425, 1276, 638, 319, 958, 479, 1438, 719, 2158, 1079, 3238, 1619, 4858, 2429, 7288, 3644, 1822, 911, 2734, 1367, 4102, 2051, 6154, 3077, 9232, 4616, 2308, 1154, 577, 1732, 866, 433, 1300, 650, 325, 976, 488, 244, 122, 61, 184, 92, 46, 23, 70, 35, 106, 53, 160, 80, 40, 20, 10, 5, 16, 8, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2, 1, 4, 2

February 16, 2025

// codegolf // javascript // math

Golfed Codepen – 3D Spiral Thing

// sort of golfed version of https://www.instagram.com/p/C1uv6Kqv19T/

```
// by @mewtru
```
```
b = document.body
```
```
a = Object.assign
```

a(b.style, { background:'#000', color:'#fff'})

w = 'snippet.zone snippet.zone'.toUpperCase().split``

```
F = (n, O = 0, C, S, o, t) => { 
```

  b.innerHTML += `<div id=${n} style='position:absolute;left:50%;top:50%;translate:-50% -50%;width:100% text-align:center;white-space:nowrap'></div>`

  w.map(l => this[n].innerHTML += `<span style='display:inline-block;margin-right:5px;font-size:28px'>${l}</span>`)

```
  t = O
```
```
  setInterval(_ => {
```
```
    t += .005
```

    ;[...this[n].children].map((e, i) => {

```
      T = t + i / 2.7
```
```
      a(e.style, {
```

        translate: `0 ${Math.sin(T) * 100}px`,

```
        scale: Math.cos(T) * .5 + .5})
```
```
    }, 16)
```
```
  })
```
```
}
```
```
F('Z') 
```
```
F('X', 3)
```

“Very cool” pen by Lucas Fernando that comes from @mewtru
I decided to do a speed-coded semi-golfed version… can definitely be way more golfed 😀

January 10, 2024

// 3d // animation // codegolf // css // dom // golfed // hacks // javascript // math // speed-coded // speedcoding // strings

Older Posts

iwrjgnb

sTwister

T Plant

Collatz Conjecture

Golfed Codepen – 3D Spiral Thing

Recent

Archive