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

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

crystl

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
let w;
```
```
let h;
```
```
 
```
```
onresize = e => {
```
```
  w = innerWidth * 2
```
```
  h = innerHeight * 2
```
```
  canvas.width = w
```
```
  canvas.height = h
```
```
  canvas.style.width = (w / 2) + 'px'
```

  canvas.style.height = (h / 2) + 'px'

```
  c.fillStyle = '#000'
```
```
  c.fillRect(0, 0, w, h) 
```
```
}
```
```
onresize()
```
```
 
```
```
document.body.append(canvas)
```

canvas.style.filter = 'contrast(2) brightness(1.2)'

```
 
```
```
class Crystal {
```
```
  constructor() {
```
```
    this.init()
```
```
  }
```
```
  init() {
```
```
    this.x = w / 2
```
```
    this.y = h * .7
```
```
    this.rad = 250
```
```
 
```
```
    this.sides = 5
```
```
    // + ~~(Math.random() * 5)
```

    this.shrinkTime = 400 + Math.random() * 100

```
    this.t = Math.random() * 7
```
```
    this.st = this.t;
```

    this.step = (Math.PI * 2) / this.sides

```
    this.time = 0
```

    this.shrinkSpeed = 1.3 - Math.random() * .6

```
    this.a = 0
```
```
    this.ad = .05
```
```
  }
```
```
 
```
```
  draw() { 
```
```
 
```
```
    this.a += (this.ad - this.a) / 150
```
```
    c.lineWidth = 5
```

    c.strokeStyle = `rgba(255, 255, 255, ${this.a})`

    c.fillStyle = `rgba(0, 111, 122, ${this.a / 2})`

```
    c.beginPath()
```
```
 
```
```
    for (let j = 0; j < 2; j++) {
```
```
      this.time++
```

      if (this.time > this.shrinkTime) {

```
        this.rad -= this.shrinkSpeed
```
```
        if (this.rad < 0) {
```
```
          setTimeout(() => {
```

            c.fillStyle = 'rgba(0, 0, 0, .02)'

```
            c.fillRect(0, 0, w, h)
```
```
            this.init()
```
```
          }, 500)
```
```
          return;
```
```
        }
```
```
      }
```
```
      this.t = this.st
```

      for (let i = 0; i < this.sides; i++) {

```
        let p = {
```

          x: this.rad * Math.cos(this.t),

          y: this.rad * .6 * Math.sin(this.t)

```
        }
```
```
        this.t += this.step;
```
```
        if (i === 0) {
```

          c.moveTo(this.x + p.x, this.y + p.y)

```
        } else {
```

          c.lineTo(this.x + p.x, this.y + p.y)

```
        }
```
```
      }
```
```
      c.closePath()
```
```
      c.stroke() 
```
```
      c.fill()
```
```
 
```
```
 
```
```
      this.y -= 1
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
let cryst = new Crystal()
```
```
 
```
```
 
```
```
setInterval(() => {
```

  for (let i = 0; i < 3; i++) cryst.draw()

```
}, 16)
```

quick crystal for recent youtube short…

July 27, 2024

// 3d // canvas // gradients // graphics // hacks // isometric // javascript // math // random // speed-coded // speedcoding // tricks

Older Posts

Flun Draw

iwrjgnb

sTwister

T Plant

crystl

Recent

Archive