Drawing the Grid

[00:00:00]
>> Mathew DesLauriers: So, the first I'm gonna do is I'm gonna go back to my code and I'm gonna try and start a bit more fresh. So I'm gonna just delete most of this stuff, delete the settings so that we just have dimensions. And then delete the render stuff inside the render function just so we have a blank slate to work with, and then I save, we should have an empty canvas.

[00:00:20]
And we're gonna start by just making sure we clear the canvas with white. Cuz right now if we save our image, we're gonna end up with a transparent PNG. So the first thing we have to do is set a fillStyle to white. And we fill a white rectangle the full size of the screen, so top left corner all the way to bottom right.

[00:00:41]
And then we're going to create a four loop. So outside of our render function, remember this our render function, we can actually before our render function, before we return it we can create some local state here. So I'm gonna create a function called create grid, and this function is gonna return basically the points on a grid.

[00:01:08]
And so what I'm gonna do is I'm gonna have a list of points, as just an empty array to start off, and then I'm gonna have a count. So this is the grid size. So how many across by how many down? And if we look at, I'll just switch this for one second, I'll switch back.

[00:01:24]
But if we look at this image, we have one, two, three, four, five by five, so that's a five by five grid, so in our code here we're gonna use a count of five. We can change that later, just for now. And then we're gonna have a nested four loop, so we're gonna create a four loop across and a four loop down.

[00:01:45]
And this is using x, so x is in horizontal, y is in vertical. These are the two axes, the two sort of coordinates that we're working with in two dimensions. And you basically say, x starts at zero, x continues to count, then we do the same thing for the y dimension.

[00:02:06]
>> Mathew DesLauriers: So this might be basic to you, this might not. But right now we're just creating a two-dimensional grid. And here is where we want to, we wanna have the point at each grid point. So we wanna basically figure out what's the pixel coordinate for each of those grid points.

[00:02:23]
And instead of using pixel coordinates, I'm gonna actually use something that I like to call UV space. And this is an idea where you work in numbers between zero and one rather than working in your final pixel coordinates. And I like to work in UV space between zero and one just because then you can start to manipulate the numbers in different ways, and we'll start to see why it's useful.

[00:02:47]
But to do that we're gonna create a U variable, which is between zero and one. And so to get that we have to actually divide the x by the count, and that's gonna give us roughly a value between zero and one. So when we're at the very left we're going to get zero, and we're at the very right of the grid we're gonna get something closer to one.

[00:03:08]
And I'm going to do the same thing with the V coordinate, and that's y divided by count. And so now we have a UV sort of coordinate where top left would be (0,0) and the bottom right would be closer to (1,1). And we'll see later why this is kind of useful, but for now you can just add this coordinate to our points array.

[00:03:32]
And whenever I work with coordinates or vectors or 2D x-y pairs or something like that, I just use arrays like this. You can also use objects, but I like to use arrays. And then we just return the points. And so that's our whole function. And here we can use this function, we can actually call it.

[00:03:54]
>> Mathew DesLauriers: [COUGH] So here we go, I've just called the function. So now if I was to console log, we should just see an array of arrays. And the point should go from zero almost all the way to one, not quite.
>> Mathew DesLauriers: And so now what we're gonna do with this array of points is we're going to loop through each of them, using just for each.

[00:04:19]
And so we have this point variable here. I like to destructure these kind of things using EF6. So you don't have to, you can also access it old school style. But if you wrap the array with brackets and then you use these brackets, you can destructure the U and V coordinates that we have above.

[00:04:44]
And then remember that these are between zero and one. And so because our image is 2048 by 2048, we have to scale these back up to pixel space. So I'm gonna say, the x is u times width and y is v times height. That's gonna give us the actual pixel position of each of those things in our grid.

[00:05:08]
>> Mathew DesLauriers: And then at this position, here is where we're gonna draw a circle or a square, whatever you want to draw. We're gonna draw a circle just to keep it simple. And we're gonna do exactly what we were doing before, where we begin path to say we're gonna start drawing a path, and then we use arc to draw the circle at x and y.

[00:05:27]
We give it a radius, let's say 200, and we can change that later. We give it a start angle which is zero, and an end angle which is two pi. And you can put false or true, it doesn't really matter for that last parameter. And then we will, let's say we stroke, you can also fill.

[00:05:46]
If you fill you're gonna notice that it's not gonna show up cuz the fill style is white. So before we stroke or fill, let's make sure we set the color. So I'm just going to set it to black, it defaults to black, but sometimes it's nice just to be very specific with our code.

[00:06:03]
I'm also gonna make it thicker just like we did earlier, and maybe make it 20 or 40. And then if you get this far you'll start to see that we have almost a grid of circles, it's not looking very nice yet. We can change the radius to something else, like 100 or whatever.

[00:06:21]
And one thing you'll notice is that this grid is very left, top left aligned, and that's because our UV coordinates. They go all the way to 0.8 but they don't go all the way to 1. So there's no points that are at 1.1, and when you multiply 1 by width you should get the very end of the page, same with 1 by height.

[00:06:40]
So we actually need to, instead of dividing by count, we divide it by count minus one. We wrap that in a bracket. And that's just gonna sort of scale everything so that the u coordinate goes exactly from zero all the way to one. One other thing to be mindful of is that if your count happens to be really low, like let's say I was to use a count of one instead of a count of five, we're not gonna see anything, and that's because we're getting a bit of a not a number situation, where we're dividing by zero.

[00:07:12]
So to guard for that sort of situation, just do the if count is less than or equal to 1, we will use 0.5, let's say. Otherwise, we'll use the x divided by count. And the same for the y. So this just guards against that last situation that I was talking about, if count is less than or equal to one.

[00:07:35]
So now when we use a count of one, we should see it in the center of the screen. And that's because in UV coordinates, (0.5,0.5) is the very center cuz (0,0) is top left, (1,1) is bottom right.