Snippet Zone

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

Golfed Min/Max

```
Math.min(a,b)  // 13 chars
```
```
a<b?a:b        //  7 chars
```
```
 
```
```
Math.max(a,b)
```
```
a>b?a:b
```

Another small golfing gem from codegolf stackexchange. This isn’t immediately obvious, but cool to note when golfing.

It’s also worth mentioning that if your code is long enough, aliasing Math.min and/or Math.max may be shorter in the long run:

```
m = Math.min
```
```
Math.min(a,b)  // 13 chars
```
```
a<b?a:b        //  7 chars
```
```
m(a,b)         //  6 chars
```

September 21, 2021

// codegolf // javascript // math // tricks

Array Sum Golfed

```
a = [1, 2, 3, 6, 9];
```
```
sum = eval(a.join`+`);
```
```
console.log(sum);
```

Found myself doing something like this a few times… easy golfed array sum. I saw this over at codegolf stackexchange here.

That whole thread is a great. I plan to post more from there in the future.

September 18, 2021

// codegolf // humor // javascript // math // obfuscation

toString Hack Obfuscated

```
x=''+self 
```
```
j=''
```

'd1d7a1712345691a7512d427b1da7d9ab7519a4b721a961721d694'

```
.split``
```
```
.map(_=>j+=`x[0x${_}]+`)
```
```
console.log(eval(j+'""'))
```

Yesterday’s snippet saying something else…

It’s simpler than it looks:

```
x=''+self 
```
```
// becomes "[object Window]"
```
```
 
```
```
j='' 
```

// initialize `j` which will be javascript to pass to `eval`

```
 
```
```
'd1d7a17123456...' 
```
```
// this is a list of index values to 
```

// look up in `x` in hexidecimal so that each

```
// index is a single character
```
```
 
```
```
.split``
```

// split the index values into an array `[0xe, 0x2 ...`

```
 
```
```
.map(_=>j+=`x[0x${_}]+`)
```

// map over the index values and write a string like

```
// this `x[0xe]+x[0x2]+...` into `j`
```
```
 
```
```
console.log(eval(j+'""'))
```

// evaluate `j` with an empty string at the end

```
// `x[0xe]+x[0x2]+""` and log it out
```

September 13, 2021

// arrays // codegolf // golfed // hacks // hex // humor // javascript // obfuscation // strings // tricks

Obfuscated Canvas Commands

```
const oCan = (
```
```
  d = document,
```
```
  b = d.body,
```

  canvas = b.appendChild(document.createElement('canvas')),

```
  c = canvas.getContext('2d'),
```
```
  props = [],
```
```
  o = {},
```
```
  docs = {},
```
```
  cmds = [],
```
```
  L,
```
```
  k,
```
```
  du,
```
```
  j,
```
```
  draw,
```
```
  id
```
```
) => {
```
```
  ;(onresize = () => {
```
```
    canvas.width = innerWidth
```
```
    canvas.height = innerHeight
```
```
    if (draw) {
```
```
      clearTimeout(id)
```

      id = setTimeout(() => cmds.forEach(v => draw(v)), 500)

```
    }
```
```
  })()
```
```
 
```

  Object.assign(b.style, { margin: 0, height: '100%' })

```
 
```

  // longer way: console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(c)));

```
  for (let i in c) props.push(i)
```
```
 
```

  // make alphabetical since object keys have

```
  // no order
```
```
  props.sort().map(i => {
```
```
    L = i.match(/[A-Z]/)
```
```
    k = i[0]
```
```
    if (L) k += L[0]
```
```
    du = 0
```
```
    if (o[k]) {
```
```
      j = 0
```
```
      while (o[k]) k += i[++j]
```
```
    }
```
```
 
```
```
    o[k] =
```
```
      (typeof c[i])[0] == 'f'
```

        ? (...args) => c[i].apply(c, args)

```
        : v => (c[i] = v)
```
```
    docs[i] = k
```
```
  })
```
```
 
```

  console.log('docs:', JSON.stringify(docs, null, 2))

```
 
```

  return (draw = (s, cmd, currFn, args = [], part, fn, num) => {

```
    cmd = s.split(/\s+/)
```
```
    cmds.push(s)
```
```
    c.save()
```

    for (let i = 0; i < cmd.length; i++) {

```
      part = cmd[i]
```
```
      fn = o[part]
```
```
      if (fn && currFn != fn) {
```
```
        currFn && currFn.apply(c, args)
```
```
        currFn = fn
```
```
        args = []
```
```
      } else {
```
```
        num = parseFloat(part)
```

        args.push(!isNaN(num) ? num : part)

```
      }
```
```
    }
```
```
    currFn && currFn.apply(c, args)
```
```
    c.restore()
```
```
  })
```
```
}
```
```
 
```
```
const c = oCan()
```
```
// `font` & text not suppoted
```
```
// make str a function so resize works?
```
```
c(`
```
```
  fS #ccc
```
```
  fR 0 0 400 ${innerHeight}
```
```
  fS blue
```
```
  fR 40 0 20 20
```
```
  gCl difference
```
```
  ro .25
```
```
  fR 50 0 30 30
```
```
  gCl source-over
```
```
  fS rgba(200,100,9)
```
```
  fR 100 100 40 40
```
```
  `)
```

I’ve had this idea for a long time, never bothered doing it until now. I wrote it in a semi-golfed style for no reason… Anyway, this lets you write canvas code in a strange obfuscated syntax that looks like this:

```
c(`
```
```
  fS #ccc
```
```
  fR 0 0 400 ${innerHeight}
```
```
  fS blue
```
```
  fR 40 0 20 20
```
```
  gCl difference
```
```
  ro .25
```
```
  fR 50 0 30 30
```
```
  gCl source-over
```
```
  fS rgba(200,100,9)
```
```
  fR 100 100 40 40
```
```
  `)
```

This snippet logs out some JSON that shows all the method aliases for the canvas context.

September 10, 2021

// canvas // codegolf // color // golfed // graphics // hacks // humor // javascript // json // strings // tricks

Older Posts

Newer Posts

Array Based Collision Cells

Golfed Min/Max

Array Sum Golfed

toString Hack Obfuscated

Obfuscated Canvas Commands

Recent

Archive