Snippet Zone

For Golf Down

```
for(i=6;i--;)console.log(i)
```

October 21, 2021

// codegolf // javascript

Flatten Array Golf

```
 
```

console.log([100, 200, [2], [3, 4, [2, 3, [5]], 100]]+'')

```
// outputs: "100,200,2,3,4,2,3,5,100"
```

Coercing a multidimensional array to a string flattens it and joins it with commas

October 5, 2021

// arrays // codegolf // javascript // strings

Extremely Golfed Canvas

```
d = document
```
```
b = d.body
```
```
with(
```
```
  b.appendChild(Object.assign(
```

  d.createElement`canvas`, { width: 100, height: 100 })

```
  ).getContext`2d`) {
```
```
 
```
```
  fillStyle = 'red'
```
```
  fillRect(5, 5, 20, 20)
```
```
}
```
```
 
```
```
// slightly more complex example
```
```
with(
```
```
  b.appendChild(Object.assign(
```

  d.createElement`canvas`, { width: 200, height: 200 })

```
  ).getContext`2d`) {
```
```
 
```

  fillStyle = '#555', strokeStyle = '#fff', fillRect(0, 0, 200, 200)

```
  for (i = 0; i < 10; i++) 
```

    beginPath(), moveTo(20, 20), lineTo(i * 20 + 10, 190), stroke()

```
}
```

Easy way to write canvas stuff with very little boilerplate code. with doesn’t work in strict mode.

September 29, 2021

// canvas // codegolf // javascript

Cistercian Numerals (semi-golfed)

```
N = -1
```
```
S = 30
```
```
H = 90
```
```
h = 45
```
```
d = document
```
```
b = d.body
```
```
m = _ => d.createElement(_)
```
```
a = _ => b.appendChild(_)
```
```
 
```
```
with(a(
```
```
    Object.assign(
```
```
      m`canvas`,
```
```
      { width: 80, height: 120 }
```
```
    )
```
```
  ).getContext`2d`
```
```
) { 
```
```
  a(m`br`)
```
```
 
```
```
  L = (a, b, C, d) => {
```
```
    moveTo(a, b)
```
```
    lineTo(C, d)
```
```
  }
```
```
 
```
```
  M = _ => L(0, 0, 0, H)
```
```
  O = _ => L(0, 0, S, 0)
```
```
  W = _ => L(0, S, S, S)
```
```
  T = _ => L(0, 0, S, S)
```
```
  F = _ => L(0, S, S, 0)
```
```
  X = _ => L(S, 0, S, S)
```
```
 
```
```
  D = [
```
```
    _ => {},
```
```
    O, W, T, F, 
```
```
    [O,F],
```
```
    X,
```
```
    [O,X],
```
```
    [W,X],
```
```
    [O,W,X]
```
```
  ]
```
```
 
```
```
  n = s => {
```
```
    [...s].reverse().map((l, i) => {
```
```
      save()
```
```
      translate(S+9, h+9)
```
```
      scale(N**i, N**~~(i/2))
```
```
      translate(0, -h)
```

      M() ;[D[l]].flat().map(x => x && x())

```
      restore()
```
```
    })
```
```
  }
```
```
 
```
```
  a(m`input`).oninput = e => {
```
```
    clearRect(0, 0, 80, 120)
```
```
    beginPath()
```
```
    n(~~e.target.value+'')
```
```
    stroke()
```
```
  }
```
```
}
```

Type any number from 0-9999 into the input field and see the corresponding Cistercian Numeral. This snippet is partially golfed, I left the canvas commands intact to make things a bit easier to understand.

Simpler SVG Version

This one hardcodes all numbers 0-9 as paths, unlike the canvas version which only defines 1,2,3,4 and 6 as paths and then combines them to create 5,7,8 and 9.

```
h='innerHTML'
```
```
C='children'
```
```
 
```
```
document.body[h]=`
```

<svg id=G width=99 viewBox="0 0 80 120"

  style="stroke:black;fill:none;overflow:visible">

```
  <g transform="translate(30,2)">
```
```
    <path d="M0 0L 30 0"/>
```
```
    <path d="M0 30L 30 30"/>
```
```
    <path d="M0 0L 30 30"/>
```
```
    <path d="M0 30L30 0"/>
```
```
    <path d="M0 30L30 0 0 0"/>
```
```
    <path d="M30 0L30 30"/>
```
```
    <path d="M30 30L30 0 0 0"/>
```
```
    <path d="M0 30L30 30 30 0"/>
```
```
    <path d="M0 30L30 30 30 0 0 0"/>
