P5.js 日本語リファレンス(blendMode)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の blendMode関数を説明します。

blendMode()

説明文

指定したモードに従って表示ウィンドウのピクセルをブレンドします。ソースピクセル(A)を表示ウィンドウ(B)に既にあるピクセルとブレンドするには、次のモードを選択できます。

• BLEND
  色の線形補間：C = A\*factor + B
  これはデフォルトの描画モードです。
• ADD
  AとBの合計
• DARKEST
  より暗い方の色が適用されます：C = min(A\*factor, B)。
• LIGHTEST
  より明るい方の色が適用されます。：C = max(A\*factor, B)。
• DIFFERENCE
  基になる画像から色を差し引きます。
• EXCLUSION
  DIFFERENCEに似ていますが, それほど極端ではありません。
• MULTIPLY
  色を重ねると, 結果は常に暗くなります。
• SCREEN
  反対の乗算。色の反転値を使用します。
• REPLACE
  ピクセルは他のピクセルを完全に置き換え, アルファ(透明度)値を利用しません。
• REMOVE
  アルファ強度がAのピクセルをBから削除します。
• OVERLAY
  MULTIPLYとSCREENのミックス。暗い値を乗算し, 明るい値をスクリーニングします。(2D)
• HARD_LIGHT
  50％を超えるグレーの場合は画面, 低い場合はMULTIPLY 。(2D)
• SOFT_LIGHT
  DARKESTとLIGHTESTの混合。 OVERLAYのように機能しますが, それほど厳しくありません。 (2D)
• DODGE
  明るいトーンを明るくし, コントラストを上げます。暗い部分は無視します。 (2D)
• BURN
  暗い領域が適用され, コントラストが増加し, 明るい部分は無視されます。(2D)
• SUBTRACT
  AとBの残り(3D)

※(2D)は, このブレンドモードが2Dレンダラーでのみ機能することを示します。
※(3D)は, このブレンドモードがWEBGLレンダラーでのみ機能することを示します。

構文

blendMode(mode)

パラメタ

• mode
  定数：キャンバスに設定するブレンドモード。
  BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, REMOVE, またはSUBTRACTのいずれか

例

function setup() {
  createCanvas(400, 400);
}

function draw() {
  blendMode(LIGHTEST); // 左のクロス
  strokeWeight(30);
  stroke(80, 150, 255);
  line(25, 25, 75, 75);
  stroke(255, 50, 50);
  line(75, 25, 25, 75);

  blendMode(MULTIPLY); // 中央のクロス
  strokeWeight(30);
  stroke(80, 150, 255);
  line(125, 25, 175, 75);
  stroke(255, 50, 50);
  line(175, 25, 125, 75);

  blendMode(OVERLAY); // 右のクロス
  strokeWeight(30);
  stroke(80, 150, 255);
  line(225, 25, 275, 75);
  stroke(255, 50, 50);
  line(275, 25, 225, 75);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。