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:
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:
Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/reference/#/p5/tint
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA