I walked into this.
You know what?
I'm going to leave this in the video
because this really happened, and it's there.
So the previous video I made, I just looked at really, really
the basics of the control structure of the loop--
a while loop, a for loop.
For looping, this sort of primary looping
structure that I'm going to use for the rest of examples.
And all I did was something very basic--
use it to draw a repeating shape.
And now it's up to you to figure out
what kinds of creative things you can try to experiment with
to create different new kinds of patterns
that you haven't explored before.
But I think there are two key elements that I would like
to discuss that I think will fill in a couple
gaps in your knowledge here that will help
you do more stuff with loops.
So the first thing that I want to mention
is I started talking about loops as if this is this new thing,
but there actually is this draw function.
And the one of the very first things
I looked at in an earlier video is this draw function
is looping.
And every time we get to the end of the draw function,
the screen is updated.
Then the draw function repeats.
Stuff is drawn again.
Screen is updated.
So sometimes it gets a little bit confusing here.
If you have this loop, like there's this for loop
that I just created in the previous example, which
is inside the draw loop.
This all comes back together because this video
is all about nested loops because this is really
a nested loop.
Draw's looping.
The for loop is looping.
But the goal of this loop was to do what?
It was to draw multiple shapes, repeat the same ellipse
function over and over and over again.
However, if you're thinking about this kind of in almost
too much detail, you might have noticed
while this loop is going, it's not
like you see like the first ellipse.
Then you see the second one.
Then you see the third one.
Then you see the fourth one.
You just see them all.
You might also think to yourself,
OK, well, it's drawing the one at a time,
but it happened so fast.
It looks like it's just all of it.
So I would like to remind you that neither of those things
is the case.
In fact, the window, the canvas is not updated
until the end of draw is reached.
So the purpose of a for loop inside the draw loop
is not to animate something but rather
to draw a whole bunch of things for each cycle of the draw
loop.
If you want to animate things, you
would have to do something slightly different.
So let's take a look in this particular example.
So I'm going to draw these back in the middle-- these circles.
So the circles are just there.
I'm seeing all of them.
Nothing is changing.
I could do a couple of things.
One, I could add random for the blue value of the color.
Can you see that?
Whoa, yeah, that's really like the worst--
let me make this random too because you can barely
see that.
Now you can see that more.
So you can see that draw is looping over and over again,
and the only thing that's changing
is that the color is changing.
The location of these ellipses from that loop
are staying the same.
I could do something kind of strange,
and I could say let me add a variable like offset.
And I could say draw every ellipse
at the x. x is part of this loop.
Oh my goodness, I'm flickering like crazy.
This camera is having problems, but hopefully, you're
going to be able to get through this video, anyway.
X the same every time through.
X is the same every time through draw
because x is making me crazy governing
the location of those circles.
But if I were to say offset equals offset plus one,
now you can see I'm offsetting the location of all of those
by some amount.
These are kind of like a few strange quick things
that I've added here.
But the point of what I wanted to make
is you just need to keep that in mind.
This draw loop is for the purpose of refreshing
that flip book metaphor, I think, works well or analogy.
Someone will correct me.
The flip book idea, you've got a page and then a next page
and a next page and a next page.
There's no flip book here.
This is in order to perform a repeating task on a single page
in the flip book for animation.
So that's the first thing that I wanted to note.
The other thing that comes up very
often is kind of related to this because what
happens if now inside this loop, I put another loop?
For every x, do something to every y.
And let's think about how that might be useful.
And this is a kind of algorithm or process
that comes up over and over again
and again in any sort of computer graphics
programming and other kinds of programming as well.
Why?
Because the canvas-- the thing that we're drawing to--
is a two-dimensional grid.
It has pixels along the x-axis, and it
has pixels along the y-axis.
So if I would like to draw
something for every x, fill in all the y's.
So for the first x do all the y's.
For the next x, do all the y's.
Now for the next x, do all the y's.
The way that that works is to say for var x equals zero,
the rest of the for loop, and then for every x--
assuming this x is going up--
every time you do an x, also do a y.
So this is a little tricky to get used to,
but it's incredibly powerful and will open up
a lot of possibilities.
If you want to program a game that
involves a two-dimensional board of cells,
like chess or checkers, you're going
to need some sort of structure like this.
If you want to learn about image processing,
how do you read every pixel of an image
and make that pixel a little brighter, a little darker,
or apply some other kind of effect,
you're going to need this kind of loop.
So it comes up over and over again in so many things.
So let's look at that and applying the code.
And I'm still here.
Hopefully, it won't flicker and disappear too much.
So what I'm going to do, I'm going to get rid of this.
I'm going to save this project as.
I'm saving these because some day,
I will upload them somewhere, I suppose.
I am going to remove this weird offset thing.
I'll keep the random fill-- why not.
We don't need this offset.
And what I want to do is add right here another loop.
For y equals zero, y is less than or equal to height.
Y goes up by 50 and draw the ellipse at x comma y.
This is exactly what we were talking about.
For every x, do every y.
So my first x, do all the y's.
The next x, do all the y's.
And let's see if this works-- whoa.
It did, so now we have this perfect grid
of circles flashing random colors all over the window.
How could you make those colors not random?
How might you apply some sort of pattern to it?
How might you do all sorts of interesting things
like have those circle start to shake a little bit?
That's a little bit more complicated.
You're going to need some other tools and objects and rays
for a bit more.
But you can start to think about all of these possibilities.
And I just want to point out that, again,
if I were to take this loop--
and I did this sort of backwards.
I don't know why I'm showing you this
because it works so nicely.
But if I were to not do it this way, if I
were to do this two loops, this is what I've
got with two separate loops.
I'm doing all the x's along the y column 200.
And now I'm doing all the y's along the y row 200.
Now I'm doing all the y's in the x column 200.
So I don't know.
I had this in my mind.
I was going to show this first.
And so now I'm showing this after,
which really doesn't make a lot of sense.
But I'm just like letting this video fly with all
of its weirdness and error.
So let me go back to what it was correctly.
That was sort of pointless, can take that out.
I think this is a nicer place to end, looking at this again.
So what I've talked now about--
really very little but kind of giving you a running start here
and thinking about loops.
The loop is something to repeat a certain task
during one cycle of draw.
And you can use a loop anywhere, but right now, I'm
using it to draw multiple copies of a shape inside of draw.
You can also use a nested loop to see a grid.
If you draw, remember is the flip book.
So each time through draw, if you
change some aspect of the loop, I just
thought of something really interesting that we could try.
Like for example, everything can be a variable right here.
The x loop stops at width.
What if I were to put mouse x here?
So I would just want to dynamically loop
up to where the mouse is.
So now this loop, remember, is executing every single time,
but the exit condition is changing every time
through draw.
And you're still watching.
This was a little nugget here that's hopefully useful.
OK, so that gives you the basics about loops,
how loop works within draw, how you have a nested loop,
and I need to make one more video, which
won't happen today because I now have to go do something else.
But I want to look at an array and how loop relates to that.
OK, thank you and goodbye.
This is where I need to end.