Snippet Zone

ASCII Circles (Bresenham Fun)

```
// some circles made of text
```
```
 
```
```
const cols = 50;
```
```
const rows = 50;
```
```
const sym = '.';
```
```
const body = document.body;
```
```
 
```
```
Object.assign(body.style, {
```
```
  userSelect: 'none',
```
```
  fontFamily: 'Courier, monospace',
```
```
  position: 'fixed', 
```
```
  width: '100%',
```
```
  height: '100%',
```
```
  margin: 0
```
```
});
```
```
 
```
```
const el = body.appendChild(
```
```
  document.createElement('span')
```
```
);
```
```
el.innerHTML = sym;
```
```
 
```
```
Object.assign(el.style, {
```
```
  position: 'absolute',
```
```
  left: '50%',
```
```
  top: '50%',
```
```
  wordWrap: 'break-word',
```
```
  cursor: 'pointer'
```
```
});
```
```
 
```

const charSize = el.getBoundingClientRect().width;

```
const elWidth = charSize * cols;
```
```
el.style.display = 'block'
```
```
el.style.width = `${elWidth}px`;
```
```
 
```
```
const info = body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
 
```
```
Object.assign(info.style, {
```
```
  background: '#fff',
```
```
  padding: '4px',
```
```
  position: 'absolute'
```
```
})
```

info.innerHTML = 'click/tap and hold for different fx';

```
 
```
```
function resize() {
```
```
  const scl = Math.min(
```
```
    1.23, 
```

    Math.min(innerWidth, innerHeight) / elWidth * .93

```
  );
```

  el.style.transform = `translate(-50%, -50%) scale(${scl}, ${scl * .55})`

```
}
```
```
addEventListener('resize', resize);
```
```
resize();
```
```
 
```
```
const size = cols * rows;
```
```
const pix = sym.repeat(size);
```
```
el.innerHTML = pix;
```
```
 
```
```
let cells = pix.split('')
```
```
const blank = cells.concat();
```
```
 
```
```
function setSym(x, y, col) {
```
```
  const idx = x + y * cols;
```
```
  if (cells[idx] != null) {
```
```
    cells[idx] = col;
```
```
  }
```
```
  return setSym
```
```
}
```
```
 
```
```
const grad = '::;|0UU888NN';
```
```
function circ(shooter) {
```

  let x = Math.round(Math.random() * cols);

  let y = Math.round(Math.random() * rows);

```
  const rad = Math.round(
```
```
    shooter ? Math.random() * 2 :
```

      Math.random() * Math.random() * 13 + 1

```
  );
```
```
 
```

  const sym = shooter ? '#' : grad.charAt(rad % grad.length);

```
  let speed = rad / 10 + .1;
```
```
  let dir = Math.random() * 2 - 1;
```
```
  return () => {
```

    drawCircle(x, y, rad, sym, shooter);

```
    y += speed;
```
```
    if (shooter) x += speed * 3 * dir;
```
```
    if (y > rows + 10) y = -14;
```
```
  }
```
```
}
```
```
 
```
```
const circs = [];
```
```
const NUM = 40;
```
```
for (let i = 0; i < NUM; i++) {
```
```
  circs.push(circ(Math.random() > 0.5))
```
```
}
```
```
 
```
```
let down;
```

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

```
  down = true;
```
```
});
```

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

```
  down = false;
```
```
});
```

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

```
  down = true;
```
```
});
```

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

```
  down = false;
```
```
});
```
```
 
```
```
let tweak;
```
```
let tweakChoice;
```
```
let tweakChance = 0.4;
```

const clear = () => cells = blank.concat();

```
 
```
```
function draw() {
```
```
  if (!down) {
```
```
    tweak = false;
```
```
    tweakChoice = Math.random();
```
```
    clear();
```
```
  } else {
```
```
    if (tweakChoice < tweakChance) {
```
```
      tweak = true;
```
```
      clear();
```
```
    }
```
```
  }
```
```
 
```
```
  circs.forEach(circ => circ());
```
```
  el.innerHTML = cells.join('');
```
```
}
```
```
 
```

// 60fps is too fast, so use 30ms interval

```
setInterval(draw, 30);
```
```
 
```
```
function hLine(xp, yp, w, col) {
```
```
  for (let i = 0; i < w; i++) {
```
```
    setSym(xp + i, yp, col);
```
```
  }
```
```
  return hLine;
```
```
}
```
```
 
```
```
// bresenham circle
```

