6.5: Loop vs. Draw – Processing Tutorial

6.5: Loop vs. Draw – Processing Tutorial


Okay, this video is entitled loop within a loop but it is not the video you think it is. It is not the next one which is about nested loops which is also about a loop within a loop. This is about a different kind of loop within a loop, which is something very specific to Processing and animation programs which I just feel is important to mention because it is a source of confusion when you’re first beginning to program animations and repeat things in your code. I hit the microphone, so you might have heard a loud noise. We’re gonna use a different audio source of my finger just went by there. So who knows. Anyway I could just start over, but I can’t I just have to keep going. Okay… So here’s the thing what do I mean by loop within a loop in this video? Which is not about nested loops. I mean this: Remember a while back in a video about flow… We talked about setup() at the beginning of your program draw() about the thing that loops forever. Well, this is a loop: This loops over and over again, and we just said okay, we could write loops inside of draw(). Like… while x is less than width float x equals 0 and x equals x plus 20 and draw some sort of line blah blah blah that’s essentially what is happening over here in this program if I run it we can see we have this loop that says draw a line repeat that a certain number of times across the screen until you get to the width spaced out by 20. So what I mean, this may be obvious to you, and if it’s obvious to you then awesome. You could just stop now but What’s going on? This is a loop and this is a loop. The reason why this gets confusing is You might have an instinct to use a loop to animate something… for example… What if I want to show one line at a time? First draw the line at zero then go up by 20 and then draw the line again then go up by 20 and then draw The line and go up by 20. This is not the loop to do that. This is for doing something multiple times within one animation cycle. This outer loop the main draw loop. That’s the things they draw at first then go up by 20 then draw it again. So what I’m asking you as an exercise and you could pause right now and try to figure this out, is let’s look at this output. What if we want to see one line appear at a time? Right now when I run this program and run it again. We just see… boom, all lines at once. I want to see one line at a time. Well, we still could use this loop within a loop, but we need to vary something about it. So I’m gonna go no further I’m gonna go further, but I’m gonna first say you know take a moment to meditate you can pause the video And you’re back, so maybe you tried it. Maybe you succeeded. Maybe you failed. Let’s take a look at how this is done. So… If we want to animate something your instinct might be well this animates it and what if I just kind of like? Slow it down. Like I could say like there’s even this function in Processing called delay. I can’t believe I even mentioned there’s a function called delay. Never use delay. But you could say delay like by a thousand milliseconds. Which is like one second. I should see them one at a time Come on. All it’s doing is it’s delaying each time for the loop. We’re not gonna see the result until we get through the end of draw(). So this is not for doing an animation. Draw is for doing an animation But let’s look at something interesting. It’s not even getting anywhere because that’s a lot of lines at a thousand seconds per line, a thousand milliseconds maybe.. is a while anyway. Let’s get rid of that. That’s awful okay. What if… let me run this. I have lines all the way across the screen. What if I say x the x condition for loop is when x is less than width divided by 2? Halfway across the screen. If I say x is less than…. you know 50. I get like two three lines two or three lines. Whatever that is over here. Okay, so what’s going on if I just change this value… I get a different number of lines. What should that tell you? That should tell you that… “why don’t I turn that into a variable”, for example. What if I said mouseX… Oh, I have to move the mouse. Now I have the number of lines that loop is each time through draw the loop is happening but it’s happening sometimes a few times sometimes many times the point is the outer loop is what’s changing it because it’s drawing that loop a certain number of times…. a different over times each time we go through draw(). This is not animating this is doing all at once and showing ut the result when we get to the end. So where can I start I could add a variable I could call it endX. And I could say endX equals width, or equals zero and I could put while x is less than endX now… Here we go. What if I say, okay… I get because endX is zero What if I say endX is 100? Now we have this many lines. What if I say endX is… 200 now we have this many lines. You should give you a clue, then I don’t need to keep typing in a new value I could just say hey endX equals endX plus 1 and now when I run this We see, you know, what is the value of endX? It’s going up and up every frame so it’s giving us the appearance of that loop doing it one at a time But actually we’re doing the loop each time We’re just doing some of the loop then more of the loop then more of the loop then more of the loop. We’re actually doing the whole loop each time… But the whole loop is a smaller portion and a larger portion then a larger portion of the whole window. So this is an important concept which is…Ah, I hit the microphone again… Ok we have alternate audio sources or hopefully it won’t be so horribly loud But this is an important concept to realize that This loop is always executed in its entirety and the result is shown at the end of draw so don’t get confused The the main draw() loop is for the purpose of animation. We want to vary each time through that main draw() loop. The loop inside of draw() is for repeating an element multiple times in one frame of animation. Ok hopefully that makes sense. This was a little bit… You know it’s sort of it feels like I I feel like I understand it I feel like I don’t know if I communicated that so well But I could always remake this video, and you will send me comments by filling out the form below on your screen or dialling 1-800 ask me to tell me my video should be better… This is the end. This was about 6 minutes which I think is pretty good. OK and goodbye.