```
```
  </g>
```

  <g transform=translate(30,2)scale(-1,1)></g>

  <g transform=translate(30,92)scale(1,-1)></g>

  <g transform=translate(30,92)scale(-1,-1)></g>

```
  <path id=m d="M 30 2 L 30 92"/>
```
```
</svg>
```

<style>path:not(#m){opacity:0}</style><br>

```
<input id=I>`
```
```
 
```
```
c=G[C]
```
```
p=c[0][h] 
```
```
 
```
```
n = s => 
```
```
  [...s].reverse().map((l, i) => 
```

   l-1>-1 && (c[i][C][l-1].style.opacity=1))

```
 
```
```
I.oninput = e => {
```
```
  for(i=0;i<4;i++)c[i][h]=p
```
```
  n(~~e.target.value+'')
```
```
}
```

September 24, 2021

// arrays // canvas // codegolf // graphics // hacks // javascript // math

Array Based Collision Cells

```
((
```
```
  d = document,
```
```
  b = d.body,
```
```
  canvas = b.appendChild(
```
```
    d.createElement('canvas')
```
```
  ),
```
```
  c = canvas.getContext('2d'),
```
```
  r = _ => Math.random(),
```
```
  map = [
```
```
    [0, 0, 0, 0, 0, 2],
```
```
    [1, 1, 0, 0, 0, 1],
```
```
    [1, 1, 2, 0, 0, 0],
```
```
    [2, 2, 0, 0, 0, 1],
```
```
    [0, 1, 0, 0, 2, 0],
```
```
    [2, 0, 0, 0, 2, 1],
```
```
  ],
```
```
  mapW = map[0].length,
```
```
  mapH = map.length,
```
```
  cols = [, 'red', 'black'],
```
```
  cell = (
```
```
    x, y, idx,
```
```
    col = cols[idx],
```
```
    size = 30,
```
```
    xp = x * size,
```
```
    yp = y * size,
```
```
    dir, 
```
```
    mv = f => {
```
```
      map[y][x] = 0
```
```
      f()
```
```
      map[y][x] = idx
```
```
    }
```
```
  ) => (move) => {
```
```
    if (move) {
```
```
      dir = ~~(r() * 4)
```
```
      if (dir == 0 &&
```
```
        x != 0 &&
```
```
        map[y][x - 1] == 0) {
```
```
        mv(_ => x--)
```
```
      } else if (dir == 1 &&
```
```
        x != mapW - 1 &&
```
```
        map[y][x + 1] == 0) {
```
```
        mv(_ => x++)
```
```
      } else if (dir == 2 &&
```
```
        y != 0 &&
```
```
        map[y - 1][x] == 0) {
```
```
        mv(_ => y--)
```
```
      } else if (dir == 3 &&
```
```
        y != mapH - 1 &&
```
```
        map[y + 1][x] == 0
```
```
      ) {
```
```
        mv(_ => y++)
```
```
      }
```
```
    }
```
```
 
```
```
    xp += (x * size - xp) / 4
```
```
    yp += (y * size - yp) / 4
```
```
    c.fillStyle = col
```
```
    c.fillRect(xp, yp, size, size)
```
```
    c.strokeStyle = 'gray'
```
```
    c.strokeRect(xp, yp, size, size)
```
```
  },
```
```
  cells = [],
```
```
  w, h, idx, val, i, j,
```
```
  draw = () => {
```
```
    c.fillStyle = 'gray'
```
```
    c.fillRect(0, 0, w, h)
```
```
 
```
```
    idx = ~~(r() * mapH * mapW)
```
```
 
```
```
    cells.forEach((cell, i) =>
```
```
      cell(idx == i && r() < .3))
```
```
  }
```
```
) => {
```
```
  b.style.margin = 0
```
```
 
```
```
  onresize = () => {
```
```
    w = canvas.width = innerWidth
```
```
    h = canvas.height = innerHeight
```
```
    draw()
```
```
  }
```
```
  onresize()
```
```
 
```
```
  for (i = 0; i < mapH; i++) {
```
```
    for (j = 0; j < mapW; j++) {
```
```
      val = map[i][j]
```

      if (val != 0) cells.push(cell(j, i, val))

```
    }
```
```
  }
```
```
 
```
```
  setInterval(draw, 16)
```
```
})()
```

Array based avoid. I was about to port an old thing that was similar to this and then thought it would be more fun to speedcode it instead. The result is a slightly golfed version of this old thing.

September 23, 2021

// animation // arrays // canvas // codegolf // graphics // javascript // math

Older Posts

Newer Posts