This video, I would like to talk about something
called a repeat loop.
This an essential, uh, control structure in programming
that you need to do all sorts of things.
If you've been working with code and drawing,
it's probably become recently, immediately clear what you
might need a repeat loop for.
And I have a demonstration of that right here.
So if you see this canvas here, there are 1, 2, 3, 4, 5, 6,
circles there.
Each circle is drawn with a single call
to the ellipse function.
And this works fine.
You want six circles on the screen,
call the ellipse function six times.
But if you want to have 60 circles on the screen,
or 600 circles on the screen, or space them closer,
or do more stuff with them, having an individual line
of code for the same thing that's
repeated over and over again is certainly not the route
that you want to go.
So this is exactly what a repeat loop is for.
And I said that a repeat loop is a control structure.
And in a previous video, I looked
at another control structure known
as a conditional statement.
So that control structure looked like this. Omg this is very litness and i have the very big dumb for not adding any updates in 2019
If Boolean expression open curly bracket close curly bracket,
and if this is true, this code is executed.
And I'm unna to add something once
and then we go to the next line of code.
This is how this particular control structure
worked, the if the conditional statement control structure.
So the control structure of a loop
is written just like the if statement
but with a different keyword besides if.
And now there's actually two ways of doing it.
The first way that I'm going to show you
looks very much like the if statement,
it's while Boolean expression.
While this is true, continue to do
this code over and over and over and over and over again.
So I want to think about this control structure.
And I'm going to add some things to the code.
And we're going to add this control structure then
into the code.
So these are really identical in their syntax and form.
The differences are, if here, while here.
If this is true, do this.
While this is true, continue to execute this code over and over
again.
Which opens up a little bit of a dangerous fact.
It's possible your program could get stuck inside this loop.
And this is something we're going
to have to deal with immediately right now as we start to work
on this problem some more.
So come on over here.
So let's look at this code again.
So one thing we notice about this code
is I didn't use any variables.
So I think it would be advantageous to use a variable.
And what I'm going to do is I'm going to start a variable.
And I'm going to call it x.
x equals 0.
Now I declared it up on the top.
In the previous videos that I've made in all the examples,
the variables have always been declared at the top.
This is because I've been using these variables
as so-called global variables, meaning I could just
use them anywhere in my code and the program
remembers them over and over again forever and ever.
Here is a case right now where actually what I want to do
is just use a variable just for this section of the code.
And I don't need to remember it any other time when
mouse is pressed or back and set up or anything like that.
So actually, I'm going to take this opportunity
to show you something called a local variable.
And if you declare a variable inside of a function,
I'm inside this draw function, this variable right
now is a local variable.
It's only available for the purposes of this draw function,
OK.
So now, what do I want to do?
I want to put x here.
And I could say x plus 50, x plus 100.
I could keep doing that, and we'd have the same program.
I just used x instead of 0.
But what I actually want to do is show you, what if I just
have x everywhere?
If I have x in all of these lines of code, now
what do I have?
I have one circle at 0.
Because I drew the same ellipse at 0, 0, 0, 0, 0, 0, 0, 0,
0, over and over again.
So what if I were to now add after each one, x equals
x plus 50?
So let's move x by 50 after each ellipse.
And I'm also going to do something,
I'm going to add some line breaks.
Whoops, wrong place.
I'm going to add some line breaks if I can manage this,
just to sort of look at it to see what is repeated, OK?
And let's add a line break here, OK.
OK, so let's look at this now.
I have these chunks, ellipse, then add 50.
Ellipse, then add 50.
All of these blocks of code are actually identical, right?
Like, let me delete them and just show you what I mean,
right?
So now let me run this program, one ellipse.
Now let me take these two lines of code
and just do paste, paste, paste, paste, paste, paste, paste,
paste, paste, auto format.
Now I have all these ellipse there.
So now we really have the same exact lines of code
x like just over and over and over again.
There's got to be a way to perform those lines of code
over and over again.
I just want to say ellipse at x et cetera.
And then I want to say x equals x plus 50.
This is exactly what I want to do.
I just want to do this over and over again
while something is true, OK?
So let's think about that.
We need to figure out, when do I stop
doing this over and over again.
If I just wrote true inside here,
this loop would execute forever.
And the program would never stop.
It would get stuck there.
We'd never see anything on the screen.
What is my exit condition?
Well, there is no answer to this question.
It's kind of up to you.
And why am I even here drawing circles on the screen,
I'll never know.
But presumably you have a reason for learning programming.
And you have an idea for something you want to make.
In this case, though, I can make up something.
I just want to keep drawing circles until I
get to the edge of the window.
So what is my exit condition?
My exit condition is, this is the canvas, the exit
condition I want to stop looping when x is greater than width,
right?
This is when I want to stop looping.
But remember, the thing that in here is when it's true,
that's not when I stop looping, that's when I continue looping.
So I want to continue looping as long as x is less than width.
So as long as x is less than width,
I want to draw this ellipse over and over and over again.
OK, so let's come over here and see that.
So now I can take all this nonsense
and just leave this important part.
These are the two lines of code that I
want to repeat over and over and over again.
While x is still on the screen, do this.
Draw a circle, move over.
So now I can add while x is less than width.
And then I need a close curly bracket.
And again, this is a new block of code.
This while loop is a new block of code.
It opens with a curly bracket.
It ends with a curly bracket.
And the convention is to indent the inside just visually
for a human being to be able to see it.
So now I'm going to run this.
And we can see, there are all the ellipses.
Now if you look at this, you can see it kind of-- the first one
start on the left.
One of them start at width.
That's simply because I have x is less than width.
I don't know if width is divisible by 50.
I think it is.
I could try less than equals.
And then I kind of get that last one.
So the math here matters, like where's
exactly your exit condition and that sort of thing.
But now you can see, I've drawn all these circles.
So this is a good, nice start.
However, somebody watching this video, somebody out there
in the world who may be watching this video
is going to say, why are you bothering with this while loop
thing?
Nobody ever uses the while loop.
Well, I personally felt like it was
worth five minutes of our time, your time, my time,
to look at the while loop.
Because it translates so nicely from this if
statement to while.
So what happened here, if this is true, do this one.
While it's true, do this one over and over again.
But if you'll notice, this particular while loop
has three elements to it that I want to note to you.
The first one is, we start with initializing a variable,
var x equals 0.
The second thing is we test for an exit condition.
x is less than or equal to width.
And the third thing I want to note
is that we have this incrementation operation.
x goes up by 50.
So those three elements are so common in loops
that there's an entire other looping structure, control
structure called a for loop that puts all those things together
as just 1, 2, 3.
So I want to redo this exact same program with a for loop
and show you what I mean.
So let me erase all this.
This will take me a second.
Think to yourself about something.
So I had three things.
I had an initialization, var x equals 0.
I have a Boolean test, is x less than width?
And then at the end of the loop, I had an incrementation
operation, x equals x plus 50.
So what I'm suggesting to you is this
is such a common kind of loop that the loop you will most
likely use in almost all of your programs,
and I would suggest you doing an exercise with, is a for loop.
For var x equals 0.
x is less than width.
x-- oh, I'm going to go off of the screen-- equals x plus 50.
Can you still see that parentheses, curly brackets?
OK.
So this is taking everything from this while loop
and condensing it.
So the loop starts by initializing x.
Every time through the loop, x goes up by 50.
And every time the loop finishes,
it checks if the exit condition has been met.
In which case, it then exits the loop.
So we can now go back to this program.
And what I'm actually going to do is I'm going to leave this,
I'm going to put this at all the circles at x equals 100.
And I'm going to rewrite this same loop down here
with a for loop.
So I don't need to paste it, actually.
I'm going to say for var x equals 0.
x is less width.
x equals x plus 50 curly bracket.
And let me widen the editor here so you can see the whole thing.
And then all I need is the one line of code, the thing that I
want to happen during this counting looping
operation, which is that I want to draw the ellipses.
I'm going to draw them at 300.
So let's make these some color.
And let's make these some other color.
And let's run it.
So we can see 0 and I. I guess I'll do the x less than
or equals for both of them.
And you can see now.
So you can see both loops perform exactly the same task.
This is a bit more explicit, because you
can kind of read the order more obviously,
start with x equals 0.
While is less than width, draw this circle and go up by 50.
But the exact same thing is happening here.
And it's so common that being able to condense this
into one line of code is something that you might do.
Now, inevitably, you're going to see other examples
around the internet.
And one thing that I think I should point out
is this kind of operation, x equals x plus 50
is also so common that programmers have developed
a shorthand for it, which I think
is worth noting right now, OK.
So there is, it's often you might see a line of code
like this.
X equals x plus 50.
This line of code can be written as shorthand,
as x plus equals 50, OK?
So that's one thing to notice.
You might see this in examples that you look at.
This is certainly more explicit and more long-winded.
But this is just as accurate as the exact same operation.
The other thing you might see is when you have the number one,
x equals x plus 1, this is written shorthand
as x plus plus.
And if you ever thought about it,
there's a programming language called C.
And there's a programming language called c++,
which is like the next version of C.
That's not exactly accurate but close enough.
But this is also such a convention
that it sort of made our way into kind of vernacular speak.
I don't know whose vernacular speak.
I don't even know what vernacular means.
I really should have stopped this video a while ago.
So this is just a little tidbit.
You might see that if I were to add that to this example,
I would change this to x plus equals 50.
And then I would run it again.
And we have still the same exact result.
So what I would say to you is, try
to think, try lines, try rectangles,
try to control your loops.
What if you have things moving down or diagonally?
Or what if, could you change the color.
Like, how would you have each one of these shapes
be a different color from bright to dark from dark to bright.
The map function that I looked at in a previous video
could be relevant.
So try using a repeat loop to create some pattern
of repeating shapes.
And the two other videos I would like to make, one is I
would like to look at a nested loop
to a loop within a loop to draw a grid pattern.
And also, I think I want to talk about an array which
is a list of variables, which goes hand-in-hand with loops.
I need to make that video at some point too.
Thanks, and this is the end of this one.