![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
ProcessingのblendModeで、画像を表現するときのみえ方の違いを知りたいな。
ということで、画像の見え方の違いを10種類まとめました。
画像表現を変えたいときにblendModeを使うと、今までとは違った表現ができて、新しい発見があるかもしれません。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
参考にしてくださいね。
※記事内の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”);
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different1-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different1-1024x538.jpg)
画像2。
この先で書いているコードでは、
PImage img2;
img1 = loadImage(“2.jpg”);
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different2-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different2-1024x538.jpg)
【1】BLEND
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
初期設定のモード。
後に書いたコードの画像の方が表示されました。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different3-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different3-1024x538.jpg)
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
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
ADDは加算って意味。
白色を最大値として合成されるので、真っ白に。
組み合わせる写真によっては結果は違うと思います。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different4-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different4-1024x538.jpg)
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
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
SUBTRACTの意味は減算。
真っ黒になりました。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different5-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different5-1024x538.jpg)
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
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
DARKESTの意味は最も暗い。
最も暗い色を使いながら、表現されました。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different6-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different6-1024x538.jpg)
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
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
LIGHTESTの意味は最も明るい。
最も明るい部分の確認をしたいときに使えるなぁと感じました。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different7-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different7-1024x538.jpg)
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
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
黒っぽい表現になりました。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different8-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different8-1024x538.jpg)
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
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
EXCLUSIONは除外という意味。
にごった感じですね。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different9-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different9-1024x538.jpg)
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
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
MULTIPLYは掛け合わせるという意味。
ちょっとDIFFERENCEに似た感じの色合いになった。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different10-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different10-1024x538.jpg)
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枚の写真が重なって写ってますね。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different11-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different11-1024x538.jpg)
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みたいな表現。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different12-1024x538.jpg)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/06/processing-how-to-use-blendmode-express-images-look-different12-1024x538.jpg)
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);
ProcessingでblendModeで、画像を表現するときに気をつけたいエラー
- ADDなどを入力するときは大文字で
- SUBTRACTをSUBSTRACTと入力しないこと(両方とも何かを取り除くという意味)
【Processing】blendModeで画像を表現しているときに感じた疑問1つを解決
【Processing】blendModeで画像を表現する方法を学ぶと、世界の見え方がこう変わる
頭の中で、街並みを2枚撮影し、blendModeを使うとどうなるのかを考えることができるようになりました。
ちゃんとしたイメージをするのは難しい。
今日はblendModeのADDのイメトレしようか。みたいな感じで決めておくと練習しやすい。
blendModeで画像を使えば、作品のイメージを細かく調整して表現できるようになる
blendModeで画像を編集することは、料理でいう塩とこしょうみたいなものだと思います。
ちょっとした工夫で、画像表現を細かく調整したり、違ったものになるからです。
blendModeは使いこなすのは難しいが、使いこなすと画像の表現力がアップ。
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
![](https://watataku-artist-katsuyaku.com/wp-content/uploads/2024/03/watataku-hukidashi-light-blue.png)
それでは今日もレッツワクワクコーディング。