p5.js tint() Function

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/amp/

Reference: https://p5js.org/reference/#/p5/tint