MENU
トップページに、Processingについて書いた記事を、辞書のように見つけやすくしてみました
Processing上達の過程
  1. ホーム
  2. Processingの構文
  3. 【Processing】blendMode使って図形を描いたときの見え方の違い【10種類】

【Processing】blendMode使って図形を描いたときの見え方の違い【10種類】

Processingの構文
当ブログ記事には広告が含まれている場合があります
【Processing】blendMode使って図形を描いたときの見え方の違い【10種類】
  • URLをコピーしました！
ワタタク

ProcessingのblendModeを使って図形を描いたときの、見え方の違いをまとめておきたいな。

ということで、ProcessingのblendMode10種類を使って図形を描き、どう見え方が変わるのか画像でまとめました。

やってみた結果、図形で重なっている部分の色を変えたいときの資料として使えるようになりました。

ワタタク

背景白と背景黒での見え方の違いとコードを載せているので、参考にしてください。

この記事を書いた人
ワタタク
当ブログがはじめての方へ
  • クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
  • コンセプトは「クリエイティブコーディング上達のための参考書」
  • 参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

※記事内の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種類】

以下の順でProcessingのblendModeで図形を描いたときの、見え方の違いが分かる画像を載せています。

  • BLEND
  • ADD
  • SUBTRACT
  • DARKEST
  • LIGHTEST
  • DIFFERENCE
  • EXCLUSION
  • MULTIPLY
  • SCREEN
  • REPLACE

円で重なっている部分がなぜその色になるのか説明はできないですが、画像を見て「こんな感じになるんだ。」と参考にしてもらえるかと思います。

【1】BLEND（色が重なる）

背景白。

背景黒。

コード。

size(900, 900);
background(255);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(BLEND);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);

//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

BLENDは初期設定。

Blendは混合するという意味だけど、Processingにおいては重なると訳した方が分かりやすいです。

後に書いたコードの色が重なりますね。

【2】ADD（白色を最大値とする）

ワタタク

Addの意味は加算。

背景白。

背景が白で白が多く、白色が最大値として表現されるので、真っ白になったと思っております。

背景黒。

コード。

size(900, 900);
background(255);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(ADD);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);


//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

【3】SUBTRACT（黒色を最小値とする）

ワタタク

SUBTRACTの意味は減算。

背景白。

背景黒。

コード。

size(900, 900);
background(255);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(SUBTRACT);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);


//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

【4】DARKEST（最も暗い色を使う）

ワタタク

Darkestの意味は、最も暗い

背景白。

背景黒。8

コード。

size(900, 900);
background(255);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(DARKEST);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);


//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

【5】LIGHTEST（最も明るい色を使う）

ワタタク

Lightestの意味は、最も明るい。

背景白。

背景黒。

コード。

size(900, 900);
background(0);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(LIGHTEST);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);


//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

save("processing-how-to-use-blendmode-shapes10.jpg");

【6】DIFFERENCE（基になるイメージから色を減算）

ワタタク

Processingのdifferenceの意味は、顕著な変化が適しているかもしれない。円の重なってる部分の色がすごく変わるから。

背景白。

背景黒。

コード。

size(900, 900);
background(255);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(DIFFERENCE);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);


//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

【7】EXCLUSION（DIFFERENCEに似ている変化）

ワタタク

Exclusionは除外という意味。

上の項目のDIFFERENCEに似た変化。背景が黒の方で、円が重なっている部分の色が、DIFFERENCEと違った色になっている。

背景白。

背景黒。

コード。

size(900, 900);
background(255);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(EXCLUSION);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);


//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

【8】MULTIPLY（両方の色をかけあわせて、結果は必ず暗くなる）

ワタタク

Multiplyは掛け合わせるという意味。たくさん重ねるという意味でも分かりやすい。

乗算ともいう。

背景白。

背景黒。

コード。

size(900, 900);
background(255);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(MULTIPLY);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);


//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

【9】SCREEN（MULTIPLYの逆）

ワタタク

Screenの結果は明るくなる感じ。

背景白。17

背景黒。18

コード。

size(900, 900);
background(255);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(SCREEN);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);


//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

【10】REPLACE（BLENDみたいな効果になっている）

ワタタク

Replaceはとって変わるという意味なんだけど、図形で使ってみると色が重なっている。

背景白。

背景黒。

コード。

size(900, 900);
background(255);//背景を黒にする場合は255を0に変える
noStroke();
blendMode(REPLACE);
colorMode(RGB);

//上段左の楕円 
//blendMode使用前のRGBで色は赤
fill(255, 0, 0);
ellipse(200, 200, 150, 150);
ellipse(100, 200, 150, 150);


//上段真ん中の楕円
//blendMode使用前のRGBで色は緑
fill(0, 255, 0);
ellipse(500, 200, 150, 150);
ellipse(400, 200, 150, 150);

//上段右の楕円
//blendMode使用前のRGBで色は青
fill(0, 0, 255);
ellipse(800, 200, 150, 150);
ellipse(700, 200, 150, 150);

//真ん中左の楕円
//blendMode使用前のRGBで色は水
fill(157, 204, 225);
ellipse(200, 450, 150, 150);
ellipse(100, 450, 150, 150);

//中心の楕円
//blendMode使用前のRGBで色は紫
fill(167, 87, 168);
ellipse(500, 450, 150, 150);
ellipse(400, 450, 150, 150);

//真ん中右の楕円
//blendMode使用前のRGBで色はピンク
fill(234, 145, 152);
ellipse(800, 450, 150, 150);
ellipse(700, 450, 150, 150);

//下段左の楕円
//blendMode使用前のRGBで色は黄
fill(255, 255, 0);
ellipse(200, 700, 150, 150);
ellipse(100, 700, 150, 150);

//下段真ん中の楕円
//blendMode使用前のRGBで色はオレンジ
fill(255, 165, 0);
ellipse(500, 700, 150, 150);
ellipse(400, 700, 150, 150);

//下段右の楕円
//blendMode使用前のRGBで色は白
fill(255);
ellipse(800, 700, 150, 150);
ellipse(700, 700, 150, 150);

ProcessingのblendModeで図形を描くときに、気をつけたいエラー

blendModeのMを大文字で書くこと。

blendMode(ADD);やblendMode(SCREEN);など、SCREENの部分を書くところは大文字。

ワタタク

大文字にするのは忘れがちなので気をつけること。

【Processing】blendModeで図形を描いていたときに感じた疑問1つを解決

途中で別のblendModeに変えることはできる？

できます。

blendMode(MULTIPLY);を書いたあとに、blendMode(BLEND);など、変えたいモードを書けば変更できます。

【Processing】blendModeで図形を描くときの使い方を学ぶと、世界の見え方がこう変わる

色の重なりをイメージしやすくなります。

あなたの好きなblendModeを見つけ、どのように図形の重なった部分の色が変わるのか知っておくと、日頃から色の重なりを使ってどのように表現していくのか練習しやすくなります。

Processingで図形の重なった部分の色を変えたいときは、blendModeを使ってみると解決する場合もある

Processingで図形を描き、重なった部分はblendModeを使うとよさそうです。

ただ、デメリットとして細かい色の調整ができないので、イメーしした通りの色にならないなら、自分で色をつくるしかないですね。

ワタタク

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

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