Colors in ProcessingColors are represented as RGB values
RGB stands for Red, green, Blue
Each value is represented on a scale of 0 to 255
You can use colors in a few ways:
Create a variable to store a color.
Set the color you draw shapes in with the fill command.
Set the color of outlines with the stroke command.
// Making a color variable to store this RGB value
color cyan = color(0, 255, 255);
When you use the fill() command, it sets the color that all future shapes will be drawn in. Think of it as picking up a paintbrush with a specific color of paint on it.
The fill command is overloaded, meaning it has a few different versions. The three most basic are grayscale, RGB, and taking a color as a parameter.
void fill(int grey)
Sets your color from black (0) to white (255).
fill(127); // Sets the color to a medium grey
void fill(int red, int green, int blue)
Sets your color from based on RGB values ranging from 0 to 255.
fill(255, 127, 0); // Sets the color to orange
void fill(color c)
Sets your color equal to the value of the color parameter
When you use the stroke() command, it sets the color of your outlines in the future. This works just like fill(). It is also overloaded, with the same parameters.
Note that stroke will also affect the color of any lines you draw, since they don't have an interior.
void stroke(int grey)
stroke(127); // Sets the color to a medium grey
void stroke(int red, int green, int blue)
void stroke(color c)
By default, shapes in processing have a small black outline. You can change this color, remove it entirely, or make it thicker.
No StrokeYou can stop drawing outlines (and lines) with the noStroke command.
To undo this, simply set a new stroke color.
Stops drawing outlines and lines
fill(255, 0, 0);
noStroke(); // Disables stroke
rect(100, 100, 200, 100); // Draws a red rectangle with no outline
stroke(0); // Restores stroke visibility (black)
rect(200, 250, 200, 100); // Sets the color to orange
The code on the left produces this image
You can change how big your lines are using the strokeWeight() command. The default weight is 1.
void strokeWeight(int weight)
strokeWeight(4); // Wider
line(80, 80, 320, 80);
strokeWeight(16); // Quite Thick
line(80, 160, 320, 160);
strokeWeight(40); // Super Chonker
line(80, 280, 320, 280);
When you use the background() command, it sets the color for the entire screen instantly. You typically want to do this before drawing other shapes.
void background(int grey)
background(127); // Sets the whole screen to a medium grey
void background(int red, int green, int blue)
background(255, 127, 0); // Sets the whole screen to orange
void background(color c)
background(c); // Sets the whole screen to c
Alpha ValueAlpha is the fourth value associated with each color.
It is always optional.
It is on a scale of 0 (opaque) to 255 (transparent)
You can apply this to color variables, fill, or stroke.
fill(255, 0, 0, 127);
rect(100, 100, 200, 150);
fill(0, 255, 0, 127);
rect(200, 200, 200, 150);
Looking for more color tools? Check out the official reference. Note: A few of these may only work on the newest version of Processing.
Chapter 1.3 to 1.5 - Color