Snippet Zone

Random Hex Color (semi-golfed)

document.body.innerHTML += 'click anywhere...'

```
 
```
```
onclick = () =>
```
```
  document.body.style.background = 
```

    `#${Math.random().toString(16).substr(-6)}`

I golfed this snippet slightly for no reason in particular. I recently posted a nice readable way to make random hsl colors. This snippet generates a random hexidecimal color.

How it works:

Math.random() // random number between 0 and 1

```
 
```

.toString(16) // convert to hex string (something like "0.2d6bcee4198d4")

```
 
```

.substr(-6) // grab the last 6 characters

Here is a non-golfed version:

const instructionsEl = document.createElement('p');

instructionsEl.innerHTML = 'click anywhere...';

document.body.appendChild(instructionsEl);

```
 
```
```
const randomHexColor = () => 
```

  `#${Math.random().toString(16).substr(-6)}`;

```
 
```

document.addEventListener('click', () => {

  document.body.style.background = randomHexColor();

```
});
```

September 6, 2021

// codegolf // color // css // golfed // hex // javascript

Creative Coding Auto-Painting

Object.getOwnPropertyNames(Math).map(i => (this[i] = Math[i]))

```
;((
```
```
  width = innerWidth * 2,
```
```
  height = innerHeight * 2,
```
```
  cnv = document.body.appendChild(
```

    Object.assign(document.createElement('canvas'), {

```
      width,
```
```
      height
```
```
    })
```
```
  ),
```
```
  c = cnv.getContext('2d'),
```
```
  r = (n = 1) => Math.random() * n,
```
```
  NUM = 50,
```
```
  f = () => ({
```
```
    ax: r(width),
```
```
    ay: r(height),
```
```
    x: 0,
```
```
    y: 0,
```
```
    T: r(9),
```
```
    R: r(innerWidth * 0.8) + 40,
```
```
    t: r(6),
```
```
    C: round(r(255)),
```
```
    m: r(5) + 1
```
```
  }),
```
```
  cs,
```
```
  sn,
```
```
  dx,
```
```
  dy,
```
```
  ns = [...Array(NUM)].map(f)
```
```
) => {
```
```
  Object.assign(cnv.style, {
```
```
    transformOrigin: '0 0',
```
```
    transform: 'scale(.5)'
```
```
  })
```
```
  Object.assign(document.body.style, {
```
```
    margin: 0,
```
```
    padding: 0
```
```
  })
```
```
 
```
```
  const clear = () => {
```
```
    c.fillStyle = '#666668'
```
```
    c.fillRect(0, 0, width, height)
```
```
    c.globalAlpha = 0.5
```
```
  }
```
```
 
```
```
  onresize = () => {
```
```
    width = cnv.width = innerWidth * 2
```

    height = cnv.height = innerHeight * 2

```
    clear()
```
```
  }
```
```
 
```
```
  clear()
```
```
 
```
```
  setInterval(() => {
```
```
    for (i = 0; i < 30; i++) {
```
```
      ns.map((n, i) => {
```
```
        with (n) {
```
```
          x = ax + R * cos(t)
```

          y = ay + R * sin(t) * pow(sin(t * 0.5), m)

          c.fillStyle = `rgba(${C},${C},${C},.02)`

          ;(cs = cos(T)), (sn = sin(T)), (dx = x - ax), (dy = y - ay)

          c.fillRect(cs * dx - sn * dy + ax, sn * dx + cs * dy + ay, 50, 50)

```
          t += 0.1
```
```
          R -= 0.01
```
```
          if (R < 5) ns[i] = f()
```
```
        }
```
```
      })
```
```
    }
```
```
  }, 16)
```
```
})()
```

Speed coded semi-golfed canvas texture. Best if viewed in fullscreen.

August 27, 2021

// animation // canvas // codegolf // golfed // graphics // javascript // math // matrix // paths // random

Make Math Global

Object.getOwnPropertyNames(Math).forEach(i => window[i] = Math[i]);

```
 
```
```
// or with map, just to be shorter
```

Object.getOwnPropertyNames(Math).map(i => window[i] = Math[i]);

```
 
```
```
// if this points to window
```

Object.getOwnPropertyNames(Math).map(i => this[i] = Math[i]);

```
 
```

// or using the deprecated "with" statement

```
with (Math) {
```
```
  console.log(PI, E, SQRT2, cos(1));
```
```
}
```

While not very useful, I sometimes like to make the entire Math object global on the window – just when speed coding and playing around.

August 15, 2021

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

Print a Tabula Recta (codegolf)

const tabulaRecta = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'

```
  .replace(/./g,"$&$'$`\n");
```
```
 
```

const pre = document.createElement('pre');

```
document.body.appendChild(pre);
```
```
pre.innerHTML = tabulaRecta;
```
```
 
```

// technique comes from https://codegolf.stackexchange.com/a/87035/63485

This snippet comes from the the codegolf stackexchange. A little while back a challenge for printing a tabula recta popped up along with a very nice answer from user Neil. Take a look at the answer here.

August 4, 2021

// codegolf // golfed // javascript // strings // tricks

Newer Posts

Random Hex Color (semi-golfed)

How it works:

Creative Coding Auto-Painting

Make Math Global

Print a Tabula Recta (codegolf)

Recent

Archive