Snippet Zone

Flun Draw

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth * 2
```
```
canvas.height = innerHeight * 2
```
```
document.body.append(canvas)
```
```
canvas.style.width = innerWidth + 'px'
```

canvas.style.height = innerHeight + 'px'

```
c.fillStyle = 'white'
```

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

```
 
```
```
const flun = (
```
```
  ax = innerWidth,
```
```
  ay = innerHeight,
```
```
  r = 0,
```
```
  x = 0, y = 0,
```
```
  t = 0,
```
```
  dt = 0,
```
```
  spin = 0,
```
```
  spinc = .1,
```
```
  rinc = 0,
```
```
  col = 'black',
```
```
  hist = []
```
```
) => {
```
```
 
```
```
  const init = () => {
```
```
    dt = Math.random() * Math.PI * 2
```
```
    r = 0
```
```
    rinc = Math.random() * 1
```
```
    spinc = Math.random() * .01 - .005
```

    col = ['black', 'white', 'rgba(0, 0, 0, 0.2)']

```
      [~~(Math.random() * 3)]
```
```
  }
```
```
  init()
```
```
 
```
```
  return () => {
```
```
 
```
```
    spin += spinc
```
```
    if (Math.random() < .005) {
```
```
      init()
```
```
    } else {
```
```
      r += rinc
```
```
    }
```
```
 
```
```
    if (Math.random() < .01) {
```
```
      ax = x
```
```
      ay = y
```
```
      const inside = ax > 0 &&
```
```
        ax < canvas.width &&
```
```
        ay > 0 &&
```
```
        ay < canvas.height
```
```
      if (!inside) {
```

        const p = hist[~~(Math.random() * hist.length)]

```
        ax = p[0]
```
```
        ay = p[1]
```
```
      }
```
```
      init()
```
```
    } 
```
```
 
```
```
    t += (dt - t) / 22
```
```
 
```
```
    x = ax + Math.cos(t + spin) * r
```
```
    y = ay + Math.sin(t + spin) * r
```
```
 
```
```
    if (x > 0 && x < canvas.width &&
```
```
      y > 0 && y < canvas.height) {
```
```
      hist.push([x, y])
```
```
    }
```
```
 
```
```
    c.fillStyle = col
```
```
    c.fillRect(x, y, 4, 4)
```
```
  }
```
```
}
```
```
 
```
```
const f = flun()
```
```
 
```
```
setInterval(() => {
```
```
  for (let i = 0; i < 20; i++) f()
```
```
}, 16)
```

Just randomly coded this one morning for a short – simple – but never did this exact motion before. It looks surprisingly organic and occasionally draws things that look like faces and other objects

August 7, 2025

// animation // canvas // drawing // golfed // graphics // javascript // math // random

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

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

Other Gates from NAND

```
const nand = ([a, b]) => +!(a & b)
```
```
 
```
```
const not = ([a]) => nand([a, a])
```
```
 
```

const and = ([a, b]) => nand([nand([a, b]), nand([a, b])])

```
 
```

const or = ([a, b]) => nand([nand([a, a]), nand([b, b])])

```
 
```
```
const nor = ([a, b]) => 
```
```
  nand([ 
```

    nand([nand([a, a]), nand([b, b])]),

```
    nand([nand([a, a]), nand([b, b])])
```
```
  ])
```
```
 
```
```
const xor = ([a, b]) =>
```
```
  nand([
```
```
    nand([a, nand([a, b])]),
```
```
    nand([b, nand([a, b])])
```
```
  ])
```
```
 
```
```
const xnor = ([a, b]) => 
```
```
  nand([ 
```
```
    nand([nand([a, a]), nand([b, b])]),
```
```
    nand([a, b])
```
```
  ])
```
```
 
```
```
 
```
```
const inputs = [
```
```
  [0, 0],
```
```
  [0, 1],
```
```
  [1, 0],
```
```
  [1, 1]
```
```
]
```
```
 
```

const testGate = ({ gate, truth, result }) => console.log(

```
  gate + ' matches truth? ', 
```
```
  truth+'' === result+'' ? 
```

    'yes :D' : `nope :( ${truth} ${result}`

```
)
```
```
 
```
```
testGate({
```
```
  gate: 'NAND',
```
```
  truth: [1, 1, 1, 0],
```
```
  result: inputs.map(nand)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'NOT',
```
```
  truth: [0, 1],
```
```
  result: [[1], [0]].map(not)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'AND',
```
```
  truth: [0, 0, 0, 1],
```
```
  result: inputs.map(and)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'OR',
```
```
  truth: [0, 1, 1, 1],
```
```
  result: inputs.map(or)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'NOR',
```
```
  truth: [1, 0, 0, 0],
```
```
  result: inputs.map(nor)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'XOR',
```
```
  truth: [0, 1, 1, 0],
```
```
  result: inputs.map(xor)
```
```
})
```
```
 
```
```
testGate({
```
```
  gate: 'XNOR',
```
```
  truth: [1, 0, 0, 1],
```
```
  result: inputs.map(xnor)
```
```
})
```

Use NAND to create a bunch of other gates 😀 – I used this wikipedia article for reference

July 16, 2023

// arrays // golfed // humor // javascript // math

Older Posts

Flun Draw

iwrjgnb

sTwister

Golfed Codepen – 3D Spiral Thing

Other Gates from NAND

Recent

Archive