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);
}

Result of the above code:

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);
}

Result of the above code:

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);
}

Result of the above code:

Exercise

  1. Open your Visual Studio editor and the p5yourName folder.
  2. Open the file ex812.js in your editor and save it as ex832.js
  3. Open the file ex812.html in your editor and save it as ex832.html
  4. In the ex832.html file, update the link to ex832.js  from exersice812.js
  5. Go to the index.html file and create, under Module 8, a link to the ex832.html  file with the title "Color rules".

Modify the ex832.jsfile to apply colors to the face. You can see here an example.

Answer:

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

  • See more about the push() function
  • See more about the pop() function