use an array holding the radii of the circles. initialise them to 0, -10, -20, -30 etc (this delays the drawing of the later circles)

in draw() increment each item

if it's over the max size then reset it to 0

if it's above 0 draw the circle

the tricky parts are the spacing (the -10, -20... above) and the max size (should be sqrt(2) * size of square / 2 (ie half the diagonal))

thanks:

only starting with 1 and build up 1 by 1 till max is reached gives me problems but that doesn't really matter.

1. float[] radi;
   
   int count;
   int steps = 200; // amount of frames it takes
   
   void setup() { 
     size(512, 512); 
     smooth();   
   
     ellipseMode(CENTER); 
     noFill(); 
     stroke(255); 
     strokeWeight(20);   
   
     count = int((width/2) / 60); 
     println(count);
   
     radi = new float[count];
   
     // create the radi array
     for (int i = 0; i < count; i++) {
       float n = norm(i, 0, count);
       float r = map(n, 0, 1, 0, width*1.44); // radius   
       radi[i] = r;
     }
   }
   
   
   void draw() { 
     background(0);   
     translate(width/2, height/2);
   
     for (int i = 0; i < count; i++) {
       ellipse(0, 0, radi[i], radi[i]);
       radi[i] += (width*1.44)/steps;
      
       if ( radi[i] > width*1.44){
         radi[i] = 0; 
       }
     }
   
     //saveFrame("map_###.png");
   
   
     if ( frameCount == steps ) {
       println("done");
       //exit();
     }
   }
   
   

you're not doing the initialisation to -ve numbers for the 2nd, 3rd, 4th circles, that's the tricky bit, the bit that stops them appearing immediately (assuming you also add the bit about not drawing them if below 0 size). it's all in the original post!

-ve, short for negative, less than zero.