Goals

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

Resources

http://processing.org/learning/color/
http://processing.org/learning/basics/colorwheel.html

Stroke

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.

Fill

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()

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).

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.

void setup() { size(400, 400); } void draw() { noStroke(); background(400); colorMode(RGB, 400); //Column One fill( mouseX, mouseY, 0 ); rect( 50, 50, 100, 100 ); fill( mouseX, 0, mouseY ); rect( 50, 150, 100, 100 ); fill( 0, mouseX, mouseY ); rect( 50, 250, 100, 100 ); //Column Two fill( mouseX, 0, 0 ); rect( 150, 50, 100, 100 ); fill( 0, mouseX, 0 ); rect( 150, 150, 100, 100 ); fill( 0, 0, mouseX ); rect( 150, 250, 100, 100 ); //Column Three fill( mouseY, mouseX, 0 ); rect( 250, 50, 100, 100 ); fill( mouseY, 0, mouseX ); rect( 250, 150, 100, 100 ); fill( 0, mouseY, mouseX ); rect( 250, 250, 100, 100 ); }