ブレンドモードってなに?! コード付きの徹底解説!! 【 Processing 実践編 No.4 】
こんにちはみおです！
今回は『 ブレンドモード 』について解説をしていきたいと思います。
ブレンドモードは実践編No.1で出てきましたが、あまり詳しく説明はしていなかったかなと思ったので、今回このような記事にしました。
＜実践編No.1＞
どんどん広がっていく！？ 大量の図形を同時に操作する方法 【 Processing 実践編 No.1 】 - Processingの基礎と応用
まずProcessingってなに？という方はこちらの記事をご覧ください。
Processingとは一体なに⁈ 【 特徴とProcessingを使って出来る事 】 - Processingの基礎と応用
それでは早速やっていきましょう！
今日の作品
今日紹介するコードをアレンジして作れる作品がこちら
静止画にするとこのような感じになります。
このコードは最後に紹介しているので、ぜひ最後まで見ていってください。
ブレンドモードってなに？
まずブレンドモードについて説明をしていきます。
ブレンドモードとは、下にあるレイヤーに対して上のレイヤーがどういった合成をするかを設定できる機能の事です。
つまり、どのように色が付け足されていくのかという事になります。
ブレンドモードの設定は『 blendMode(); 』で変更することができます。
ブレンドモードの種類
次にどのような選択が出来るのか、紹介していきたいと思います。
- BLEND : 線型に色を補完する
- ADD : 色を加算する 混色するほど白に近く
- SUBTRACT : 色を減算する 混色するほど黒に近づく
- DARKEST : 最も暗い色になる
- LIGHTEST : 最も明るい色になる
- DIFFERENCE : 下のレイヤーとのイメージの差分
- EXCLUSION : ↑に近いが、より極端な効果になる
- MULTIPLY : 色を乗算する
- SCREEN : ↑の逆 混色した色を反転する
- REPLACE : 全てのピクセルが別の色に置換される
このような種類があります。
その中でも『ADD』と『BLEND』は使われることが多いです。
されではブレンドモードを使って作品を作っていきましょう！
1. 実践編No.3のコードを使って準備をしよう
まずは実践編No.3のコードを使って準備をしていきます。
下のように入力してみてください。
ここまでが分からないよという方はここからチェックしてみてください。
図形が浮かび上がって消える！？ 大量の図形を動かそう 【 Processing 実践編 No.3 】 - Processingの基礎と応用
『 background 』の位置を変えよう
続いて background ( 0 ) ; の位置を変えていきます。
今 void draw() { } の中にある background ( 0 ) ; を、void setup () { } の中に移し変えてください。
ここまでは大丈夫ですか？
それでは早速やっていきましょう！
2. ブレンドモードを使ってコードを描いてみよう
『 size 』の中にモード要素を追加しよう
まずは size(); の中にモードの要素を付け足していきます。
モードは size の中の3つ目の要素として加わります。
そして、size ( 幅, 高さ, モード ) ; となります。
早速コードに起こしてみましょう！
size ( 800, 600, P2D ) ;
これを付け加えてください。
P2Dとは高速な2次元の描画をする時に使われるものです。
ブレンドモードを使用する時にはセットでついてくる事が多いです。
『 blendMode 』を使ってモードを選択しよう
続いてブレンドモードを選択していきます。
ここでは『 ADD 』で選択していこうと思います。
void draw() { } の中の noFill(); の下に、
blendMode ( ADD ) ;
と入力してください。
これでブレンドモードの設定が出来ました！
ADDは加算のモードで、混色すればするほど白に近づいていきます。
ここまでが入力出来たらコードを見直してみてください。
見直して大丈夫そうだったら、プログラムを実行してみてください。
このようになっていたら完璧です。
ちなみにブレンドモードを使用しない場合はこうなります。
分かりにくいですが、違いが分かりますかね？
これは本当に好みの問題なので、自分なりに色々試してみてください。
今日の作品のコード紹介
最後に今日の作品のコードを紹介したいと思います。
コードはこちらです。
今日のまとめ
今回はブレンドモードについて説明をしてみました。
この記事が少しでも参考になれば良いなと思います。
また、TwitterのDMとかにもどんどん質問募集しているので、分からない事があれば、ぜひ質問してください！
みお🐰 @大学生プログラマー (@mio_Processing) | Twitter
という事で今回はこの辺で終わりにしたいと思います。
また次回も見てもらえると嬉しいです！
合わせて読みたい
図形が浮かび上がって消える！？ 大量の図形を動かそう 【 Processing 実践編 No.3 】 - Processingの基礎と応用
入門編に出てきた単語一覧 No.2 〜 No.12 【 Processing 入門編 No.13 】 - Processingの基礎と応用
"大きさ" と "色" が変化していくアニメーションの作り方【 Processing 入門編 No.9 】 - Processingの基礎と応用
