How to use vectors in p5.js

We can use vectors in p5.js to manipulate and set the position of different objects and shapes. Vectors in p5.js are built-in data structures with an $x$ and a $y$ coordinate. They can be used in 3D, with a $z$ coordinate, but the most common use case of vectors in p5.js is in 2D.

Position and vectors

In p5.js, the positioning of shapes and objects is based on a coordinate system, usually $x$ and $y$. The coordinate $x$ and $y$ are 0 and 0, respectively, at the top left corner of the canvas. The coordinate $x$ will increase as we go right, while $y$ increases as we go down.

This relationship can be seen in the illustration below.

The $x$ and $y$ coordinates are not bound to width and height, just that these ranges will be visible on the canvas.

Vectors are just variables with an $x$ and $y$ component. These special variables allow us to perform complex tasks using simple built-in functions, like calculating the distance between two positions or adding a force to an object at a position.

We can use the built-in p5.Vector data type to store vectors. The createVector(x, y) function is used to create a vector. We’ll see in the example below how these vectors can be useful to us.

Example: Distance visualization using vectors

Take a look at the example below, where we can see two circles. One of these circles is static and fixed in the middle of the screen, while the other moves with the mouse pointer. The background turns black when the distance between the two circles is small, and it turns white when the inverse is true.

This is done using the v1.dist(v2) function to calculate the distance between two vectors v1 and v2.

There is also text that shows the current distance at the top left, and some text that shows the mouse’s current position in the canvas. As we’re using vectors in the 2D space, the $z$ component of the vector will always be $0$.

Code explanation

• Lines 2–4: The ballPos variable is declared to later store the position of the ball as a vector in it. The variable d holds the diameter or size of the ball/circle.

• Lines 8–16: The setup() function is called once at the start of the execution. This function sets up the application canvas. Then, a vector at $x = 200, y = 150$ is stored in the variable ballPos, and the text alignment is also set to center alignment.

• Lines 21–27: In the draw() function, the mousePos variable is being set to a new vector created at the position of the mouse cursor at every frame. Then, the distance between the center ball and the ball at the mouse position is calculated, and stored in distance.

• Lines 30–39: Two balls are drawn — one at the center vector, and one at the mouse pointer. Then, the text() function is used to display the distance (rounded to the nearest integer), and the vector at the mouse position.

Functionality

Vectors are very useful tools when dealing with any coordinate system. This is no exception in p5.js, as vectors allow us to easily manipulate and work with the positions of objects.

Some functionality that the p5.Vector gives us include:

• equals(): Checks if two vectors are equal.

• fromAngle(): Make a new 2D vector from an angle.

• dist(): Finds the distance between two vectors.

• mult(): Multiplies the vector by a scalar value.

• div(): Divides the vector by a scalar value.

These are just a few functions, and we can review the official documentation for all of the functionality that p5.Vector offers.