p5.js | blendMode()函数

blendMode()函数用于根据给定的混合模式混合两个像素。不同类型的混合模式具有将源像素与显示窗口中存在的像素混合的不同方法，以产生结果像素。

句法：

blendMode( mode )

参数：此函数接受用于混合像素的单参数模式。它可以具有以下值：

• 混合：它使用颜色的线性插值混合像素。这是默认的混合模式。
• ADD：它通过添加两个像素的颜色来产生新的颜色。
• DARKEST：它只使用两个像素中较暗的颜色。
• LIGHTEST：它只使用两个像素中较亮的颜色。
• 差异：它从底层图像中减去颜色。
• 排除：它与强度较小的“差异”属性具有相似的效果。
• MULTIPLY：它将两种颜色相乘，从而产生更暗的图像。
• 屏幕：它具有与“乘”效果相反的效果，并使用颜色的反向值。
• 替换：它完全用另一个像素替换第一个像素，同时忽略 alpha 值。
• 移除：它使用其 alpha 强度从第二种颜色中移除像素。
• 叠加：它是“乘法”和“屏幕”模式的混合。它乘以亮值并屏蔽暗值。它仅适用于 2D 渲染器。
• HARD_LIGHT：当灰度值高于 50% 时应用“屏幕”效果，当灰度值较低时应用“倍增”效果。它仅适用于 2D 渲染器。
• SOFT_LIGHT：它是“最暗”和“最亮”的混合体。它的工作方式类似于强度较低的“叠加”模式。它仅适用于 2D 渲染器。
• DODGE：淡化浅色调并增加对比度，同时忽略深色调。它仅适用于 2D 渲染器。
• BURN：淡化深色调并增加对比度，同时忽略浅色调。它仅适用于 2D 渲染器。
• 减法：它根据两个像素的剩余部分应用最终颜色。它仅适用于 WEBGL 渲染器。

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

例子：

function setup() {
  blendModes = [
    BLEND,
    ADD,
    DARKEST,
    LIGHTEST,
    DIFFERENCE,
    EXCLUSION,
    MULTIPLY,
    OVERLAY,
    HARD_LIGHT,
    SOFT_LIGHT,
    DODGE,
    BURN
  ]
  
  index = 0;
  currBlendMode = blendModes[index];
  
  createCanvas(600, 300);
  textSize(20);
}
  
function draw() {
  clear();
  text('Click on the button to change the blend mode', 20, 20);
  text("Current blendMode: " + currBlendMode, 20, 50);
  
  btn = createButton("Change blendMode");
  btn.position(30, 80);
  btn.mousePressed(changeBlendMode);
  
  // Set the blend mode
  blendMode(currBlendMode);
  
  // Draw the first circle
  fill("red");
  circle(180, 200, 150);
  
  // Draw the second circle
  fill("green");
  circle(260, 200, 150);
}
  
function changeBlendMode() {
  if (index < blendModes.length - 1)
    index++;
  else
    index = 0;
  currBlendMode = blendModes[index];
}

输出：

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

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

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