Phyllo Animate

  int nbr_circles = 333;
  float deviation = 5/8.0;
  
  float phi = (sqrt(5)+1)/2 - 1;            // golden ratio
  float golden_angle = phi * TWO_PI;        // golden angle
  
  void setup()
  {
    size(400,400);
    smooth();
    colorMode(HSB, 1);
    frameRate(12);
  }
  
  void draw()
  {
    background(0,0,1);
  
    fill(0);
    noStroke();
    
    float lg_rad = width * .45;
    float lg_area = sq(lg_rad) * PI;
    
    float mean_area = lg_area / nbr_circles;
    
    float min_area = mean_area * (1-deviation);
    float max_area = mean_area * (1+deviation);
    
    float cum_area = 0;
    
    float fudge = .87;
    
    float cx = width/2;
    float cy = height/2;
  
    float hue_incr = frameCount * .0002 + .1;
    float angle_offset = frameCount * .01;
    
    for (int i = 1; i <= nbr_circles; ++i) {
  
      float angle = i*golden_angle + angle_offset;
    
      float ratio = i / (float) nbr_circles;
      float sm_area = min_area + ratio * (max_area - min_area);
  
  
      float sm_dia = 2 * sqrt( sm_area / PI );
      float adj_sm_dia = sm_dia * fudge;
    
      cum_area += sm_area;
    
      float spiral_rad = sqrt( cum_area / PI );
    
      float x = cx + cos(angle) * spiral_rad;
      float y = cy + sin(angle) * spiral_rad;
  
      float hue = hue_incr*i;
      hue -= Math.floor(hue);
      fill(hue, .8, 1);
      
      ellipse(x, y, adj_sm_dia, adj_sm_dia);
    }
  }
  // END
  
  

Notes:

To animate the colors, for each dot, I create a fill color using a variable called 'hue' which cycles through the colors. The colors are highly saturated, and bright. For this to work, you need to have the line colorMode(HSB,1) in your setup function. It means I'm using the HSB color space with each color component going from 0 to 1.

    fill(hue, .8, 1);

I want each dot to have a different hue, so assuming there is an existing variable called hue_incr, I create a hue value for each dot, based on it's index i. This is the same method I used to wind the spiral earlier, and the effect will ultimately resemble that effect. Because each dot cycles at an increasing rate, you got spiraling color effects.

    float hue = hue_incr*i;
    fill(hue, .8, 1);

I want the hue to cycle back to zero when it hits 1. I accomplish this by subracting the part that is over 1, leaving just the stuff after the decimal (if I had wanted the color to go back and forth, instead of cycling around, I would have used sin() instead).

    float hue = hue_incr*i;  // initial hue value
    hue -= Math.floor(hue);  // just the part after the decimal
    fill(hue, .8, 1);        // set the fill color

Finally, I need to set a continuously rising value for hue_incr. This is done outside the loop, since it is not dependent on i.

    float hue_incr = frameCount * .0002 + .1;

I use a fraction of the frameCount by multipling it by a small value (frameCount/5000.0 would have also worked, but I prefer to use multiplcation when setting speeds - this way larger numbers go faster). The fraction I used, .0002 was arrived experimentally by trying different values until I found a cycling speed I liked. After setting the speed, I add .1 so that the very first frame already has a spiral in it, otherwise, the first frame is mostly solid.