How to color shapes in p5.js

Coloring shapes is one of the most essential aspects of game development and creative coding. The p5.js library has built-in functions that allow for such interactions to take place.

The fill() method

We use the fill() method whenever we want to color a shape. It can be used with multiple syntaxes:

• fill(r, g, b, [alpha]): The r, g, and b represent the red, green, and blue values for the color, while [alpha] is an optional value representing the percentage of opacity.

• fill(hex_value): The hex_value represents a six-digit hexadecimal value where red, green, and blue are represented by two digits each.

• fill(gray, [alpha]): The gray value represents a monochrome color. The [alpha] is an optional value representing the percentage of opacity.

• fill(color): The color represents an object of type p5.Color.

• fill(values[]): The values[] represents an array of values containing red, blue, and green values.

Let’s go through them in the example below.

Example: Fill method

Take a look at the example below. We can see the use of the different fill() methods.

Code explanation

• Lines 2–18: The size variable stores the size of the shapes. The c variable stores a color that we define in the setup() function. The setup() function sets up the application canvas and the background.

• Lines 20–46: In the draw() function, we first reset the background. This is like repainting the whole canvas with this color. Then we use fill() to fill in each shape and draw it.

You might have noticed a thin black border around the shapes. This is called stroke in p5.js. Let’s see how we can manipulate the color and thickness of this border.

We will use the stroke() method to change the color of the border. This function can be used in all the ways as listed above for fill(). We will also use the strokeWeight(pt) method to control the thickness of the border in points.

Example: Stroke

Take a look at the example below. We can see the use of the different stroke() methods.

Code explanation

• Lines 2–18: The size variable stores the size of the shapes. The c variable stores a color that we define in the setup() function. The setup() function sets up the application canvas and the background.

• Lines 20–46: In the draw() function, we first reset the background. Then we use stroke() to fill in each shape’s border and draw it. We use the strokeWeight() function to set the thickness of each stroke.

Note: The fill(), stroke(), and strokeWeight() work in a precedent fashion. That means if we have a fill() on line 10, and another on line 20, the shapes made between lines 10 and 20 will be filled in the color of the fill on line 10, while the ones after line 20, will be filled in that color.

Conclusion

The p5.js library allows users to implement colors in a simple way. We can also use functions like colorMode() to change the application’s color mode from RGBA to HSLA or HSBA, etc. If we want to get rid of the colors, we can use the noFill()or noStroke() methods.