Let’s add color to our shapes!
The first style function for shapes you should know is the
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
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
Set the bottom-right circle to transparent using the