The tint() function is used to set a fill value for images. It can be used to tint an image with the specified color or make it transparent by using an alpha value. Several parameters can be used to specify the tint color.
Syntax:
tint(v1, v2, v3, alpha)
tint(value)
tint(gray, alpha)
tint(values)
tint(color)
Parameters: This function accept eight parameters as mentioned above and described below:
- v1: It is a number which determines the red or hue value relative to the current color range.
- v2: It is a number which determines the green or saturation value relative to the current color range.
- v3: It is a number which determines the blue or brightness value relative to the current color range.
- alpha: It is a number which defines the alpha value for the color of the tint.
- value: It is a string which defines the color to be used for the tint.
- gray: It is a number which defines the gray value of the tint.
- values: It is an array of numbers which define the red, green, blue and alpha components of the tint color.
- color: It is a p5.Color which defines the color of the tint.
The examples below illustrate the tint() function in p5.js:
Example 1:
function preload() {
img = loadImage( 'sample-image.png' );
currTintColor = color( 'gray' );
}
function setup() {
createCanvas(600, 300);
textSize(22);
colPicker = createColorPicker( 'green' );
colPicker.position(30, 180)
colPicker.input(changeTint);
}
function draw() {
clear();
text( "Select the color below to tint the" +
" image with that color" , 20, 20);
text( "Original Image" , 20, 50);
image(img, 20, 60);
text( "Tinted Image" , 200, 50);
tint(currTintColor);
image(img, 200, 60);
noTint();
}
function changeTint() {
currTintColor = colPicker.color();
}
|
Output:
Example 2:
function preload() {
img = loadImage( 'sample-image.png' );
currTintAlpha = 128;
}
function setup() {
createCanvas(600, 300);
textSize(22);
alphaSlider = createSlider(0, 255, 128);
alphaSlider.position(30, 180)
alphaSlider.size(300);
alphaSlider.input(changeTintAlpha);
}
function draw() {
clear();
text( "Move the slider to change the alpha" +
" value of the tint" , 20, 20);
text( "Original Image" , 20, 50);
image(img, 20, 60);
text( "Tinted Image" , 200, 50);
tint(0, 128, 210, currTintAlpha);
image(img, 200, 60);
noTint();
}
function changeTintAlpha() {
currTintAlpha = alphaSlider.value();
}
|
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/tint
Last Updated :
21 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...