How to made an object appear after a delay in p5.js


#1

I intend to draw dilating circles. First a small circle appears on the center of the screen then radius increases and the circle enlarges, 2 seconds later another circle appears and also enlarges. At the same time there could be multiple concentric circles, looping infinitely.

This is the current code, but I have problems in making the 2nd circle appear 2sec after 1st circle, and 3rd circle 2sec after 2nd circle etc.

let w=500,h=500;
function setup() {
    createCanvas(w, h);
    background(255);
}


function draw() {
    r=10;
    ellipse(w/2,h/2, r*frameCount/2, r*frameCount/2);
    //2 seconds later, this new circle appear
    ellipse(w/2,h/2, r*frameCount/2, r*frameCount/2);
}

#2

you need a timer!
https://editor.p5js.org/kll/sketches/87OpPvDWe