Snippet Zone

Pretty Print JSON in Console

```
  const obj = {
```
```
    x: 1, y: 2,
```
```
    data: { test: 'xyz' }
```
```
  };
```

  console.log(JSON.stringify(obj, null, 2));

JSON.stringify has two more arguments that allow for pretty printing and processing of the object in question. The second argument is a “replacer” function and the third argument is for indentation. Read more details here.

I am pretty sure I first learned this from this stack overflow post.

I used this technique in yesterdays console hijacking post.

August 31, 2021

// javascript // json // objects

console.log Hijack

```
const log = console.log;
```

const consoleUI = document.body.appendChild(

```
  document.createElement('div')
```
```
);
```
```
document.body.style.margin = 0;
```
```
Object.assign(consoleUI.style, {
```
```
  position: 'fixed',
```
```
  bottom: 0,
```
```
  width: '100%',
```
```
  height: '30%',
```
```
  maxHeight: '450px',
```
```
  minHeight: '200px',
```
```
  background: 'rgb(68, 68, 81)',
```
```
  overflow: 'scroll'
```
```
});
```
```
function consoleRow(str) {
```

  const row = document.createElement('div');

```
  consoleUI.prepend(row);
```
```
  row.innerText = str;
```
```
  Object.assign(row.style, {
```
```
    padding: '.5em',
```
```
    fontFamily: 'sans-serif',
```
```
    color: 'white',
```

    borderBottom: '1px solid rgba(255, 255, 255, .1)',

```
    whiteSpace: 'pre-wrap'
```
```
  });
```
```
}
```
```
 
```
```
console.log = (...args) => {
```
```
  const formatted = args.map(val => {
```
```
    return typeof val === 'object' ? 
```

      JSON.stringify(val, null, 2) : val;

```
  });
```
```
  consoleRow(formatted.join(' '));
```
```
  log.apply(console, args);
```
```
};
```
```
 
```
```
// test it out
```
```
 
```
```
console.log(1, 2, 3, 4);
```
```
console.log(new Date());
```
```
 
```
```
const someObject = {
```
```
  test: 123,
```
```
  testing: { x: 1, y: 2, z: 3 }
```
```
};
```
```
console.log(someObject);
```
```
 
```
```
console.log(3, 2, 1, 0);
```

I’m thinking about adding a little fake console to the Snippet Zone Quick Editor – just whipped this up as a proof of concept – something like this should work…

August 30, 2021

// css // hacks // javascript // meta // strings // tricks // ui

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

Combine Two or More Arrays

```
const numbers = [1, 2, 3];
```
```
const letters = ['a', 'b', 'c'];
```
```
const symbols = ['!', '@', '#'];
```
```
 
```
```
// use spread operator
```

const combined = [...numbers, ...letters, ...symbols];

```
console.log('first', combined);
```
```
 
```
```
// older way
```
```
const combinedConcat = numbers
```
```
  .concat(letters)
```
```
  .concat(symbols);
```
```
 
```
```
console.log('second', combinedConcat);
```

If you click “Try it out” be sure to open your console.

August 28, 2021

// arrays // javascript // tricks

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

Older Posts

Pretty Print JSON in Console

console.log Hijack

Distance Between Two Points (SVG)

Combine Two or More Arrays

Creative Coding Auto-Painting

Recent

Archive