// same as yesterday but with canvas instead of svg
const canvas = document.createElement('canvas'),
      c = canvas.getContext('2d');
document.body.appendChild(canvas);
document.body.style.margin = 0;
 
let w = window.innerWidth,
    h = window.innerHeight,
    x = w / 2,
    y = h / 2,
    vx = vy = dx = dy = 0,
    damp = 0.99, div = 8, ticks = 0, 
    wobbleChance = 0.03,
    startTick = 50;
 
function loop() {
  w = window.innerWidth;
  h = window.innerHeight;
  radius = w * 0.05;
  diam = radius * 2;
  diam2x = diam * 2;
 
  if (x > w){
    vx *= -1;
    dx *= -1;
    x = w;
  } else if (x < 0){
    vx *= -1;
    dx *= -1;
    x = 0;
  }
 
  if (y > h) {
    vy *= -1;
    dy *= -1;
    y = h;
  } else if (y < 0) {
    vy *= -1;
    dy *= -1;
    y = 0
  } 
 
  if (
    Math.random() < wobbleChance || 
    ticks === startTick) {
      dx += Math.random() * 10 - 5;
      dy += Math.random() * 10 - 5;
  }
 
  dx *= damp;
  dy *= damp;
 
  vx += (dx - vx) / div;
  vy += (dy - vy) / div;
 
  x += vx;
  y += vy;
 
  // in most cases these days you
  // just clear the whole canvas, but for
  // this example we clear a rectangle around 
  // the circle 
  c.clearRect(
    x - diam, 
    y - diam, 
    diam2x, 
    diam2x
  );
 
  // draw the path
  c.fillStyle = 'red'
  c.beginPath();
  c.arc(x, y, radius, 0, Math.PI * 2, false);
  c.fill();
 
  ticks++;
  window.requestAnimationFrame(loop);
}
loop();
 
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.