let canvas, ctx, parts = [], w = 0, h = 0, last = 0, frames = 0;

onmessage = (e) => {
  const d = e.data;
  if (d.type === "init") {
    canvas = d.canvas; w = d.w; h = d.h;
    canvas.width = w; canvas.height = h;
    ctx = canvas.getContext("2d");
    spawn(d.count);
    last = performance.now();
    requestAnimationFrame(tick);
  }
  if (d.type === "count") spawn(d.count);
  if (d.type === "resize") { w = d.w; h = d.h; canvas.width = w; canvas.height = h; }
};

function spawn(n) {
  parts = [];
  for (let i = 0; i < n; i++) {
    parts.push({
      x: Math.random() * w, y: Math.random() * h,
      vx: (Math.random() - 0.5) * 4, vy: (Math.random() - 0.5) * 4,
      r: 1 + Math.random() * 2.5,
      hue: 150 + Math.random() * 40,
    });
  }
}

function tick(now) {
  ctx.fillStyle = "#0b1220";
  ctx.fillRect(0, 0, w, h);
  for (const p of parts) {
    p.x += p.vx; p.y += p.vy;
    if (p.x < 0 || p.x > w) p.vx *= -1;
    if (p.y < 0 || p.y > h) p.vy *= -1;
    ctx.fillStyle = "hsl(" + p.hue + " 80% 60%)";
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r, 0, 6.2832);
    ctx.fill();
  }
  frames++;
  const t = performance.now();
  if (t - last >= 500) {
    postMessage({ type: "fps", fps: Math.round((frames * 1000) / (t - last)) });
    frames = 0; last = t;
  }
  requestAnimationFrame(tick);
}

5 of 5 free copies left.