xxxxxxxxxx
// P5.js's arc() is far too slow for this, because it automatically closes the path after each drawing,
// while true JS's arc function can draw the connection between subsequential drawn arcs.
let start_angle = 0;
let speed = 0;
function setup() {
canvas = createCanvas(800, 800);
context = canvas.drawingContext;
requestAnimationFrame(frame);
}
function frame() {
context.clearRect(0, 0, width, height);
context.beginPath();
for (let end_angle = 0; end_angle <= width; end_angle++)
start_angle = end_angle / (0.2 + speed / 3e4),
context.arc(400, 400, 250, start_angle, end_angle),
context.lineWidth = 0.2;
context.stroke(),
speed += 0.01,
requestAnimationFrame(frame);
}