here

1. int i=0;
2. //
3. void setup() {
4.   size(480, 480);
5. }
6. 
   
7. void draw() {
8.   fill(i, 0, 0);
9.   rect(240, 240, 50, 50);
10.   i++;
11. }

Explanation:
draw() does not draw throughout but only once at the end of draw (accumulating all that happened till then). Only at the end of draw() the screen gets updated once.
Thus only the last image of the for-loop is shown.
Solution:
Remember that draw() in itself already is a loop: it gets run again and again.
You can use this behaviour and just increase the value for red every time.

Thanks!

it just says:
this is a constant value and will never get changed.

Makes the reading easier since you know, ok, this is fixed.

Whereas timeSinceLastIncrease is always getting bigger
timeBetween stays the same, just the time to pass between two
increasings of red.

Greetings, Chrisir   

ok, this starts all over again when max red is reached

1. // the red-value:
2. int i=0;
3. // our timer:
4. int timeSinceLastIncrease;
5. // how much time goes by till he increases the color again? Measured in millis:
6. final float timeBetween = 20;
7. //
8. void setup() {
9.   size(480, 480);
10.   timeSinceLastIncrease=millis();
11. } // func
12. void draw() {
13.   fill(i, 0, 0);
14.   rect(240, 240, 50, 50);
15.   if (timeSinceLastIncrease+timeBetween <= millis()) {
16.     i++;
17.     if (i>255) {
18.       i=0;
19.     } // if
    
20.     timeSinceLastIncrease=millis();
21.   } // if
22. } // func

or just use the mouse (left-right pos)

1.   i = int (map (mouseX, 0, width, 0, 255));

maybe later you want to give i a better name such as valueForRed or so.

More compact version:  

if (++i > 255)   i = 0;

Or these cryptic ones:  

i = (i+1) % 0x100;  // hex

i = (i+1) % 0400;   //  octal