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

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

blend()

説明文

指定されたブレンドモードを使用して、ある画像から別の画像にピクセルの領域をコピーして操作を実行します。

構文

blend(srcImage, sx, sy, sw, sh, dx, dy, dw, dh, blendMode)

blend(sx, sy, sw, sh, dx, dy, dw, dh, blendMode)

パラメタ

• srcImage
  p5.Image：コピー元画像

• sx
  Number：コピー元画像の左上隅のX座標

• sy
  Number：コピー元画像の左上隅のY座標

• sw
  Number：コピー元画像の幅

• sh
  Number：コピー元画像の高さ

• dx
  Number：コピー先画像の左上隅のX座標

• dy
  Number：コピー先画像の左上隅のY座標

• dw
  Number：コピー先画像の幅

• dh
  Number：コピー先画像の高さ

• blendMode
  定数：ブレンドモード。 BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, NORMALのいずれか。

例1

let img0;
let img1;

function preload() {
  img0 = loadImage('assets/mountain.jpg');
  img1 = loadImage('assets/heart-tree.jpg');
}

function setup() {
  createCanvas(300, 600);
  
  // 上に山の画像、中央に木の画像を表示する
  image(img0, 0, 0);
  image(img1, 0, 200);

  // 下に山の画像を表示して、右半分に木の画像をブレンドする
  image(img0, 0, 400);
  blend(img1, 150, 0, 150, 200, 150, 400, 150, 200, OVERLAY);
}

実行結果

著作権

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) に従います。