{
const ctx = DOM.context2d(WIDTH, HEIGHT);
let frame;
let circles = (x, y, r, t, clr) => {
return { x: x, y: y, r: r, t: t, clr: clr };
};
let cir = [];
let t = Math.random() < 0.5 ? 1 : 2;
for (let i = 0; i < NUM; i++) {
t = Math.random() < 0.5 ? 1 : 2;
cir[i] = circles(
Math.random() * WIDTH,
Math.random() * HEIGHT,
1 + 10 * Math.random(),
t,
get_color()
);
}
let draw = () => {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
for (let i = 0; i < cir.length; i++) {
circle(
ctx,
cir[i].x,
cir[i].y,
cir[i].r,
cir[i].r,
Math.PI / 2,
0,
2 * Math.PI,
cir[i].t,
cir[i].clr
);
}
};
let update = () => {
for (let i = 0; i < cir.length; i++) {
cir[i].x += Math.sin(Date.now() * Math.random());
cir[i].y += Math.sin(Date.now() * Math.random());
}
};
(function tick() {
if (on_off_b) {
draw();
update();
frame = requestAnimationFrame(tick);
} else {
draw();
}
})();
invalidation.then(() => cancelAnimationFrame(frame));
return ctx.canvas;
}