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.