Can someone explain this code to me?

newcode123

This code was given to us in class as an example, but my prof has a rough accent and its hard to understand her. here is the code:

/* Colour Morph
   Example for COMP 1010

   Draw a bar across the centre of the window, with height
   BAR_HEIGHT, that consists of NUM_STEPS rectangles of
   equal width, with the left one having the colour set by
   INIT_RED, INIT_GREEN, INIT_BLUE, and the right one set by
   FINAL_RED, FINAL_GREEN, and FINAL_BLUE, and changing
   smoothly in between.
*/

size(700,200); //Make it wide but not too tall.

final int NUM_STEPS = 8; //The number of different coloured bars to use
final int BAR_HEIGHT = 150; //The height of the bar
final float BAR_WIDTH = (float)width/NUM_STEPS; //The width of each small slice
final float INIT_RED=156, INIT_GREEN=63, INIT_BLUE=178; //Initial colour
final float FINAL_RED=25, FINAL_GREEN=162, FINAL_BLUE=159; //Final colour

for(int i=0; i<NUM_STEPS; i++){
  //i will be 0,1,...,NUMSTEPS-1
  float position = i/(NUM_STEPS-1.0); //A value from 0.0 to 1.0
  float redValue = INIT_RED+(FINAL_RED-INIT_RED)*position;
  float greenValue = INIT_GREEN+(FINAL_GREEN-INIT_GREEN)*position;
  float blueValue = INIT_BLUE+(FINAL_BLUE-INIT_BLUE)*position;
  fill(redValue,greenValue,blueValue);
  stroke(redValue,greenValue,blueValue); //Make the outline match, too.
  rect(i*BAR_WIDTH,(height-BAR_HEIGHT)/2,BAR_WIDTH,BAR_HEIGHT);
}//for

In the loop, why do we use those operations? If I was asked to code this on an exam, how would I know to do that?? I dont get the logic behind it

TfGuy44

Forget about that code for now. Let's just say you want to draw a rectangle. Just one rectangle. What do you need to know about this rectangle in order to be able to draw it?

I can think of a few things. First, you need to know where the rectangle is going to be drawn. Then you need to know how big the rectangle is going to be. And you also need to know what color the rectangle is.

That's already like, seven variables! The x position, the y position, the width, the height, the amount of red, the amount of green, and the amount of blue.

So here is some code that draws a rectangle.

size(600,400);
background(0);
fill(200,100,50);
rect(30,80,90,180);

Notice that the color is sort of orange. This is because I set the fill color to 200 red, 10 green, and 50 blue. Notice that the rectangle is at (30,80), and is 90 wide and 180 high.

TfGuy44

Now that we have one rectangle done, let's draw many rectangles across the screen. How many rectangles should we drawn? Let's pick 8. Okay, so we want to draw 8 rectangles. How wide are they going to be? Well, each one needs to be 1/8 of the width of the sketch, so we know the width of each rectangle is width/8. We also want to draw them at different horizontal positions, so they are not all in the same place.

size(600, 400);
background(0);

fill(200, 100, 50);
rect(0*(width/8), 80, (width/8), 180);
rect(1*(width/8), 80, (width/8), 180);
rect(2*(width/8), 80, (width/8), 180);
rect(3*(width/8), 80, (width/8), 180);
rect(4*(width/8), 80, (width/8), 180);
rect(5*(width/8), 80, (width/8), 180);
rect(6*(width/8), 80, (width/8), 180);
rect(7*(width/8), 80, (width/8), 180);

Do you see a problem here? I do. This code is not DRY. DRY means Don't Repeat Yourself. If you see code that is doing the same thing over and over again, then realize immediately that there is a better way.

In this case, we can have a loop:

size(600, 400);
background(0);

fill(200, 100, 50);
for( int i = 0; i < 8; i++){
  rect(i*(width/8), 80, (width/8), 180);
}

Still with me? The loop runs 8 times, and thus is draws 8 rectangles.

In fact, we really should not hard-code the 8 in. We could use variable instead, one that is the number of rectangles:

size(600, 400);
background(0);

fill(200, 100, 50);
int count = 9;
for( int i = 0; i < count; i++){
  rect(i*(width/float(count)), 0, (width/float(count)), height);
}

Notice that I've also remove the division by 8 when it comes to widths now, as the width depends on how many rectangles there are. Instead, we're now dividing by the total number o rectangles, since each is 1/count the width of the sketch wide.

TfGuy44

If this code is starting to look similar to some example you already have, hopefully you can tell why. All that's really left to do is to make the colors go from one color to a different color.

So we should put in what the start and end colors are going to be.

int count = 9;
color start = color(200,100,50);
color end = color(0,255,0);

size(600, 400);
background(0);

fill(start);
for( int i = 0; i < count; i++){
  rect(i*(width/float(count)), 0, (width/float(count)), height);
}

So the next question is... How much do you need to change each rectangle's color to get from the start color to the end color in count number of steps?

TfGuy44

Well, you have the crazy detailed example of doing that already. Basically you compute what the total change for each of the red, green, and blue amounts needs to be, and then do 1/count of that change for each rectangle.

Personally, this is much cleaner:

float count = 9;
color start = color(200,100,50);
color end = color(0,255,0);

size(600, 400);
background(0);

for( int i = 0; i < count; i++){
  fill( lerpColor( start, end, i/(count-1) ) );
  rect(i*(width/count), 0, (width/count), height);
}

And probably easier to understand.

newcode123

Wow this is so thorough.. thank you so much, I completely get it.. I wish you were my prof instead haha