1. int rate = 12;
2. float a = 0;
   float aMax = 360;
   float aIncrement = aMax / rate;
3. 
   void setup()
   {
     size (1200, 600);
     noStroke();
     frameRate(rate);
     smooth();
     colorMode(HSB);
   }
4. void draw()
   {
     fill (180, a, aMax);
     rect (0, 0, 200, 600);
5.   a = a + aIncrement; // or a += aIncrement;
6.   if(a >= aMax)
     {
       a = 0;
     }
   }

It would be simpler and more reliable to use the millis() method to get the absolute time. This will allow you to do things based on time rather than number of frames displayed. So for your bar example, you could do this:

void setup() {
  size (1200,600);
  noStroke();
  smooth();
  colorMode(HSB);
}

void draw(){ 
  float sat = map(millis()%1000,0,1000,0,255);
  fill (180,sat,360);
  rect (0,0,200,600);
}

If you wish to change the timing from cycling every second, change both values of 1000 to some other value in milliseconds (e.g. to cycle every 2 seconds, you would substitute with 2000).

Yes. Pretty much as I described above, but with a separate saturation values for each rectangle:

void setup() {
  size (1200,600);
  noStroke();
  smooth();
  colorMode(HSB);
}

void draw(){ 
  float sat1 = map(millis()%1000,0,1000,0,255);
  float sat2 = map(millis()%2000,0,2000,0,255);
  
  fill (180,sat1,360);
  rect (0,0,200,600);
  
  fill (0,sat2,360);
  rect (200,0,200,600);
}