Submodule 16.3: Colors
Color rules
In order to define the color of different p5.js elements it is important to understand the color rules.
When we want to color an element, we have to apply the appropriate functions prior to drawing the element.
Example:
function setup() {
// create canvas
createCanvas(800,500);
// set background color
background('orange');
}
function draw () {
fill('red');
stroke('#f12e78');
ellipse(width/2,height/2, 50);
fill('#DC143C');
stroke('#FFA500');
ellipse(500,height/2, 50);
}
If we don't define any different color all the elements that will be drawn after this, they will have the same colors.
Example:
function setup() {
// create canvas
createCanvas(800,500);
// set background color
background('orange');
}
function draw () {
fill('red');
stroke('#f12e78');
ellipse(width/2,height/2, 50);
ellipse(width/2,height/3, 50);
rect(width/2,height/6, 50,50);
ellipse(width/4,height/2, 50);
}
If we want each color function to be applied only on specific elements, we can position our elements in between the push()
and pop()
functions.
For example the above can be modified as :
function setup() {
// create canvas
createCanvas(800,500);
// set background color
background('orange');
}
function draw () {
push();
fill('red');
stroke('#f12e78');
ellipse(width/2,height/2, 50);
pop();
ellipse(width/2,height/3, 50);
rect(width/2,height/6, 50,50);
ellipse(width/4,height/2, 50);
}
Exercise
- Open your Visual Studio editor and the
p5yourName
folder. - Open the file
ex812.js
in your editor and save it asex832.js
- Open the file
ex812.html
in your editor and save it asex832.html
- In the
ex832.html
file, update the link toex832.js
from exersice812.js - Go to the
index.html
file and create, underModule 8
, alink
to theex832.html
file with the title "Color rules".
Modify the ex832.js
file to apply colors to the face. You can see here an example.
function setup() {
createCanvas(800, 600);
// set background color
background('#D66761');
}
function draw() {
// state the fill color of the shape
fill('#FBEFCC');
// state the border color of the shape
stroke('#FBEFCC');
// state the border weight of the shape
strokeWeight(2);
// create the face ellipse
ellipse(width/2,height/2,200,300)
// state the border color of the outer eye circle
stroke('#A2836E');
// for the left eye
// draw the base ellipse, the sclera/“white of the eye”
ellipse(350,275,50,25);
// state the border of the iris
stroke('black');
// draw the Iris for the eye
ellipse(350,275,25);
// fill the center of the eye
fill('#034F84');
// color the border
stroke('#034F84');
// draw the center of the eye
ellipse(350,275,12.5);
// state the border color of the outer eye circle
stroke('#A2836E');
// for the right eye
// draw the base ellipse for the eye, the sclera/“white of the eye”
noFill();
ellipse(450,275,50,25);
// state the border of the iris
stroke('black');
// draw the Iris for the eye
ellipse(450,275,25);
// fill the center of the eye
fill('#034F84');
// color the border
stroke('#034F84');
// draw the center of the eye
ellipse(450,275,12.5);
}
Do a Git commit with the message "Color rules".