ofSetColor in loop

beginners
#1

Hi,

I have a really basic question about how ofSetColor() behaves in loops. For example I would like to draw a rectangle that changes color from white to black at each iteration of the the draw() loop. I tried this using the following code:

void draw() {
for (int color=0; color<=255; color++){
        ofSetColor(color);
        ofRect(0,0,100,100);
    } }

However I get a white rectangle and no transition at all. Seems like the rectangle is displayed at the last color the loop touches (i.e. if I change the loop to be from 0 to 100, the rectangle will have a gray color - 100 in intensity).
I know that there are other ways to do this - have a counter and increment it in the update() or draw() loop ( I’ve checked this and it works) - I am just curious why this method doesn’t work.

Thanks,
Andrei

#2

I’m also a newbie in OpenFrameWorks, but this code seems to be drawing 256 rectangles, each with one color and of the same size, at the same position, which is (0,0);

that means you’re having 256 rectangles overlapping each other, in this case, the last one is white in color, so you can only see what appears to be one rectangle.

#3

yes, think of draw as a loop itself, if you want the rectangle to change it’s color over time, draw it only once in each draw but with different colors each call

#4 
#include "ofApp.h"

int color = 0;

//--------------------------------------------------------------
void ofApp::update(){
     color +=25;
    if (color > 255) {
        color = 0;
    }
}

//--------------------------------------------------------------
void ofApp::draw(){
    ofSetColor(color);
    ofRect(0, 0, 100, 100);
    
}

This is a way to do it.
You can try “color +=25” in update to get a smoother transition, or change the frame rate with “ofSetFrameRate” to 10.

What happens in your code is that the program draws 255 rectangles, one over the other, before getting out of the loop. The result is that you only see the last rectangle drawn by the loop .

What your code says in English is:

1-Hey computer, increment the color value in 1.
2-Hey computer, draw a rectangle.
3-Hey computer, when you finish drawing 255 rectangles, show it to me :slight_smile:

Try this code to help you understand what is really happening inside your loop:

void ofApp::draw(){
       for (int color=0; color<=255; color+=15){
            ofSetColor(color);
            ofRect(color,0,100,100);
        }

If you want to do it with a “for” loop, you’d need two variables. One of them declared outside “draw”. This way, the computer gets out of the loop after drawing the first rectangle, then increments the “top” variable, and gets in the loop again do draw another rectangle, and so on…:

#include "ofApp.h"

int top = 0;

//--------------------------------------------------------------
void ofApp::draw(){
    
    for (int color = 0; color < top; color++) {
        ofSetColor(color);
        ofRect(0, 0, 20, 20);
    }
    
    top +=25;
    if (top > 255) {
        top = 0;
        
    }
}