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

SVG getScreenCTM

  1. const el = document.body.appendChild(
  2.   document.createElement`div`
  3. );
  4. el.innerHTML = `
  5. <svg width="200" height="200" viewBox="0 0 200 200">
  6.   <rect 
  7.     class="rect"
  8.     transform="translate(50, 50) scale(1.2) rotate(25)"
  9.     fill="purple"
  10.     x="0" y="0" width="50" height="50" />
  11. </svg>
  12. `;
  13.  
  14. const box = document.body.appendChild(
  15.   document.createElement`div`
  16. );
  17.  
  18. Object.assign(box.style, {
  19.   position: 'absolute',
  20.   left: 0, top: 0,
  21.   width: '50px',
  22.   height: '50px',
  23.   transformOrigin: '0 0',
  24.   outline: '5px solid red'
  25. });
  26.  
  27. const rect = document.querySelector('.rect');
  28. const {a, b, c, d, e, f} = rect.getScreenCTM()
  29.  
  30. box.style.transform = `
  31.   matrix(${[a, b, c, d, e, f]})
  32. `;

The transformation matrix of an SVG element can be obtained using getScreenCTM or getCTM. The latter of which will be relative to the SVG coordinate space, vs the coordinate space of the page.

Here we take the matrix data from getScreenCTM and use it on a div to place a border over an SVG rect node. This is great for layering HTML on top of SVG.

// dom // javascript // math // matrix // svg // tricks // ui

Canvas Particle

  1. const canvas = document.createElement('canvas'),
  2.   c = canvas.getContext('2d');
  3.  
  4. canvas.width = 500;
  5. canvas.height = 500;
  6.  
  7. document.body.appendChild(canvas);
  8.  
  9. c.fillStyle = 'black';
  10. c.fillRect(0, 0, canvas.width, canvas.height);
  11.  
  12. let a = 0.29, b = 0.22;
  13.  
  14. function f(x, y) {
  15.   if (Math.random() < 0.001) b = Math.random();
  16.   return Math.cos((x + Math.sin(x) * 0.01 + Math.cos(x * a)) * b);
  17. }
  18.  
  19. let x = 1, y = 0;
  20.  
  21. setInterval(() => {
  22.   if (Math.random() < 0.03) {
  23.     x = 1;
  24.     y = 0;
  25.   }
  26.   if (Math.random() < 0.001) a = Math.random();
  27.   for (let i = 0; i < 1e3; i++) {
  28.     x = x + f(y);
  29.     y = y + f(x);
  30.     c.save();
  31.     c.translate(150, 250);
  32.     c.scale(0.5, 0.5);
  33.     c.fillStyle = 'rgba(255, 255, 255, 0.01)';
  34.     c.fillRect(x, y, 5, 5);
  35.     c.restore();
  36.   }
  37. }, 20);

A single particle moves around and leaves a trail

// canvas // graphics // javascript // math // speed-coded

Hacky Polish Notation

  1. const f = (o, ...a) => eval(a.join(o));
  2.  
  3. const polish = eq => eval(
  4.     eq.replace(/\s+/g, ' ')
  5.       .replace(/(\))\s([0-9])/g, '$1,$2')
  6.       .replace(/([0-9]+)[^\)]/g, '$1,')
  7.       .replace(/\(\s?([\+\-\*\\/])/g, 'f(`$1`,')
  8.   );
  9.  
  10. console.log(polish('(* 2 2)'));
  11. console.log(polish('(* 2 2 (+ 3 2 1))'));
  12. console.log(polish('(- 10 3)'));
  13. console.log(polish('(/ (+ 10 10 (* 2 2)) 3)'));

Hacky way to parse polish notation. This uses regular expressions to transform polish notation into javascript that can be run with eval. Just a weird/fun idea…

// javascript // lisp // math // s-expressions // scheme

Easy Hex Color Invert

  1. let color = 0xFFFF00;
  2.  
  3. function toHexString(col) { 
  4.   return '#' + ('000000' + col.toString(16)).substr(-6);
  5. }
  6.  
  7. function onClick() {
  8.   // invert the color
  9.   color ^= 0xFFFFFF;
  10.   document.body.style.background = toHexString(color);
  11. }
  12.  
  13. onClick();
  14.  
  15. document.addEventListener('click', onClick);
  16.  
  17. console.log('try a different initial color');
  18. console.log('click anywhere to invert background...');

Easily invert a hex color. Expanding on yesterdays post – just one of many reasons you may want to work with colors in their integer form.

// color // hex // javascript // math // tricks

Integers to Colors

  1. function toHexString(col) { 
  2.   return '#' + ('000000' + col.toString(16)).substr(-6);
  3. }
  4.  
  5. document.body.style.background = toHexString(0x275ba1);
  6.  
  7. console.log("#275ba1 as an integer:", 0x275ba1);
  8. console.log("#ff0000 as an integer:", 0xff0000);

Convert an integer in hex (like 0xff0000) to a usable hex string "#ff0000".

// color // hex // javascript // math
Older Posts
Newer Posts

Recent

Archive

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