Book
Submodule 16.3: Colors
Submodule 16.3: Colors
Completion requirements
View
- Color functions
- Color rules
- Alpha value - Transparency
Alpha value - Transparency
When we want to determine the alpha value of a p5.js element, we define a fourth value for the color.
The smaller the alpha value the more transparent the element.
Example
Here is an example code of two ellipses with different alpha values :
function setup() {
// create canvas
createCanvas(800,500);
// set background color
background('#B2B2B2');
}
function draw () {
//this ellipse will have a low transparency value
fill (175,68,39,50);
ellipse(width/2,height/2,100);
// this ellipse will have a high transparency value
fill (124,156,39,5);
ellipse(450,height/2,100);
}
Exercise
- Open your Visual Studio editor and the
p5yourName
folder. - Open the file
ex812.js
in your editor and save it asex833.js
- Open the file
ex812.html
in your editor and save it asex833.html
- In the
ex833.html
file, update the link toex833.js
from exersice812.js - Go to the
index.html
file and create, underModule 8
, alink
to theex833.html
file with the title "Alpha value".
Modify the ex833.js
file to create an ellipse which will move horizontally from the left to the right end of the canvas and will change its color and alpha value according to the direction it has. You can see here an example.
// create a variable tp control the direction of the ellipse
let control = false;
// make ellipse starting from the left end of the canvas
let i=30;
function setup() {
// create canvas
createCanvas(800,500);
// set background color
background('#31bc33');
}
function draw () {
// when ellipse is in the left edge, control would be/become false
if (i==30) {
control = false;
}
// if ellipse is inside the canvas width (we substract 30 which is the radius
// of our ellipse) and control is false
if (i<(width-30) && control==false){
// state fill and alpha of the ellipse
fill(146,87,67,40);
//state stroke color and transparency
stroke(234,65,88,5);
i++
// increase its x position (ellipse moves in the right direction)
ellipse(i,height/2,60);
}
else {
// else control will change to true
control = true;
//change the color and fill of the ellipse
// state fill and alpha of the ellipse
fill(56,57,67,100);
//state stroke color and transparency
stroke(5,165,188,50);
// decrease its x position (ellipse moves in the left direction)
i--;
ellipse(i,height/2,60);
}
}
Do a Git commit with the message "Alpha value".
- See more about the alpha() function