Line

Drawing a line is like drawing a point, but you need to provide four coordinates. You can think of it as drawing two points, and then a line is drawing between these two points. To draw a line in P5js we use the line() function. Write the code in this section, like with the point() function, inside the setup area of our code.

Let's create a cross that span the canvas.

strokeWeight(10);
line(0, 0, 400, 400);
line(0, 400, 400, 0);

You should see this:

The way the line() function works is that we give it four coordinates. The first two are the x, y coordinates of one edge, and the other two are the coordinates for the other edge. Take a look at our first line() function. The first two coordinates are both 0. This means that the first edge is on the upper left corner. If you look at the coordinate system, that is where the x and y start. X increases as we go right, and y increases as we go down, as you can see from the image below.

Exercise 2:

Instead of a cross, create a plus sign like the image below.

Remember that all the exercises have solutions in the project folders. Try to do them before checking the solutions though!