プログラミングで色を混ぜる
こんばんは。ひろし@Y.C.LABです。
今日は色を混ぜるプログラミングについて考えてみたいと思います。
色の表現方法
色を表現する方法はいろいろとあって、よく知られているのは、RGB（レッド、グリーン、ブルー）の割合から色を表現するもの。ちなみに最大値は255。
赤だったらRGB = 255,0,0みたいな感じ。
これは、光の三原色である赤と緑と青を組み合わせていろんな色を表現しようというもので、加法混色と呼ばれていて、足せば足すほど白に近づいていくという方法。
主に映像の分野で使われている。
一方、印刷の分野で使われているのは、CMYK（シアン、マゼンタ、イエロー、キープレート（黒））というもの。
足していけば黒に近く減法混色と呼ばれるもの。
プリンタのインクなんかはこっちの表現ですね。
今回はプログラミングで色を混ぜることを考えたいと思うので、RGBの表現をベースに進めたいと思います。
色の足し算
プログラミングで、例えば赤（RGB=255,0,0）と青（RGB=0,0,255）を足すということを考えてみる。
（１）正規化混色（勝手に名前を付けています）
単純に足すと、RGB=255,0,255となってそれらしい紫になる。
では、それにさらに赤を混ぜたらどうなるか。
また単純に足すと、RGB=510,0,255となり、最大値の255を超えてしまう。
ここで、正規化をして、255を超えたものは255となるように調整すると、
RGB=255,0,127となる。
こんな感じで、単純に足して、255を超えた場合は、最大値が255となるように割り算をする方法をここでは正規化混色と呼ぶことにした。
プログラミング的に表すと次の感じだ。（混ぜる色を（R1,G1,B1）と（R2,G2,B2）として、混ぜ合わせた後の色を（R3,G3,B3）とする）
R3 = R1 + R2 ;
G3 = G1 + G2 ;
B3 = B1 + B2 ;
MaxRGB = Max(R3,G3,B3);
if(MaxRGB > 255){
n = MaxRGB / 255 ;
R3 = R3 / n ;
G3 = G3 / n ;
B3 = B3 / n ;
}
しっくり来る人とこない人がいそうな結果。。
これ例えば黒（0,0,0）あるいは、黒に限りなく近い色を足した場合、何も起こらないんです。0を足すだけなので。そこで次の方法を考える。
（２）平均化混色（これも勝手に名前付けてます）
名前から想像がつくと思いますが、混ぜる２色のRGBそれぞれの平均を取っていく方法。
赤（RGB=255,0,0）と青（RGB=0,0,255）を足すと、RGB=127,0,127となる。（念の為（255+0）/ 2 = 127）
これにさらに赤（RGB=255,0,0）を足すと、RGB=191,0,63となる。
R：（127 + 255）/ 2 = 191
B：（127 + 0）/ 2 = 63
のため。
プログラミング的に書く必要はないと思うけど、
R3 = ( R1 + R2 ) / 2 ;
G3 = ( G1 + G2 ) / 2 ;
B3 = ( B1 + B2 ) / 2 ;
なんとなくそれっぽく見えてきた！
からこれで良しとしよう。
ってか（１）の正規化混色で、正規化しないで255を超えたものは255のままにしておくというのもありだと思う。ただ、いずれにしろ、足していくだけでは、黒に近付けることができないという点は変わらない。
まさに加法混色をしているということだ。
ってか、色ってもっと複雑で、明度とか彩度とかいろんな要素があるし、そもそも人によってや目の色によっても見え方が違うからこれだって方法はないんじゃないかと思うし、ググればなんだか難しそうな式も見つけちゃったりしたんだけど、それらは一旦置いておくことにする。
まとめ（と見せかけてアプリの宣伝）
で、それっぽく見えた平均化混色の手法を使って（手法ってほど大したものではないが）色を混ぜて遊ぶアプリを作りました。
画面上部の丸のお手本の色になるように下の５色のパレットから３つの色を選ぶ感じです。
超絶シンプル。
ここで、注意したいのは、絵の具っぽいこと言ってるけど、結局は上で紹介している平均化混色を行なっているだけなので、実際に混ぜた感じと違うんだけどーってことは普通にありえます。
逆にプログラミングで混色するならこんな手法がいいよ！ってのを知ってる人は教えてください。
また、アプリももっとこうしたらいいのにってのがある人は言ってください。
全力で改善します。
ひろし@Y.C.LAB (@yc_lab) | Twitter
ツイッターでDMでもしてください。
最後に、自分みたいな素人が配色に困った時に参考にしている本を紹介して、今までで一番長いブログを終わりにしようと思います。
100以上のコンセプトに沿った色が９色ずつ紹介されているので、パッと開いたところや、パラパラめくって気になった配色を使うことができます。もちろん、RGBやCMYKの値も全て記載されているので、超便利です。
次回はこの混色アプリの作り方（unityで作りました）を紹介しようかと思います。
それではお休みなさい。
