Let’s add color to our shapes!
The first style function for shapes you should know is the fill() function. fill() allows us to set the fill color, or the inside color of a shape. The default fill color for shapes is white and all shapes, except for points and line, have a fill. The fill() function must be called prior to calling the shape function.
We can set the fill color of shapes by calling the fill() function and passing color arguments like for the background() function. This will set the active fill color until the fill() function is called again with a different color argument.
To disable the fill of a shape and make the fill transparent, you can call the noFill() function.
Instructions
In the p5.js sketch to the right, set the top-left circle’s fill to blue using the RGB notation by calling the fill() function before it is drawn.
Set the top-right rectangle’s fill to black and with an alpha value of 40.
Next, set the bottom-left triangle to 'purple' with the fill() function.
Set the bottom-right circle to transparent using the noFill() function.