Color

Stroke & Fill

In p5, color can be applied to shapes primarily using two functions: fill and stroke.

Fill applies color to the inside of the shape. Stroke is applied as the color of the outline of the shape.

This is similar to how shapes are created in Adobe Illustrator.

Let's add some color to a simple self-portrait.

// self portrait function setup() { createCanvas(200, 200); background(220); // defaults stroke('black'); fill('white'); ellipse(100, 100, 100); // face ellipse(75, 100, 25); // right eye ellipse(125, 100, 25); // left eye rect(75, 125, 50, 10, 10); // mouth }

HTML Named Values

p5 is built on JavaScript, a web based programming language, used to interact with HTML and CSS. Because of this, and the way the HTML Canvas API works, p5 can use HTML Named Colors as color values.

HTML Color Names

Any color that works in HTML can be used in p5, but in p5 the syntax is slightly different.

A CSS color rule:

body { color: blue; }

A p5 color:

fill("blue");

In JavaScript, the HTML color name is treated like a string, which is a string of characters bound by quotation marks.

// self portrait function setup() { createCanvas(200, 200); background(220); fill("plum"); ellipse(100, 100, 100); // face fill("yellow"); ellipse(75, 100, 25); // right eye ellipse(125, 100, 25); // left eye fill("lightgreen"); rect(75, 125, 50, 10, 10); // mouth }

noStroke & noFill

In some cases you may not want to see a stroke or fill on your shapes. The stroke can be removed with the noStroke function, and likewise the fill is removed with noFill.

Both can be brought back later in the program just by setting the stroke or fill to a new color.

// self portrait function setup() { createCanvas(200, 200); background(220); noStroke(); fill("plum"); ellipse(100, 100, 100); // face fill("yellow"); ellipse(75, 100, 25); // right eye ellipse(125, 100, 25); // left eye stroke("lightgreen"); noFill(); rect(75, 125, 50, 10, 10); // mouth }

strokeWeight

The stroke of the mouth is pretty hard to see now. The thickness of the stroke is 1 pixel by default, but that can be changed with the strokeWeight function.

// self portrait function setup() { createCanvas(200, 200); background(220); noStroke(); fill("plum"); ellipse(100, 100, 100); // face fill("yellow"); ellipse(75, 100, 25); // right eye ellipse(125, 100, 25); // left eye noFill(); stroke("lightgreen"); strokeWeight(4); rect(75, 125, 50, 10, 10); // mouth }

HTML HEX values

Like the HTML color names p5 also uses HEX values like #ffddff as color values.

These are also strings, so they need to be formatted with quotation marks "#ffddff"

// self portrait function setup() { createCanvas(200, 200); background(220); noStroke(); fill("plum"); ellipse(100, 100, 100); // face fill("yellow"); ellipse(75, 100, 25); // right eye ellipse(125, 100, 25); // left eye noFill(); stroke("#ffddff"); strokeWeight(4); rect(75, 125, 50, 10, 10); // mouth }

Grayscale values

p5 also uses numerical values as arguments to represent color in several modes.

One numerical value in the range from 0 to 255 will create a grayscale color, with 0 representing black, 255 white, and everything else a shade of gray.

The background function in our examples uses the value 220 which is a light gray. Try changing it to 0 or 255 or something in between.

RGB Values

Using numerical values, the color functions can mix levels of red, green and blue together to create all of the possible colors for the computer screen.

The order is always red, green, blue.

This is useful for doing programmatic things with color, which we will explore in later classes.

// self portrait function setup() { createCanvas(200, 200); background(220); noStroke(); fill(0, 0, 255); // all blue ellipse(100, 100, 100); // face fill(0, 255, 0); // all green ellipse(75, 100, 25); // right eye fill(255, 0, 0); // all red ellipse(125, 100, 25); // left eye noFill(); stroke(100, 200, 200); // rgb mixed together strokeWeight(4); rect(75, 125, 50, 10, 10); // mouth }

Transparency

Adding a fourth argument to RGB will control the transparency or alpha level of the color.

This makes colors that show through to what is behind them.

// self portrait function setup() { createCanvas(200, 200); background(220); noStroke(); fill(0, 0, 255); // all blue ellipse(100, 100, 100); // face fill(0, 255, 0, 127); // half transparent ellipse(50, 100, 50); // right eye ellipse(150, 100, 50); // left eye noFill(); stroke(100, 200, 200); // rgb mixed together strokeWeight(4); rect(75, 125, 50, 10, 10); // mouth }