FSEM 131 Lab 3

Repetition and gradients

---

To review the lecture material download the posted code zips and the references pages on while loop and color mode setup.

---

1. [4 pts] Consider the following program that uses a while loop. Before running the program

1. trace the loop execution,
2. draw on a paper the coordinates that define each roof drawn and
3. determine how many roofs are drawn.

size(600,200);
background(240, 220, 120);

fill(220, 30, 30);
noStroke();

int roofHeight = 50;
int roofBaseY = 80;
int startX = 40;
int houseX = startX;
int houseSize = 100;
int houseDistance = houseSize + startX;

while (houseX+houseSize < width) {
   triangle(houseX, roofBaseY, 
            houseX+houseSize/2, roofBaseY-roofHeight, 
            houseX+houseSize, roofBaseY);
   houseX = houseX + houseDistance;
}
// reset the value of houseX
// houseX =

boolean boring = true;         
         
if (boring) {         
   fill(130, 130, 220);
} else
   fill(random(128, 255), random(128, 255), random(128, 255));
   
rect(houseX, roofBaseY, houseSize, houseSize);

Now paste the code in a file roofRow.pde and do the following.

• Run the program and check if the loop output corresponds to your prediction.
• The resulting image does not contain the rectangle drawn by the last line of code.
  Uncomment and complete the line that is used to assign a value to houseX. The goal is to make visible the rectangle for the front of the first house.
• Change the boolean value of the variable boring to execute a different branch of the if structure. Run the program many times: does the output make sense?
• Add a while loop around the last line of the program to produce an image similar to the following one.

  

• Change the code to use only one while loop since the two sequential loops can be collapsed together. Submit this code version.

2. [2 pts] Consider the following code that creates a rainbow gradient as shown below.

It is similar to our class experiment, but more direct. Write it down in your notebook.

Write a program ellipseRainbow.pde that creates an output similar to the image below.

• The application window is 260 X 260 pixels.
• The background is white.
• The rainbow is centered in the window.
• Its radius is 255 pixels.

3. [4 pts] Write a program to create a gradient similar to the one shown in the following image.

Once you have successfully made a monochrome gradient change the gradient to color (red or blue or green for example).