Snippet Zone

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

Easy Random Color

```
 
```

document.body.innerHTML += 'click to randomize background color';

```
 
```

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

```
  const hue = Math.random() * 360;
```

  document.body.style.background = `hsl(${hue}deg, 50%, 50%)`;

```
});
```

One way to generate a random color is to randomize the hue argument of the css hsl. This value is in degrees 0-360 (colorwheel). The other arguments can be randomized as well if you need random saturation and lightness… like this:

```
 
```

document.body.innerHTML += 'click to randomize background color';

```
 
```

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

```
  const hue = Math.random() * 360;
```

  const saturation = Math.random() * 100;

  const lightness = Math.random() * 100;

  document.body.style.background = `hsl(${hue}deg, ${saturation}%, ${lightness}%)`;

```
});
```

September 3, 2021

// css // dom // graphics // javascript

Distance Between Two Points (SVG)

```
const dist = (x1, y1, x2, y2) => 
```
```
  Math.sqrt(
```
```
    (x1 - x2) ** 2 + 
```
```
    (y1 - y2) ** 2);
```
```
 
```
```
const el = document.body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
 
```
```
el.innerHTML = `
```
```
  <svg style="overflow:visible;">
```

    <circle id="circA" cx="150" cy="100" r="50" fill="gray" />

    <circle id="circB" cx="150" cy="200" r="50" fill="blue" />

    <text id="text" dy="20" dx="20">move mouse</text>

```
  </svg>
```
```
  <style>
```
```
    body, html, svg {
```
```
      width: 100%;
```
```
      height: 100%;
```
```
    }
```
```
  </style>
```
```
`;
```
```
 
```
```
function touch(e) {
```
```
  const touches = e.touches;
```
```
  let x, y;
```

  if (touches != null && touches.length > 0) {

```
    x = touches[0].clientX;
```
```
    y = touches[0].clientY;
```
```
  } else {
```
```
    x = e.clientX;
```
```
    y = e.clientY;
```
```
  }
```
```
  return { x, y };
```
```
}
```
```
 
```

const hasTouch = navigator.maxTouchPoints > 0;

const move = hasTouch ? 'touchmove' : 'mousemove';

```
document.addEventListener(move, e => {
```
```
  const { x, y } = touch(e);
```
```
 
```
```
  // using global ids :D
```
```
  circB.cx.baseVal.value = x;
```
```
  circB.cy.baseVal.value = y;
```
```
 
```
```
  const distance = dist(
```
```
    circA.cx.baseVal.value, 
```
```
    circA.cy.baseVal.value, x, y
```
```
  );
```

  text.innerHTML = 'move mouse, distance: ' + distance;

```
 
```

  circA.r.baseVal.value = distance - circB.r.baseVal.value;

```
});
```

This snippet shows how to calculate the distance between two points. The dist function uses the pythagorean theorem:

```
const dist = (x1, y1, x2, y2) => 
```
```
  Math.sqrt(
```
```
    (x1 - x2) ** 2 + 
```
```
    (y1 - y2) ** 2);
```

August 29, 2021

// dom // graphics // javascript // math // svg

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

Range Slider and Progress Bar

```
const NUM = 8;
```
```
const NUM_M_1 = NUM - 1;
```

const ui = document.createElement('div')

```
ui.innerHTML = `
```
```
  <div class="ui">
```
```
    <div class="progress" data-ref>
```

      <div class="progressFill" data-ref></div>

```
    </div>
```
```
    <div class="text" data-ref>
```
```
    0% of 100%
```
```
    </div>
```
```
 
```
```
    <div class="dots" data-ref>
```
```
    ${
```
```
      `<div></div>`.repeat(NUM)
```
```
    }
```
```
    </div>
```
```
 
```
```
    <label>
```
```
      drag the slider...
```

      <input class="slider" type="range" min="0" max="100" step="1" value="0" data-ref/>

```
    </label>
```
```
  </div>
```
```
  <style>
```
```
    body {
```
```
      font-family: sans-serif;
```
```
    }
```
```
    .progress, .dots {
```
```
      position: relative;
```
```
      width: 80%;
```
```
      margin: 0 auto;
```
```
      height: 30px;
```
```
      border: 1px solid black;
```
```
    }
```
```
    .progressFill {
```
```
      height: 100%;
```
```
      width: 0;
```
```
      background: red;
```
```
    }
```
```
    .text {
```
```
      padding: 1em;
```
```
      background: #ccc;
```
```
      margin: .5em;
```
```
      font-weight: bold;
```
```
    }
```
```
    label {
```
```
      display: block;
```
```
      margin: 1em;
```
```
    }
```
```
    .slider {
```
```
      cursor: pointer;
```
```
    }
```
```
    .dots {
```
```
      border: none;
```
```
    }
```
```
    .dots div {
```
```
      height: 100%;
```
```
      width: ${100 / NUM}%;
```
```
      float: left;
```

      transition: background 400ms ease-out;

```
      background: transparent;
```
```
      border-radius: 500px;
```

      box-shadow: inset 0 0px 0 3px blue;

```
    }
```
```
    .dots div:nth-child(1) {
```
```
      background: red;
```
```
    }
```
```
 
```
```
  </style>
```
```
`;
```
```
document.body.appendChild(ui);
```
```
 
```
```
// select everything with a `data-ref`
```
```
const els = {};
```

;[...document.querySelectorAll('[data-ref]')]

```
  .forEach(el => {
```
```
    els[el.classList[0]] = el;
```
```
  });
```
```
 
```
```
function update(e) {
```
```
 
```
```
  // normal prog bar
```
```
  const val = e.target.value;
```

  els.progressFill.style.width = `${val}%`;

```
  els.text.innerHTML = `
```
```
    ${val}% of 100%
```
```
  `;
```
```
 
```
```
  // segmented dot prog bar
```

  const idx = Math.floor(val / (100 / NUM));

```
  if (idx < NUM) { 
```
```
    for (let i = 0; i < NUM; i++) {
```
```
      els.dots.children[i]
```

        .style.background = i <= idx ? 'red' : 'white'

```
    }
```
```
  }
```
```
}
```
```
 
```

els.slider.addEventListener('input', update);

els.slider.addEventListener('change', update);

Drag slider and watch two progress bars and a text readout update. There are some interesting vanilla tricks in this one.

This trick and a variety of variations on it is pretty powerful:

```
const els = {};
```

[...document.querySelectorAll('[data-ref]')].forEach(el => {

```
  els[el.classList[0]] = el;
```
```
});
```

August 26, 2021

// css // dom // graphics // javascript // math // strings // tricks // ui

Older Posts

Newer Posts

Obfuscated Canvas Commands

Easy Random Color

Distance Between Two Points (SVG)

Creative Coding Auto-Painting

Range Slider and Progress Bar

Recent

Archive