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

Wobbling Ball with SVG

  1. const el = document.body.appendChild(
  2.   document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg width="100%" height="100%">
  6.     <circle 
  7.      id="circ" 
  8.      cx="0" cy="0" r="50"
  9.      fill="red" style="will-change: transform;"/>
  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. let w = window.innerWidth,
  22.     h = window.innerHeight,
  23.     x = w / 2,
  24.     y = h / 2,
  25.     vx = vy = dx = dy = 0,
  26.     damp = 0.99, div = 8, ticks = 0, 
  27.     wobbleChance = 0.03,
  28.     startTick = 50;
  29.  
  30. function loop() {
  31.   w = window.innerWidth;
  32.   h = window.innerHeight;
  33.  
  34.   if (x > w){
  35.     vx *= -1;
  36.     dx *= -1;
  37.     x = w;
  38.   } else if (x < 0){
  39.     vx *= -1;
  40.     dx *= -1;
  41.     x = 0;
  42.   }
  43.  
  44.   if (y > h) {
  45.     vy *= -1;
  46.     dy *= -1;
  47.     y = h;
  48.   } else if (y < 0) {
  49.     vy *= -1;
  50.     dy *= -1;
  51.     y = 0
  52.   } 
  53.  
  54.   if (
  55.     Math.random() < wobbleChance || 
  56.     ticks === startTick) {
  57.       dx += Math.random() * 10 - 5;
  58.       dy += Math.random() * 10 - 5;
  59.   }
  60.  
  61.   dx *= damp;
  62.   dy *= damp;
  63.  
  64.   vx += (dx - vx) / div;
  65.   vy += (dy - vy) / div;
  66.  
  67.   x += vx;
  68.   y += vy;
  69.  
  70.   circ.setAttribute('transform', `translate(${x} ${y})`);
  71.  
  72.   ticks++;
  73.   window.requestAnimationFrame(loop);
  74. }
  75. loop();
  76.  
  77. function resize() {
  78.   const radius = Math.min(w, h) * .05;
  79.  
  80.   // `window.circ` is the global id (⌐■_■)
  81.   circ.r.baseVal.value = radius;
  82. }
  83. resize();
  84. window.addEventListener('resize', resize);

A wobbling ball with svg.

// animation // graphics // javascript // math // random // svg

Recent

Archive

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