)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Elasticity

  1. let pointX = pointY = 0;
  2.  
  3. document.addEventListener('mousemove', e => {
  4.   pointX = e.clientX;
  5.   pointY = e.clientY;
  6. });
  7.  
  8. document.addEventListener('touchmove', e => {
  9.   pointX = e.touches[0].clientX
  10.   pointY = e.touches[0].clientY
  11. });
  12.  
  13. let el = document.body.appendChild(
  14.   document.createElement`div`
  15. );
  16.  
  17. const size = 20;
  18. const halfSize = size / 2;
  19.  
  20. Object.assign(el.style, {
  21.   position: 'absolute',
  22.   width: `${size}px`,
  23.   height: `${size}px`,
  24.   background: 'red',
  25.   left: 0, top: 0
  26. })
  27.  
  28. let x = vx = 0;
  29. const loop = () => { 
  30.   vx = ((pointX - x) * .2 + vx) * .79;
  31.   x += vx;
  32.   el.style.transform = `translate(${x - halfSize}px, 50px)`;
  33.   requestAnimationFrame(loop);
  34. }
  35. loop();
  36.  
  37. let info = document.body.appendChild(
  38.   document.createElement`div`
  39. );
  40. info.innerHTML = 'move mouse or finger left/right';

Basic interactive elasticity with mouse or touch

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

Random Value From Array

  1. const modes = ['walk', 'run', 'hide', 'jump', 'dance'];
  2.  
  3. const randomMode = modes[Math.floor(modes.length * Math.random())];
  4.  
  5. console.log(randomMode);
  6.  
  7.  
  8. // turn it into a function:
  9. function randomChoice(arr) {
  10.   return arr[Math.floor(arr.length * Math.random())];
  11. }
  12.  
  13. const colors = ['red', 'green', 'blue', 'black', 'white']  ;
  14.  
  15. console.log(randomChoice(colors));
  16. console.log(randomChoice(modes));

Grab a random value from an array.

Animation Along Path SVG

  1. const el = document.body.appendChild(
  2.   document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg width="100%" height="100%" viewBox="0 0 550 496">
  6.     <path 
  7.       d="M 20 10 C 100 100 300 00 300 100 200 200 150 300 20 10" 
  8.       stroke="black" fill='none' vector-effect="non-scaling-stroke"/>
  9.     <circle cx="20" cy="10" r="6" fill="red" />
  10.   </svg>
  11.   <style>
  12.     svg, div, body, html {
  13.       overflow: visible; 
  14.       height: 100%; 
  15.       width: 100%;
  16.       margin: 0; padding: 0;
  17.     }
  18.   </style>
  19.  `;
  20.  
  21. const circle = el.querySelector('circle');
  22. const path = el.querySelector('path');
  23. const length = path.getTotalLength();
  24. let pos = 0;
  25.  
  26. function loop() {
  27.   pos += 3;
  28.   if (pos > length) {
  29.     pos = 0;
  30.   }
  31.   const point = path.getPointAtLength(pos);
  32.   circle.cx.baseVal.value = point.x;
  33.   circle.cy.baseVal.value = point.y;
  34.   requestAnimationFrame(loop);
  35. }
  36. loop();

SVG has an easy way to animate something along an arbitrary path… getPointAtLength

Ellipse Path SVG

  1. const ellipse = (cx, cy, rx, ry) => { 
  2.   if (ry == null) ry = rx;
  3.   return `
  4.     M${cx-rx} ${cy}a${rx} ${ry} 
  5.     0 1 0 ${rx*2} 0a${rx},${ry} 
  6.     0 1 0 -${rx*2},0`
  7. }
  8.  
  9. const svg = `
  10. <svg style="overflow:hidden;stroke:black;fill:none">
  11.   <path d="${ellipse(80, 50, 30)}" />
  12.   <path d="${ellipse(80, 120, 60, 20)}" />
  13.   <path d="${ellipse(150, 60, 20, 40)}" />
  14. </svg>`
  15.  
  16. document.body.innerHTML = svg;

Draw an ellipse inside an svg path. I saw this method over on this stackoverflow thread at some point and tweaked it a little bit. Very nice simple solution from user yogi

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