function drawCircle(xp, yp, radius, sym = '@', isFilled) {

```
  if (isFilled && tweak) sym = '';
```
```
 
```
```
  xp = parseInt(xp, 10);
```
```
  yp = parseInt(yp, 10);
```
```
  radius = parseInt(radius, 10);
```
```
  let balance = -radius,
```
```
    xoff = 0,
```
```
    yoff = radius;
```
```
 
```
```
  while (xoff <= yoff) {
```
```
    const p0 = xp - xoff;
```
```
    const p1 = xp + xoff;
```
```
 
```
```
    const p2 = yp + yoff;
```
```
    const p3 = yp - yoff;
```
```
    const p4 = yp + xoff;
```
```
    const p5 = xp + yoff;
```
```
    const p6 = xp - yoff;
```
```
    const p7 = yp - xoff;
```
```
 
```
```
    if (isFilled) {
```
```
      const w0 = xoff + xoff;
```
```
      const w1 = yoff + yoff;
```
```
 
```
```
      hLine
```
```
        (p0, yp + yoff, w0, sym)
```
```
        (p0, yp - yoff, w0, sym)
```
```
        (p6, yp + xoff, w1, sym)
```
```
        (p6, yp - xoff, w1, sym);
```
```
 
```
```
    } else {
```
```
      setSym
```
```
        (p1, p2, sym)
```
```
        (p0, p2, sym)
```
```
        (p0, p3, sym)
```
```
        (p1, p3, sym)
```
```
        (p5, p4, sym)
```
```
        (p6, p4, sym)
```
```
        (p6, p7, sym)
```
```
        (p5, p7, sym);
```
```
    }
```
```
 
```

    // never been able to find the original

```
    // source for the below condition 
```

    // more info here: https://actionsnippet.com/?p=492

    if ((balance += xoff++ + xoff) >= 0) {

```
      balance -= --yoff + yoff;
```
```
    }
```
```
  }
```
```
}
```

This is a bit of a longer snippet that uses the Bresenham circle drawing algorithm to draw some circles with text. I recommend looking at it with the fullscreen button.

I like to do this:

```
hLine
```
```
  (p0, yp + yoff, w0, sym)
```
```
  (p0, yp - yoff, w0, sym)
```
```
  (p6, yp + xoff, w1, sym)
```
```
  (p6, yp - xoff, w1, sym);
```

Make a function return itself, so that if you need to call it many times without having to repeat the function name. Because this isn’t a common style it is generally frowned upon, I’m always tempted to use it at work for some reason… maybe next April fools.

September 26, 2021

// animation // arrays // graphics // hacks // humor // javascript // math // random // strings // tricks

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

toString hack

```
x=self+''
```
```
console.log(
```
```
  x[8],x[9],x[6],' ',
```
```
  x[3],x[1],x[2],' ',
```
```
  x[10],x[4],x[8],' ',
```
```
  x[5],x[1],x[11]
```
```
)
```

Hit the “Try it out” and open the console….

September 12, 2021

// hacks // javascript // strings

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

Nonsense Logs

```
const SPEED = 700;
```
```
 
```
```
const addKeys = obj => {
```
```
  obj.keys = Object.keys(obj)
```
```
  return obj
```
```
}
```
```
 
```
```
const wordParts = {
```
```
  start: addKeys({
```
```
    z: .3,
```
```
    zim: .1,
```
```
    zz: .1,
```
```
    zzz: .1,
```
```
    ziz: .05,
```
```
    zoo: .1,
```
```
    koe: .05,
```
```
    kob: .05,
```
```
    'cow cow': .1,
```
```
    'how ': .02,
```
```
    sl: .1,
```
```
    ko: .05
```
```
  }),
```
```
 
```
```
  mid: addKeys({
```
```
    i: .1,
```
```
    oo: .1,
```
```
    a: .1,
```
```
    e: .3,
```
```
    oe: .1,
```
```
    ebobe: .1,
```
```
    y: .1
```
```
  }),
```
```
 
```
```
  end: addKeys({
```
```
    z: .3,
```
```
    n: .1,
```
```
    t: .05,
```
```
    rat: .1,
```
```
    '!': .05,
```
```
    '?': .05,
```
```
    '': .1
```
```
  })
```
```
};
```
```
 
```
```
const wordPart = (
```
```
    type,
```
```
    dupeOdds = .1,
```
```
    dupeMax = 8,
```
```
    capOdds = .05
```
```
  ) => {
```
```
 
```
```
  let result = '';
```
```
  const part = wordParts[type];
```
```
  while (result === '') {
```
```
    const choice = part.keys[
```

      Math.floor(Math.random() * part.keys.length)

```
    ];
```
```
    if (Math.random() < part[choice]) {
```
```
      result = choice;
```
```
      if (Math.random() < dupeOdds) {
```
```
        const dupes = Math.round(
```

          Math.random() * Math.random() * dupeMax

```
        );
```
```
        result = result.repeat(dupes);
```
```
      }
```
```
    }
```
```
  }
```
```
  wordPart.accum += result;
```
```
 
```
```
  if (Math.random() < capOdds) {
```

    wordPart.accum = wordPart.accum.toUpperCase()

```
  }
```
```
  return wordPart;
```
```
}
```
```
wordPart.accum  = '';
```
```
 
```
```
const word = () =>
```

  wordPart('start')('mid')('end').accum + ' '

```
 
```
```
document.body.style.fontSize="2em";
```
```
setInterval(() => {
```
```
  document.body.innerHTML += word();
```
```
  wordPart.accum = ''
```
```
}, SPEED);
```

Sometimes to entertain myself I will write nonsense style print/log statements. Things like console.log('cowcow'). This snippet generates a variety of these kinds of phrases.

September 7, 2021

// humor // javascript // strings

Older Posts

Newer Posts

ASCII Circles (Bresenham Fun)

toString Hack Obfuscated

toString hack

Obfuscated Canvas Commands

Nonsense Logs

Recent

Archive