OK.
So as I mentioned we're going to do a quick exercise and it's going to be very underwhelming as far
as the finished product goes but it's a good one just to get some practice with paperchase.
So actually really simple 4 ish lines of code that you need.
All that I want is a grid of circles and the exact measurements don't matter what I have here is a circle
starting at zero zero and every 100 pixels.
I'm drawing another circle.
I think that radius is 10 all the way until 1000.
So this is 1000 1000 right here.
So it doesn't really matter just get 100 ish circles on the screen obviously without doing it manually
one at a time that's the point.
So how can you do that.
That's up to you.
You'll need to figure out how to generate those coordinates x and y coordinates that are increasing
.
And feel free to make them all purple or any color.
It's not really the point or make them another shape.
So try doing a square or a rectangle or try something more fun where you have the colors on a gradient
so that as X gets greater the color gets redder.
I remember well I guess not really remember I haven't told you this but that paper JSE you can do RGV
colors hexadecimal.
So you can generate a color where you're incrementing the red component or that green component.
But at the very minimum I'm just looking for a grid of circles at least 100.
And if you want.
You could also randomize them so that they're all over the place.
I just want you to get a lot of circles on the page.
OK.
So take a moment pause a video.
Try this on your own.
I recommend that you get lost.
The docs are a bit.
Try some things out.
Look at the examples and then come back and we'll go over solution.
All right.
Great.
So this is what I had before where I left off and I'm going to get rid of almost all of this code.
So we don't want that line anymore.
Any of that.
Let's take a look.
We solve that giant circle which we don't really need.
We will want to keep that code so that we know how to make a circle but we don't want a giant one.
So what we want to do here is use a loop.
So we want to use a loop to make a circle here and then a circle here circle here basically will add
10 or 100 actually to the x coordinate so we can start by doing that.
So we'll make a loop and we'll start at zero loops for far.
Equals zero.
Itis less fun and this can be anything.
I did it as 1000.
And actually it lets me get X so it's clearer.
And each time through.
Rather than doing X plus plus which we could use to make a circle every single pixel will make jumps
of 100 and then all that will do is copy this code and make a circle but we'll alter it a little bit
if we left it.
This would make us 10 circles at the exact same point the same race.
So not what we want let's do X comma and y will be fixed as 0.
So that should make us a line of circles all with y coordinate of zero and radius will make 10.
And if we take a look at that refresh you can see here we get 10 circles going across every 100 pixels
we get a new one.
So what we want to do is basically repeat that again.
So we have our first time through.
We need one of these rows 10 times going down.
And the best way to do that is by using another loop.
So we want to take what we have here and just repeat all of this so we can make another loop.
And this time we'll do it for the y coordinate.
So why should go up and tell 1000 y plus equals 100 as well.
And I'll walk you through exactly how this works.
I think nested loops can be a little bit confusing
if we just change 0 to be y Now that's actually all we need to do.
So let's refresh you see if we get that grid.
So not the most exciting thing but we very quickly added a bunch of circles.
So let's take a look at this nested loop.
So I drew a little diagram the first time through X starts at zero.
So I'll do it like this where we have x and y.
OK.
Let me capitalize it so X starts at zero.
And then while X is 0 we do this loop word Y starts at zero.
Just like that.
And then next time through this y loop X is still zero.
But this time why is 100.
Because we add one hundred and then x is still zero and Y is 200.
Then X is zero.
Why is 300 and so on.
I'll do a dot dot dot and tell X is zero.
Why is 1000 are actually because we have less then it will only get to 900 and then X changes over to
be 100 and then Y changes over to go back to zero.
So basically for every x we're generating 10 y's.
So that ends up with us having 100 or 100 iterations.
So it's a little confusing but it helps if you step through this X starts at zero y starts at zero but
then X stays at 0 and y goes up to 100 than 200.
And we're drawing a circle at each one of those intel.
Why then resets and then X goes and increments.
OK.
So kind of in my opinion confusing.
Last thing that we can do is a small change.
We don't actually need to save this to a variable every time.
We can just change this like this and it's slightly more efficient where we're not reassigning a variable
constantly because we're never doing anything with those circles again.
We're just making them once.
So rather than rewriting and re initializing a variable every time through the loop we just make a new
circle give it a fill color of purple or let's do yellow save refresh.
There we go.
OK.
So this was a little bit of a diversion here but still pretty important.
Again the motivation behind you doing that.
Hopefully you did it.
But the motivation was for you to just get practice combining javascript skills loops with paper yes
and seeing that all you have to do is call you know a short line of code and it would run a bunch of
code behind the scenes to actually make that circle OK in the next video will actually get on with the
show and start really working on our pad attack clone.