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

Array.at Negative Indices

```
const arr = [
```
```
  'one', 'two', 
```
```
  'three', 'four'
```
```
];
```
```
console.log(
```
```
  arr.at(-1), 
```
```
  arr.at(-2), 
```
```
  arr.at(0)
```
```
);
```

Array.at allows negative index values to be used to read elements from an array. I’ve seen this done using a Proxy in the past.

September 22, 2021

// arrays // javascript

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

Complementary HSL

const a = document.body.appendChild(document.createElement('div')),

      b = document.body.appendChild(document.createElement('div'));

```
let degA = degB = 0;
```
```
 
```
```
const size = {
```
```
  width: '100px',
```
```
  height: '100px'
```
```
};
```
```
Object.assign(a.style, size);
```
```
Object.assign(b.style, size);
```
```
 
```
```
function loop() {
```
```
  degA += 1;
```
```
  degB = degA + 180;
```

  a.style.background = `hsl(${degA}deg, 100%, 50%)`;

  b.style.background = `hsl(${degB}deg, 100%, 50%)`;

```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

In HSL a hue difference of 180 degrees between two values will create a set of complimentary colors.

September 20, 2021

// animation // color // css // dom // javascript // tricks // ui

Wiggly Line Canvas

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
document.body.style.margin = 0;
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth;
```
```
  canvas.height = innerHeight;
```
```
}
```
```
addEventListener('resize', resize);
```
```
resize();
```
```
 
```
```
const PAD = 50;
```
```
const RAD = 2;
```
```
const SPEED = 20;
```
```
const TWO_PI = Math.PI * 2;
```
```
 
```
```
let mode = 'draw';
```
```
 
```
```
let t = Math.random() * TWO_PI, 
```
```
    x = innerWidth / 2, 
```
```
    y = innerHeight / 2,
```
```
    vx = 0, vy = 0, ta = 0;
```
```
 
```
```
function loop() {
```
```
  for (var i = 0; i < SPEED; i++) {
```
```
    t = Math.sin(ta) * TWO_PI;
```
```
    vx = RAD * Math.cos(t);
```
```
    vy = RAD * Math.sin(t);
```
```
    ta += Math.random() * 0.1 - 0.05;
```
```
    x += vx;
```
```
    y += vy;
```
```
 
```
```
    if (Math.random() < 0.005) {
```
```
      mode = 'no draw';
```
```
    } else if (Math.random() < 0.005) {
```
```
      mode = 'draw';
```
```
    }
```
```
 
```
```
    if (mode === 'draw') {
```
```
      c.fillStyle = 'red';
```
```
      c.fillRect(x, y, 2, 2);
```
```
    }
```
```
 
```
```
    if (x < -PAD) {
```
```
      x = innerWidth + PAD;
```
```
    } else if (x > innerWidth + PAD) {
```
```
      x = -PAD;
```
```
    }
```
```
    if (y < -PAD) {
```
```
      y = innerHeight + PAD;
```
```
    } else if (y > innerHeight + PAD) {
```
```
      y = -PAD;
```
```
    }
```
```
  }
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.

September 19, 2021

// animation // canvas // javascript // math // random // tricks

Older Posts

Newer Posts

Array Based Collision Cells

Array.at Negative Indices

Golfed Min/Max

Complementary HSL

Wiggly Line Canvas

Recent

Archive