p5.js | tint()函数

tint()函数用于设置图像的填充值。它可用于使用指定颜色为图像着色或使用 alpha 值使其透明。可以使用几个参数来指定色调颜色。

句法：

tint(v1, v2, v3, alpha)

tint(value)

tint(gray, alpha)

tint(values)

tint(color)

参数：此函数接受上述八个参数，如下所述：

• v1：它是一个数字，用于确定相对于当前颜色范围的红色或色调值。
• v2：它是一个数字，用于确定相对于当前颜色范围的绿色或饱和度值。
• v3：它是一个数字，用于确定相对于当前颜色范围的蓝色或亮度值。
• alpha：它是一个数字，用于定义色调颜色的 alpha 值。
• value：它是一个字符串，用于定义要用于色调的颜色。
• gray：这是一个定义色调灰度值的数字。
• values：它是一个数字数组，用于定义色调颜色的红色、绿色、蓝色和 alpha 分量。
• color：它是一个 p5.Color，它定义了 tint 的颜色。

以下示例说明了 p5.js 中的tint()函数：

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

输出：

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

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/tint