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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。