p5.js | tint() Function

27 Feb, 2020
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);    // Create a color picker for  // the tint color  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);    // Draw image without tint  image(img, 20, 60);      text("Tinted Image", 200, 50);    // Draw image with tint  tint(currTintColor);  image(img, 200, 60);      // Disable tint for the next  // draw cycle  noTint();}  function changeTint() {  // Update the current tint color  currTintColor = colPicker.color();}
Output:
Example 2:
function preload() {  img = loadImage('sample-image.png');  currTintAlpha = 128;}  function setup() {  createCanvas(600, 300);  textSize(22);    // Create a slider for  // the alpha value of the tint  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);    // Draw image without tint  image(img, 20, 60);      text("Tinted Image", 200, 50);    // Draw image with tint and  // current alpha value  tint(0, 128, 210, currTintAlpha);  image(img, 200, 60);      // Disable tint for the next  // draw cycle  noTint();}  function changeTintAlpha() {  // Update the current alpha value  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
JavaScript-p5.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?