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;
  }
}

9 Comments
»

  1. 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;

    Comment by Richard — August 20, 2009 @ 10:06 pm

  2. 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.

    Comment by admin — August 21, 2009 @ 7:34 pm

  3. 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…

    Comment by ww — October 2, 2009 @ 1:00 am

  4. 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;

    Comment by admin — October 6, 2009 @ 10:27 am

  5. 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.

    Comment by Dave — January 31, 2010 @ 11:07 am

  6. 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.

    Comment by Daniel Shiffman — January 31, 2010 @ 11:15 am

  7. 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++;
    }
    }

    Comment by Chris — February 24, 2010 @ 3:32 pm

  8. 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++;
  }
}

    Comment by Daniel Shiffman — February 26, 2010 @ 8:16 pm

  9. Makes perfect sense. Thanks for the correction! By the way, your book is just fantastic.

    Comment by Chris — February 26, 2010 @ 8:59 pm

Leave a comment