MENU
上達関連情報と、その過程の記録を発信
  1. ホーム
  2. Processing
  3. 【Processing】blend()の使い方【二つの画像や色を混ぜ合わせるのに使われる】

【Processing】blend()の使い方【二つの画像や色を混ぜ合わせるのに使われる】

広告
Processing Processingの構文
【Processing】blend()の使い方【二つの画像や色を混ぜ合わせるのに使われる】
  • URLをコピーしました！
ワタタク

今回の記事の目的はProcessingの「blend()」を理解し、自分なりに使ってみること。

この記事を書いた人
ワタタク
プロフィール
  • クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
  • コンセプトは「クリエイティブコーディング1万時間の歩き方」
  • 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）

記事内のProcessingのバージョンは4.3。

目次

【Processing】blend()について

blend()について
  • 「blend」は英語で「混ぜる」という意味
  • blend()関数は、二つの画像や色を混ぜ合わせるのに使われる
    • これを使うことで、素敵なグラデーションや合成効果を作り出すことができます
  • 構文：blend(sx, sy, sw, sh, dx, dy, dw, dh, mode)
    • blend(c1, c2, mode) は、c1とc2という二つの色を指定した「mode」で混ぜる（modeは14種類ある。次の項目にすべて書きました）
      • sx, sy: コピーする元の画像の左上のx座標とy座標
      • sw, sh: コピーする元の画像の幅と高さ
      • dx, dy: コピー先の画像の左上のx座標とy座標
      • dw, dh: コピー先の画像の幅と高さ
      • mode: ブレンドの方法（たとえば、「ADD」や「SUBTRACT」など）
  • 【注意点】

【Processing】blend()の使い方【画像とコード】

blend()を使って、鹿の画像の左半分に、花の画像を混ぜ合わせます。

【1】BLEND【色の線形補間: C = A * factor + B】

【1】BLEND【色の線形補間: C = A * factor + B】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, BLEND);

【2】ADD【白クリップを伴う加法ブレンド: C = min(A * factor + B, 255)】

【2】ADD【白クリップを伴う加法ブレンド: C = min(A * factor + B, 255)】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, ADD);

【3】SUBTRACT【黒クリップを伴う減法ブレンド: C = max(B – A * factor, 0)】

【3】SUBTRACT【黒クリップを伴う減法ブレンド: C = max(B - A * factor, 0)】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, SUBTRACT);

【4】DARKEST【最も暗い色のみが残る: C = min(A * factor, B)】

【4】DARKEST【最も暗い色のみが残る: C = min(A * factor, B)】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, DARKEST);

【5】LIGHTEST【最も明るい色のみが残る: C = max(A * factor, B)】

【5】LIGHTEST【最も明るい色のみが残る: C = max(A * factor, B)】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, LIGHTEST);

【6】DIFFERENCE【下地画像から色を減算する】

【6】DIFFERENCE【下地画像から色を減算する】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, DIFFERENCE);

【7】EXCLUSION【DIFFERENCEに似ていますが、極端ではない】

【7】EXCLUSION【DIFFERENCEに似ていますが、極端ではない】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, EXCLUSION);

【8】MULTIPLY【色を乗算します。結果は常に暗くなる】

【8】MULTIPLY【色を乗算します。結果は常に暗くなる】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, MULTIPLY);

【9】SCREEN【乗算の逆で、色の逆値を使用する】

【9】SCREEN【乗算の逆で、色の逆値を使用する】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, SCREEN);

【10】OVERLAY【MULTIPLYとSCREENのミックス。暗い値を乗算し、明るい値をスクリーン】

【10】OVERLAY【MULTIPLYとSCREENのミックス。暗い値を乗算し、明るい値をスクリーン】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, OVERLAY);

【11】HARD_LIGHT 【50%以上のグレーではSCREEN、低い場合はMULTIPLY】

【11】HARD_LIGHT 【50%以上のグレーではSCREEN、低い場合はMULTIPLY】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, HARD_LIGHT);

【12】SOFT_LIGHT【DARKESTとLIGHTESTのミックス。OVERLAYに似ていますが、厳しくない】

【12】SOFT_LIGHT【DARKESTとLIGHTESTのミックス。OVERLAYに似ていますが、厳しくない】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, SOFT_LIGHT);

【13】DODGE 【明るいトーンを明るくし、コントラストを増加させます。暗い部分は無視されます。IllustratorやPhotoshopでは「カラー・ドッジ」と呼ばれます】

【13】DODGE 【明るいトーンを明るくし、コントラストを増加させます。暗い部分は無視されます。IllustratorやPhotoshopでは「カラー・ドッジ」と呼ばれます】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, DODGE);

【14】BURN【暗い部分が適用され、コントラストが増加します。明るい部分は無視されます。IllustratorやPhotoshopでは「カラー・バーン」と呼ばれる】

【14】BURN【暗い部分が適用され、コントラストが増加します。明るい部分は無視されます。IllustratorやPhotoshopでは「カラー・バーン」と呼ばれる】
size(400, 400); // キャンバスサイズを400x400に設定

PImage deer = loadImage("deer.jpg"); // deer.jpgを読み込み
deer.resize(400, 400); // deer.jpgを400x400にリサイズ
background(deer); // リサイズしたdeer.jpgを背景に設定

PImage img = loadImage("flower.jpg"); // flower.jpgを読み込み
img.resize(400, 400); // flower.jpgを400x400にリサイズ

// 画像の左半分にblend()を適用
blend(img, 0, 0, 200, 400, 0, 0, 200, 400, BURN);

【Processing】blend()を使ってみた感想

写真が好きで、画像編集に興味があるので、blend()はかなり使える構文になりそうです。

使い方はかなり研究がいりそう。

ワタタク

それでは今日もレッツワクワクコーディング。

Processing Processingの構文
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次