html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #292a33;
  overflow: hidden;
}

const r = 20;
let x, y, angle, hist;

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(240);
  noFill();

  hist = [];

  x = 0;
  y = height / 2;
  angle = 0;
}

function draw() {
  clear();
  circle(x, y, r * 2);

  const tx = x + cos(angle) * r;
  const ty = y + sin(angle) * r;

  if (x < width + r) {
    hist.push({ x: tx, y: ty });
  }

  let prev = hist[0];
  for (let i = 1; i < hist.length; i++) {
    const cur = hist[i];
    line(prev.x, prev.y, cur.x, cur.y);
    prev = cur;
  }

  x++;
  angle += 0.1;
}