)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Pretty Print JSON in Console

  1.   const obj = {
  2.     x: 1, y: 2,
  3.     data: { test: 'xyz' }
  4.   };
  5.   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.

// javascript // json // objects

console.log Hijack

  1. const log = console.log;
  2. const consoleUI = document.body.appendChild(
  3.   document.createElement('div')
  4. );
  5. document.body.style.margin = 0;
  6. Object.assign(consoleUI.style, {
  7.   position: 'fixed',
  8.   bottom: 0,
  9.   width: '100%',
  10.   height: '30%',
  11.   maxHeight: '450px',
  12.   minHeight: '200px',
  13.   background: 'rgb(68, 68, 81)',
  14.   overflow: 'scroll'
  15. });
  16. function consoleRow(str) {
  17.   const row = document.createElement('div');
  18.   consoleUI.prepend(row);
  19.   row.innerText = str;
  20.   Object.assign(row.style, {
  21.     padding: '.5em',
  22.     fontFamily: 'sans-serif',
  23.     color: 'white',
  24.     borderBottom: '1px solid rgba(255, 255, 255, .1)',
  25.     whiteSpace: 'pre-wrap'
  26.   });
  27. }
  28.  
  29. console.log = (...args) => {
  30.   const formatted = args.map(val => {
  31.     return typeof val === 'object' ? 
  32.       JSON.stringify(val, null, 2) : val;
  33.   });
  34.   consoleRow(formatted.join(' '));
  35.   log.apply(console, args);
  36. };
  37.  
  38. // test it out
  39.  
  40. console.log(1, 2, 3, 4);
  41. console.log(new Date());
  42.  
  43. const someObject = {
  44.   test: 123,
  45.   testing: { x: 1, y: 2, z: 3 }
  46. };
  47. console.log(someObject);
  48.  
  49. 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…

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

Distance Between Two Points (SVG)

  1. const dist = (x1, y1, x2, y2) => 
  2.   Math.sqrt(
  3.     (x1 - x2) ** 2 + 
  4.     (y1 - y2) ** 2);
  5.  
  6. const el = document.body.appendChild(
  7.   document.createElement('div')
  8. );
  9.  
  10. el.innerHTML = `
  11.   <svg style="overflow:visible;">
  12.     <circle id="circA" cx="150" cy="100" r="50" fill="gray" />
  13.     <circle id="circB" cx="150" cy="200" r="50" fill="blue" />
  14.     <text id="text" dy="20" dx="20">move mouse</text>
  15.   </svg>
  16.   <style>
  17.     body, html, svg {
  18.       width: 100%;
  19.       height: 100%;
  20.     }
  21.   </style>
  22. `;
  23.  
  24. function touch(e) {
  25.   const touches = e.touches;
  26.   let x, y;
  27.   if (touches != null && touches.length > 0) {
  28.     x = touches[0].clientX;
  29.     y = touches[0].clientY;
  30.   } else {
  31.     x = e.clientX;
  32.     y = e.clientY;
  33.   }
  34.   return { x, y };
  35. }
  36.  
  37. const hasTouch = navigator.maxTouchPoints > 0;
  38. const move = hasTouch ? 'touchmove' : 'mousemove';
  39. document.addEventListener(move, e => {
  40.   const { x, y } = touch(e);
  41.  
  42.   // using global ids :D
  43.   circB.cx.baseVal.value = x;
  44.   circB.cy.baseVal.value = y;
  45.  
  46.   const distance = dist(
  47.     circA.cx.baseVal.value, 
  48.     circA.cy.baseVal.value, x, y
  49.   );
  50.   text.innerHTML = 'move mouse, distance: ' + distance;
  51.  
  52.   circA.r.baseVal.value = distance - circB.r.baseVal.value;
  53. });

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

  1. const dist = (x1, y1, x2, y2) => 
  2.   Math.sqrt(
  3.     (x1 - x2) ** 2 + 
  4.     (y1 - y2) ** 2);
// dom // graphics // javascript // math // svg

Combine Two or More Arrays

  1. const numbers = [1, 2, 3];
  2. const letters = ['a', 'b', 'c'];
  3. const symbols = ['!', '@', '#'];
  4.  
  5. // use spread operator
  6. const combined = [...numbers, ...letters, ...symbols];
  7. console.log('first', combined);
  8.  
  9. // older way
  10. const combinedConcat = numbers
  11.   .concat(letters)
  12.   .concat(symbols);
  13.  
  14. console.log('second', combinedConcat);

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

// arrays // javascript // tricks

Creative Coding Auto-Painting

  1. Object.getOwnPropertyNames(Math).map(i => (this[i] = Math[i]))
  2. ;((
  3.   width = innerWidth * 2,
  4.   height = innerHeight * 2,
  5.   cnv = document.body.appendChild(
  6.     Object.assign(document.createElement('canvas'), {
  7.       width,
  8.       height
  9.     })
  10.   ),
  11.   c = cnv.getContext('2d'),
  12.   r = (n = 1) => Math.random() * n,
  13.   NUM = 50,
  14.   f = () => ({
  15.     ax: r(width),
  16.     ay: r(height),
  17.     x: 0,
  18.     y: 0,
  19.     T: r(9),
  20.     R: r(innerWidth * 0.8) + 40,
  21.     t: r(6),
  22.     C: round(r(255)),
  23.     m: r(5) + 1
  24.   }),
  25.   cs,
  26.   sn,
  27.   dx,
  28.   dy,
  29.   ns = [...Array(NUM)].map(f)
  30. ) => {
  31.   Object.assign(cnv.style, {
  32.     transformOrigin: '0 0',
  33.     transform: 'scale(.5)'
  34.   })
  35.   Object.assign(document.body.style, {
  36.     margin: 0,
  37.     padding: 0
  38.   })
  39.  
  40.   const clear = () => {
  41.     c.fillStyle = '#666668'
  42.     c.fillRect(0, 0, width, height)
  43.     c.globalAlpha = 0.5
  44.   }
  45.  
  46.   onresize = () => {
  47.     width = cnv.width = innerWidth * 2
  48.     height = cnv.height = innerHeight * 2
  49.     clear()
  50.   }
  51.  
  52.   clear()
  53.  
  54.   setInterval(() => {
  55.     for (i = 0; i < 30; i++) {
  56.       ns.map((n, i) => {
  57.         with (n) {
  58.           x = ax + R * cos(t)
  59.           y = ay + R * sin(t) * pow(sin(t * 0.5), m)
  60.           c.fillStyle = `rgba(${C},${C},${C},.02)`
  61.           ;(cs = cos(T)), (sn = sin(T)), (dx = x - ax), (dy = y - ay)
  62.           c.fillRect(cs * dx - sn * dy + ax, sn * dx + cs * dy + ay, 50, 50)
  63.           t += 0.1
  64.           R -= 0.01
  65.           if (R < 5) ns[i] = f()
  66.         }
  67.       })
  68.     }
  69.   }, 16)
  70. })()

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

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

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}