Shape Color

So far, we have seen how to create 2D Primitive Shapes, and how to change the color of the background. But, all of our shapes have been filled with black. Obviously, there must be a way to change the color of shapes.

The Parts of a Shape

Before we jump into functions to color shapes, we need to define the two parts of a shape that can be adjusted. These are the;

• border / stroke()
• interior / fill()

Change The Interior Color with fill()

To change the interior color of a shape, or the fill, we need to call the fill() function. Just like the background() function, we pass this function a color as parameter/s. When called, this function will change the fill color of every shape below it.

Just like background(), we will use “named color strings” with these new color functions. We will discuss 4 more ways to specify color on the next page.

In the below example, notice how the shapes take on different colors depending on the fill() function most closely above them.

noFill()

In addition to setting the interior color with the fill() function, the interior of shapes can also be set to “no-fill”, using the noFill() function.

• noFill() reference page

The noFill function will cause a shape to only display its border.

Since the noFill() function removes a shape’s fill or interior color, there are no parameters to pass this function. Therefore, the parenthesis remain empty.

NOTE: To fill subsequent shapes, below a no-fill shape, just call the fill() function again.

In the below example, two shapes are drawn with fills and two without.

Notice: How the order placement in the sketch causes shapes to stack on each other.

Specifying a Border Color with stroke()

In addition to specifying the interior fill color, shapes can also have their border color specified with the stroke() function.

• stroke() reference page

Like the fill() and background() functions, for the moment, we will only pass the stroke() function “named color strings” to specify color.

Also, like fill(), the stroke() function effects any shape objects below it. However, it can be overwritten by specifying new stroke() statements.

In the below example, we remove the fill of the first two shapes, so that the stroke color can be seen more clearly.

Specifying the Size of Stroke with strokeWeight()

As is clearly seen in the above example, the default stroke or border for shapes is only 1px in width. It will often be desirable to specify a wider border to make shapes more distinguishable. This can be accomplished with the strokeWeight() function.

• strokeWeight() reference page

This function takes a single input parameter that sets the stroke weight or thickness of a border. This function expects this parameter to be a number specifying the number of pixels to make the stroke weight.

NOTE: In the below example notice the use of the line() and point() functions, which can only be used with stroke()-based functions as they have no interior.

The stroke weight is not bound by the “size” of an object. The size specifies the size of the “filled” portion of the object. The middle of stroke/border then splits this point. In other words, half of the stroke’s width will be inside an object’s specified edge, and the other half will be outside.

This means that if you set an ellipse() to have a width of 20px, for example. And specify it also has a stroke weight of 10px. The total width of the ellipse will actually be 30px (5px + 20px + 5px).

Shapes Without Borders, Using noStroke()

Just like the noFill() function, we can also specify a shape to have no border using the noStroke() function.