Transcript
CHRISTIAN NOLD
In this video, I’m going to show you how the coordinate system works in p5.js by positioning some squares, and also changing the outline thickness of the squares. To start with, I’m going to go to line 15, and I’m going to copy the whole of the line here: the square function. So I’m going to use Cmd C, or Ctrl C on Windows. And now, I’m going to hit the Return key a few times to make myself some space. And I’m going to paste it underneath with Cmd V or Ctrl V.
There you go. So now, we have four squares. When I press ‘Play’, we can’t see them yet. That’s because they’re all on top of each other. What I have to do is I have to change the x-coordinate of the different squares. So, I’m just going to go here to the second square, and I’m going to change the x-coordinate to 100.
So, when I press that, we now can see two of the squares. I’m going to change this one to 150. Now, we can see three, and I’m going to change this to 200. And now, we can see all four of the squares. I’m going to try and arrange them in a diagonal going down here. In order to do that, I have to change the y-coordinate, i.e. the y-coordinate runs this way. So, I’m going to go here and I’m going to change this to 100. And that moves the square down. I’m going to change this to 150. There you go. The squares move down. And I’m going to change this to 200.
Nice. Now, all the squares are arranged in a diagonal. They all have different x-coordinates and different y-coordinates, arranged like this.
The final thing I’m going to show you is how to change the thickness of the lines. That’s controlled by the stroke weight, which is here in line 7. Currently, the stroke weight is 1, which is giving us a nice thin outline. If I change that stroke weight to 3 and press ‘Play’, we now have a thick outline both for the dots, the points, but also for the squares.
But if I copy that line and then move it here in between those squares, and then change it to 1, and press ‘Play’, what’s happening now is that all the shapes that follow that stroke weight command here are drawn with a thickness of 3. Then it changes to a stroke weight of 1, and the last two squares are drawn with a stroke weight of 1. Hence, we have thin lines. So, by varying the stroke weight, you can control the thickness of the lines.