31 Comments

  • beca Cruz says:

    Very cleared! Awesome video.

  • Sir. Boaz Mutatay says:

    In Brief, There is a difference between animating and repeating. Thank You Sir

  • Brett L says:

    My approach to animating the lines was using an if conditional inside of the draw() loop. I guess that effectively turns the draw loop into a while loop, because it only draws that part when that condition is true. Nice clarification of a confusing topic.

  • Alonso Sandoval Gomez says:

    Hey Dan, great lecture but I'm a bit stuck. I'm attempting to bring Euclid's Elements to life in processing and this seems like this is the appropriate lecture to learn how to animate a line being drawn or even an arc.

    However my reasoning isn't bearing any fruit. I'm in a size(800,600) I have an x, y, and an endX. I've initialised x = 300, y = 350 and endX = 0. I'm saying if x < endX then draw a line (x, y, endX ,y) } endX = endX + 1. I realised this wouldn't work because the statement is never met so on my next attempt I initialised endX at 301 and still nada.

    If you could help me it would be much appreciated, cheers Dan. Oh btw almost everyone in my Creative Technologies degree in New Zealand watches your vids and we think you're cool

  • Leonardo Lajanz says:

    Hey, Daniel… But, as the x is increasing and the check is made at each "turn", how is it possible, that the "thing" (or, x) is being less than the "endX", which is only increasing by 1? This is something very confusing; no doubt. I say that, because, even if we do not reset the x [inside of draw()] the result is still the same. -.-

  • MrDonald911 says:

    How can we simulate Draw() with other languages like C or Java ? Obviously, while and for loops are much faster, so what would be the delay ? Thanks

  • SilenceOfThought says:

    you can simply delete "while" function for this to work

  • login211 says:

    Useful stuff. Thanks!

  • TheTechSpace says:

    Using a For Loop Solution:
    float x,x1,y1,y2;
    void setup(){
    size(600,400);
    }
    void draw(){
    background(#ffffff);
    for(int x=0;x<width;x=x+20){
    stroke(#ff0000);
    fill(#000000);
    line(x,0,x,600);
    }
    }

  • Khaled Zarif says:

    Hi Daniel,

    I just need to clarify few things with myself if you could help me.

    When the program is executed the setup() function is executed first, then the draw() function and thencit goes through the while() loop which increments by 1 and then goes back to draw() function runs the code in draw() and then goes back into the while() loop and vice versa until the condition is false then goes onto the next following codes, if there are any existing codes. Essentially, is that how the logic of loop vs draw() works?

  • Miklo says:

    HI Daniel, I have an issue with this excercise. I wanted to run the loop as you did but manually by mousePressed.
    However, this is showing up all of the lines, with just ONE mousePressed. I want to show up each line for each mouse press. What am I doing wrong??? Thanks a lot !!

    float endX =0;

    void setup() {
    size(400, 400);
    background(51);
    }
    void draw() {
    stroke(255);
    strokeWeight(2);
    int x = 0;
    for (x=0; x<endX; x=x+width/10) {

    if (mousePressed) {
    line (x, 0, x, height);

    }
    }
    endX = endX+width/10;
    }

  • Ghenady Kuznetsov says:

    the draw() function is invoked by a timer

  • vignesh padmanabhan says:

    how about we use frameRate(); ?

  • spezi1337 says:

    i would have just used a for-loop, so the amount of lines that will be drawn each loop increments every time

  • Tekin Çağın Uyan says:

    cool video

  • ryanshaver says:

    Thanks Dan for all the videos, extremely helpful for getting started.

    I have a query for anyone willing; I've been able to populate the lines up to the widths end…but I'm having trouble figuring out how to make them go back.

    https://www.openprocessing.org/sketch/431119

    Here is the code I have thus far. I've finally got it stuck going back down between 640 and 620…not sure how to proceed.

  • Frederico Vidovix says:

    your videos are so grat man, i cant even say how much it helps me. But how i make the lines desapeare when it gets on the edge?

  • ammar shahin says:

    I have been debugging a program for two days with and couldn't find what's wrong until I watched that video
    no thanks in the world can be enough xD

  • Sergio Corrente says:

    I love the way you teach.

  • Kuca says:

    wooow thanks so much for this video

  • Sylvia Green says:

    Thank you for this video, it was amazing! I was inspired by your coding challenges to start playing with Processing and animations, but I failed at the beginning because I wasn't used to animation and draw loops – I started programming with C++ in the field of data science – and I made exactly this error: I confused the while loop with the draw loop. I decided to watch your Processing tutorials to understand better what you have made in your coding challenges, and I'm learning a lot! Thank you!

  • Shivank Batra says:

    plz tell where i can contact u?i have a big confusion in dis topic!!

  • Dan Casey says:

    If you would be so kind as to explain one thing… What determines the speed at which the lines are drawn? What I am having difficulty understanding specifically is how the lines were drawn slowly without a time sensitive execution rather than at say the MHz range that the computer is capable of. Thank you, and BTW love your videos as well as teaching style!

  • Hol' Up says:

    How can I use the line
    " endX = endX + 10; "
    in a for loop?

    I just can't seem to figure it out.

  • Cibi says:

    How to print only one line a moment..i.e. there should be only one line moving and the line before that should be gone like that

  • KittyCat Gamer123 says:

    Loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop within a loop…

  • THe LaNd says:

    Thank you so much Daniel,
    you are my true hero

  • David Baruka says:

    void drow() does not work in my program I don't konw how to do maybe you can tell me the problem

  • Jacques de Villiers says:

    The way you bring it a cross is amazing. I have battled with some of these concepts for a very long time and you brought it home for me. Please don't change a thing.

  • Noob Penguin says:

    Hello there .. one small question :$ : why put endX=endX+1 outside draw block?

  • Tinku moni Kalita says:

    I think what happens in the background is this
    class ClassName{
    public static void main(String [] args){
    setup();
    while(true){
    draw()
    }
    }
    }
    This is because Processing is built on top of java, so there should be some background code calling these two functions. (Maybe something slightly different happens in actual scenario)

    So the major difference between while loop and draw() is that draw is a function which is called over and over, and so is behaving like a loop. If you include a loop inside draw(), then for each function call the loop gets executed.

Leave a Reply

Your email address will not be published. Required fields are marked *