Learning Processing: Chapter 6: Loops: Exercise 6-5: One line at a time

It is possible to achieve the effect of rendering one line at a time using a for loop. See if you can figure out how this is done. Part of the code is below.

int endY;  

void setup()  {
  size(200,200);
  frameRate(5);
  endY = ________;
}

void draw()  {
  background(0);
  for (int y = ________; ________; ________)  {
    stroke(255);
    line(0,y,width,y);
  }
  ________;
}

Example

exercise_6_5

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Exercise 6-5: It is possible to achieve the effect of rendering one line at a time using a for loop. 
// See if you can figure out how this is done. Part of the code is below.

// A variable that controls how much of the loop we do
int endY;

void setup() {
  size(200,200);
  frameRate(5);
  endY = 0;
}

void draw() {
  background(255);
  // y goes from 0 to whatever endY is
  for (int y = 0; y < endY; y+=10) {
    stroke(0);
    line(0,y,width,y);
  }

  // Increment endY
  endY += 10;

  // reset endY back to 0 if it gets to the end
  if (endY > height) {
    endY = 0;
  }
}

Comments (12)

Richard

I don’t understand the purpose of (endY = 0;) being called out in setup(). When I remove it, the program works just fine. If (endY = 0;) must be initialized, why not call it out as such in the declaration at the top? For example.

int endY = 0;
admin

Yes, that would be a totally appropriate alternative. There’s no specific reason why it needs to be initialized in setup(), just the way this example happened to be written.
http://www.ccttours.com/blog ww

I rewrote the code to draw lines down to up, it worked. But now I’m confused what should I do if i want to draw lines up to down to up to down…
admin
You’ll need to use a variable to increment / decrement endY, i.e.
```
  // Increment endY
  endY += dir;
```
Then you could change the direction of dir depending on certain conditions (like it reaching the bottom or top of the window)
```
dir *= -1;
```
Dave

wow, this is one hard piece of code for me to understand.
Like Richard said, endY=0 is not neccessary to be called. How then does Processing know the value of endY in the beginning in order to + 10 every draw? I hope you get my question.
http://www.learningprocessing.com Daniel Shiffman

We are choosing to set the initial value of endY to 0. If we did not initialize endY, Processing would give it a default value. It just so happens that the default value is also 0 so either way we get the same result. Still, it’s a good habit to initialize your variables.
http://christoddmedia.net Chris

I’m not sure if this is the perfect place to post this question, but one of my students ran into this seemingly glitchy problem. Can you explain why ‘y’ continues to increment in the for loop and not in the while loop?

int y = 80;
int x = 20;
int spacing = 10;
int len = 20;

void setup() {
size(200,200);
background(255);
}

void draw() {
while (x<200){
stroke(255,0, 0);
line(x, y, x, y+len);
x+=15;
y++;
}
for (int i=50; i<=150; i+=spacing) {
stroke(0);
line(i,y,i,y+len);
y++;
}
}
http://www.learningprocessing.com Daniel Shiffman
The difference in the above is that i (which loops from 50 to 150) is a local variable and x (which loops from 0 to 200) is a global variable. Meaning once x gets above 200, it stays above 200 because it is never reset to 0. The following will make it a more analogous situation:
```
int y = 80;
int spacing = 10;
int len = 20;

void setup() {
  size(200,200);
  background(255);
}

void draw() {
  int x = 20;
  while (x<200){
    stroke(255,0, 0);
    line(x, y, x, y+len);
    x+=15;
    y++;
  }

  for (int i=50; i< =150; i+=spacing) {
    stroke(0);
    line(i,y,i,y+len);
    y++;
  }
}
```
http://christoddmedia.net Chris

Makes perfect sense. Thanks for the correction! By the way, your book is just fantastic.
http://www.myspace/carloslopezcharles Carlos Lopez

I don’t understand why this piece of code works if “y” does not meet the condition of being less than “endY”. Both “y” and “endY” are 0. Shouldn’t that make the “for” loop exit straight away?

// y goes from 0 to whatever endY is
for (int y = 0; y < endY; y+=10) {
http://www.myspace/carloslopezcharles Carlos Lopez

I’ve got the answer! “y” does not meet the condition and 10 is added to “endY”, so the loop over and over… Thank you!

void draw (){
background (255);
for (int y = 0; y< endY; y+= 10) {
stroke (0);
line (0, y, width, y)
}
endY += 10;
Ken Sherwood

Found this initially confusing, until worked through to realize that instead of adding a line each pass through the “for” loop it is actually drawing: line1, then line1 + line2, then line1 + line2 + line3, etc. Here is a variation that helps to visualize this, by changing the colors each time through the for loop:

int endY = 0;
float colorR = 0;
float colorB = 0;
float colorG = 0;

void setup() {
size(200,200);
frameRate(1);

}

void draw() {
background(255);
colorR = random(255); // Introduced to change line color each time through draw
colorB = random(255); //
colorG = random(255); //

// y goes from 0 to whatever endY is
for (int y = 0; y height) {
endY = 0;
}