p5.js | función tinte() – Barcelona Geeks

La función tint() se usa para establecer un valor de relleno para las imágenes. Se puede usar para teñir una imagen con el color especificado o hacerla transparente usando un valor alfa. Se pueden utilizar varios parámetros para especificar el color del matiz.

Sintaxis:

tint(v1, v2, v3, alpha)

tint(value)

tint(gray, alpha)

tint(values)

tint(color)

Parámetros: Esta función acepta ocho parámetros como se mencionó anteriormente y se describe a continuación:

v1: Es un número que determina el valor de rojo o matiz relativo a la gama de colores actual.
v2: Es un número que determina el valor de verde o de saturación relativo a la gama de colores actual.
v3: Es un número que determina el valor de azul o brillo relativo a la gama de colores actual.
alfa: Es un número que define el valor alfa para el color del tinte.
valor: Es una string que define el color que se utilizará para el tinte.
gris: Es un número que define el valor de gris del tinte.
valores: Es una array de números que definen los componentes rojo, verde, azul y alfa del color de tinte.
color: Es un p5.Color que define el color del tinte.

Los ejemplos a continuación ilustran la función tint() en p5.js:

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

Producción:

change-tint-color

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

Producción:

change-tint-alpha