blendModeで画像を表現するときの見え方の違いを効率よく確認する方法はない？

僕なりに考えた結果、photoshopの描画モードで確認するのが早いですね。他のソフトでもphotoshopの描画モードのような機能があるなら、そちらを使ってもいいですね。

【Processing】blendModeで画像を表現するときの見え方の違い【10種類】

2024年6月11日2024年7月20日

URLをコピーしました！

ワタタク

ProcessingのblendModeで、画像を表現するときのみえ方の違いを知りたいな。

ということで、画像の見え方の違いを10種類まとめました。

画像表現を変えたいときにblendModeを使うと、今までとは違った表現ができて、新しい発見があるかもしれません。

ワタタク

参考にしてくださいね。

この記事を書いた人

ワタタク

プロフィール

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

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

【Processing】blendModeの構文

blendModeの書き方
構文	blendMode(10種類のblendModeのどれか1つ);
10種類のblendModeのどれか1つの部分に入力する内容について	【1】BLEND 【2】ADD 【3】SUBTRACT 【4】DARKEST 【5】LIGHTEST 【6】DIFFERENCE 【7】EXCLUSION 【8】MULTIPLY 【9】SCREEN 【10】REPLACE
入力したらどうなるか	入力したblendModeの内容によって表現が変わる

【Processing】blendModeで画像を表現するときの見え方の違い【10種類】

BLEND
ADD
SUBTRACT
DARKEST
LIGHTEST
DIFFERENCE
EXCLUSION
MULTIPLY
SCREEN
REPLACE

上記の10種類のblendModeによる表現を、下記の2種類の画像を使って見え方の違いを確認していきます。

画像1。

この先で書いているコードでは、

PImage img1;
img1 = loadImage(“1.jpg”);

画像2。

この先で書いているコードでは、

PImage img2;
img1 = loadImage(“2.jpg”);

【1】BLEND

ワタタク

初期設定のモード。

後に書いたコードの画像の方が表示されました。

size(1200, 630);
blendMode(BLEND);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);

【2】ADD

ワタタク

ADDは加算って意味。

白色を最大値として合成されるので、真っ白に。

組み合わせる写真によっては結果は違うと思います。

size(1200, 630);
blendMode(ADD);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);

【3】SUBTRACT

ワタタク

SUBTRACTの意味は減算。

真っ黒になりました。

size(1200, 630);
blendMode(SUBTRACT);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);

【4】DARKEST

ワタタク

DARKESTの意味は最も暗い。

最も暗い色を使いながら、表現されました。

size(1200, 630);
blendMode(DARKEST);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);

【5】LIGHTEST

ワタタク

LIGHTESTの意味は最も明るい。

最も明るい部分の確認をしたいときに使えるなぁと感じました。

size(1200, 630);
blendMode(LIGHTEST);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);

【6】DIFFERENCE

ワタタク

黒っぽい表現になりました。

size(1200, 630);
blendMode(DIFFERENCE);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);

【7】EXCLUSION

ワタタク

EXCLUSIONは除外という意味。

にごった感じですね。

size(1200, 630);
blendMode(EXCLUSION);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);

【8】MULTIPLY

ワタタク

MULTIPLYは掛け合わせるという意味。

ちょっとDIFFERENCEに似た感じの色合いになった。

size(1200, 630);
blendMode(MULTIPLY);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);

【9】SCREEN

うっすらと2枚の写真が重なって写ってますね。

size(1200, 630);
blendMode(SCREEN);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);

【10】REPLACE

BLENDみたいな表現。

size(1200, 630);
blendMode(REPLACE);
PImage img1;
PImage img2;
img1 = loadImage("1.jpg");
img2 = loadImage("2.jpg");
image(img1, 0, 0);
image(img2, 0, 0);