加法混色と減法混色(1)

2012 / 09 / 13 by
Filed under: Coding の素 
Bookmark this on Delicious
[`livedoor` not found]
[`yahoo` not found]

加法混色と減法混色 – wonderfl build flash online

さて、色について、です。

今さら言うまでもないことですが、ディスプレイなど自らが光を発するものにおいては、赤(Red)、緑(Green)、青(Blue)の3色の量的な組み合わせで色は表現されます。色を重ねるたびに明るくなり、3色が等量、混ぜ合わされると白になることから加法混色と呼ばれますね。
そして3色は光の3原色とも呼ばれ、コンピュータ・プログラムの画像処理においては、それぞれの色のチャンネルを取り出して、いろいろ操作するわけです。

一方、混色は加法だけでなく、逆の減法混色というものも存在することは、これまた今さら言うまでもないこと。
減法混色は光を反射するもの、主に印刷物における話で、シアン(Cyan)、マゼンタ(Magenta)、イエロー(Yellow)が3原色になります。
色を重ねるたびに暗くなり、理論上、3色が等量、混ぜ合わされると黒になります。でも実際のところ黒がしっかり出ないので、たいていは上記3色のインクに黒を加え、4色の混合によってフルカラー印刷が実現されます。

加法混色が太陽なら減法混色は月といった趣ですかねー。

さて、ActionScript はコンピュータ・プログラム言語です
なので混色を扱うときは加法混色になるわけで、BitmapData#copyChannel というメソッドを使うことで扱うことができます。
一番取っつきやすい事例を wonderfl から挙げると、やはり clockmaker さんの RGB Separater

んじゃあ ActionScript で減法混色をテーマに何か作りたいよ、という欲求が生じた場合どないすんねん、というのが今回の話。

まぁ BitmapData#copyChannel で各チャンネルごとに BitmapData 作って、ブレンドモードでごにょごにょすれば何とかなるだろう、ということは容易に推測できますな。
二つの混色の原理とブレンドモードの種類を考えると、加法混色なら
BlendMode.ADD、減法混色なら BlendMode.SUBTRACT をチョイスすりゃあえぇでしょう。でもなぜか RGB Separater では
BlendMode.SCREEN が使われています。
しかし私としては言葉に忠実に BlendMode.ADD と BlendMode.SUBTRACT を使いたい。というわけで組んだコードが冒頭のもの。

最初に白で塗りつぶした BitmapData を作って、それを赤、緑、青のチャンネルごとに3つの BitmapData に分解します。
そしてボタンを押すたびに、各チャンネルごとの Sprite のブレンドモードを切り替えます。
その際、注意するのは一緒に背景色も変えなければならないこと。加法混色のときは背景色を黒、減法混色のときは背景色を白にしなければなりません。
なぜなら3原色の表示オブジェクトのブレンドモードがすべて BlendMode.ADD もしくは BlendMode.SUBTRACT になっているので、背景の色からも当然、影響されるから。

単純にブレンドモードと背景色の入れ替えで期待どおりの動きをしました。簡単ですね。
でも加法混色や減法混色を扱って作品らしきものを作るなら、ベタ塗りの BitmapData じゃなくて、写真を読み込んで分解したりしてみたいもの。

次回はそんなコードの話。



Comments

Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!





WP-SpamFree by Pole Position Marketing