Circulating Arcs

// 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);

}

​