p5.js blendMode()用法及代码示例

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

用法:

blendMode( mode )

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

BLEND:它使用颜色的线性插值混合像素。这是默认的混合模式。
ADD:它通过添加两个像素的颜色来产生新的颜色。
DARKEST:它仅使用两个像素的较深颜色。
LIGHTEST:它仅使用两个像素的较浅颜色。
DIFFERENCE:它从基础图像中减去颜色。
EXCLUSION:它具有与强度较小的“difference”属性相似的效果。
MULTIPLY:它将两种颜色相乘，导致图像更暗。
SCREEN:它具有与“multiply”效果相反的效果，并使用颜色的反值。
REPLACE:它将alpha值完全替换为另一个像素。
REMOVE:它使用其alpha强度从第二种颜色中删除像素。
OVERLAY:它是“multiply”和“screen”模式的混合。它将亮度值相乘并屏蔽黑暗值。它仅在2D渲染器中有效。
HARD_LIGHT:当灰度值高于50％时，将应用“screen”效果；当灰度值低于50％时，将应用“multiply”效果。它仅在2D渲染器中有效。
SOFT_LIGHT:它是“darkest”和“lightest”的混合。它的工作原理类似于“overlay”模式，但强度较低。它仅在2D渲染器中有效。
DODGE:它使浅色调变亮并增加了对比度，而忽略了深色。它仅在2D渲染器中有效。
BURN:它会淡化深色调并增加对比度，而忽略浅色调。它仅在2D渲染器中有效。
SUBTRACT:它基于两个像素的其余部分应用最终颜色。它仅在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]; 
}

输出：
blendMode-output

在线编辑：

环境设置：

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

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js | blendMode() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。