Skip to main content
header search
ahihi OpenLearn
OpenLearn
Menu
sticky search

About this free course

Become an OU student

Download this course

Share this free course

Course content Course content
Algorithmic Design
Algorithmic Design

Start this free course now. Just create an account and sign in. Enrol and complete the course for a free statement of participation or digital badge if available.

More free courses

3.3 Principle 3: Shapes and Coordinates

In this principle, you will learn how to draw some shapes and how to position them on the canvas using the coordinate system in p5.js. In all these examples, you will be using a square canvas size of 300 × 300 pixels, so all our shapes always need to fit into that space.

X and y-coordinates in p5.js

p5.js uses an x- and y-coordinate system to identify locations on the canvas and to position shapes.

The x/y-coordinate system

The origin point for the coordinates starts in the top left-hand corner of the canvas with 0,0.

The x-coordinate is the horizontal distance in pixels from the left edge, while the y-coordinate is the vertical distance from the top edge.

The x-axis is left to right. The y-axis is top to bottom.

In Figure 7, I have used some graph paper to draw a dot at the position x2 and y3 which is written as point(2, 3) in p5.js code. The x-coordinate always comes first, followed by a comma and then the y-coordinate.

If you forget the comma, you will get an error in your program. Note that the coordinate system starts in the top left-hand corner.

Described image
Figure  7  The x/y-coordinate system drawn on graph paper
Show description|Hide description

Image showing graph paper and a graph with the axes labelled ‘X’ and ‘Y’. The numbers 0–6 are marked along each axis. A dot is marked, located at X2 and Y3. Next to this dot, in parenthesis, the following is written: ‘(2,3)’.

Figure  7  The x/y-coordinate system drawn on graph paper

Point

Drawing a point is easy in p5.js. It has two parameters for the x- and y-coordinates, point(x, y):

  • x: the number that specifies the x-coordinate

  • y: the number that specifies the y-coordinate.

(p5.js reference: point)

Square

The square shape has three parameters, square(x, y, s):

  • x: the number that specifies the x-coordinate of the top left corner of the square

  • y: the number that specifies the y-coordinate of the top left corner of the square

  • s: the number that specifies the width and height of the square.

(p5.js reference: square)

Active content not displayed. This content requires JavaScript to be enabled.
Program 3  Draw squares
Interactive feature not available in single page view (see it in standard view).

Change the outline

Notice that the outline of the square in Program 3 is very thin. The way to control this is by using the strokeWeight() command – you can put any number you like inside the brackets. I recommend a number between 1 and 10.

(p5.js reference: strokeWeight)

Note that it matters where in the code you put the commands. The program runs the code sequentially, line by line from top to bottom. If you add strokeWeight(), then all the subsequent shapes will have that property applied. This property persists for all shapes on the next loop. If you want the shapes to have a different outline, then you need to add another strokeWeight() command so that any subsequent shapes receive that property.

Watch Video 5, which shows you how to use the coordinate system.

Download this video clip.Video player: Video 5
Copy this transcript to the clipboard
Print this transcript
Show transcript | Hide transcript

Transcript: Video 5  Drawing squares using the coordinate system

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.
End transcript: Video 5  Drawing squares using the coordinate system
Download
Video 5  Drawing squares using the coordinate system
Interactive feature not available in single page view (see it in standard view).

Activity 3  Draw your own squares and tweak the outline

Timing: Allow 15-20 minutes to complete this activity

Use Program 3 Draw squares to draw multiple squares at different locations. You need to copy and paste the square command to create some additional squares and change the x- and y-coordinates. Remember that the origin point is in the top left-hand corner.

Change the strokeWeight() to give the points and squares a thick outline.

Keep playing with this activity until you understand the x- and y-coordinate system. This concept is important to understand for section 4 ‘Making Tiles’, where you will be creating tiles and wallpaper.