• Making Stuff Look Good
  • Stroke and Fill
    • Setting
    • Stroke Weight
  • Color
    • Additive Color
    • Subtractive Color
    • Other Color Systems



"Any ground subtracts its own hue from the colors which it carries and therefore influences." ~ Josef Albers


A stroke is the line style for a shape.
For any shape drawn in processing, always set the stroke before drawing.
Here is how to set the stroke color:
stroke( red, green, blue, alpha );
Here is how to set the stroke thickness:
strokeWeight( thickness );
The strokeWeight expects the number of pixels the line thickness should be.

Strokes have two components, color and weight.


A fill is the color of the interior of the shape.
Here is how to set the fill color:
fill( red, green, blue, alpha );
The method of specifying red, green, blue and alpha is the most complete method available in processing.
In the following tabs we will introduce other ways to set colors in Processing.

noStroke() and noFill()

These two commands can be called to eliminate the stroke or fill respectively. It's the same as setting their alpha to 0 (fully transparent).
Any shape drawn after noFill() will not be filled. Any fill() call will set a new fill color, and thus deactivate noFill()
The same goes for noStroke() and stroke()

Strokes and fills should be set before drawing any shape, otherwise they will be drawn with the previously set stroke and fill, which may cause undesirable appearances for shapes.
The default stroke is black with weight 1 and the default fill is white.
noStroke() and noFill() are fast ways of turning off strokes and fills.

Processing Color

The primary colors for computer displays are red, green, blue (RGB). For RGB, color blending is additive, which means that as colors combine, they become brighter.
Think of greater values of red, green and blue as adding more and more red, green and blue light. Adding more light yields white.
Traditional paint color mixing rules don't apply here. Take a look at the secondary colors created from the blends of pairs of primary colors in Processing.
The "Alpha" component of color is the opacity of the color. Alpha is used in computer graphics to draw semitransparent objects. Objects drawn with alpha leass that maximum (255 by default) will allow objects underneath them to "show though", or be blended with the newly drawn object.

Color for strokes and fills can be set 4 different ways:
fill( red, green, blue, alpha );
fill( red, green, blue );
fill( gray, alpha );
fill( gray );
If alpha is not specified it is assumed to be maximum (fully opaque).

Primary colors are red, green, blue.
Color is additive, more color = more brightness.
Color can be set any one of 4 ways.

Other Color Systems

There are two different color spaces in processing. RGB which is the most basic and HSB which stands for hue, saturation, brightness. The photoshop color picker shows each color representation possible, two of these are RGB and HSB. You can switch between color spaces and set their maxima like this:
colorMode( mode, max value );
Take a look at the following example and try to figure out why all of the squares are red.

When setting a mode like colorMode( ... ) in processing, remember it will be set for all shapes drawn after. This could be trouble knowing which mode is set unless the mode is RESET to the default after drawing.