processingと色 (RGBとHSB)

目的

RGBについて理解する。prosessingでのRGBの扱いについても理解する。

RGBとは

色の加法混色

光の三原色という言葉は中学生か小学生の時に聞いたことがあるはずである。

色は加法混色と減法混色がある。

RGBは加法混色であり、異なる色を混ぜ合わせ、別の色を生成する。そのもととなる色を三原色とよび、赤青緑である。

それぞれRed Green Blueの頭文字で、256段階でそれぞれの値を表し、$(r,g,b) $は$0\leq r,g,b \leq 255$ の数値で表される。 2563=16,777,216 つまり、$1677$ 万色を表示できる。

ただ、RGBも万能というわけではなく、

www.cybernet.co.jp

にある通り、等色関数で赤の値が負になる範囲がある。

人間が色を感じるプロセスには

www.ccs-inc.co.jp

のサイトが大いに参考になるだろう。

RBGはいろいろな定義があり、

www.enjoy.ne.jp

が参考になる。

processingのRGB

基本的な使い方

int r,g,b;
r=10;
g=180;
b=100;
fill(r,g,b);

rect(0,0,width,height);

のように、

fill(int(r),int(g),int(b));

でRGB値で図形の色を塗ることができる。

www.musashinodenpa.com

基本、processingは初期設定がRGBであり、fill()、stroke()、background()、color()はすべてRGB値orグレイスケールでとられる。

color型

color型が存在しており

color col1=color(255,255,0);
color col2=color(0,255,255);
fill(col1);
stroke(col2);

rect(0,0,width,height);

のように、一つの変数に色を入れることができる。 勿論、配列に入れることもできるので、配列で管理するともっと分かりやすくなる場合がある。

colorMode

もちろん、コンピュータ上で色を表すのはRGB値だけではない。 processing.org

このリファレンスを見てくださいで終わりでもよいが。。 RGBのほかにHSBもprocessingでは使える。その切り替え時に使う。

それぞれの値の最大値もここで決めることができる。

RGB

RGB値は人間の直感的な色の操作を数値でできない。例えば、今の緑色をもう少し黄色味を加えたいとか薄くしたいといった時にあまりうまく調色できない。

HSBとcolorMode

ここで自分の失敗を書いていく.. processingのHSBの標準は$0\leq H\leq 360,0\leq S\leq 100,0\leq B\leq 100$だと思っていた。でも違った。これで

random(0,360);

を使ってランダムな色をHSBで作ろうとしたら全部黒色になってしまった。おかしいなと思ったら、標準であるとそれぞれの最高値は$(H,S,B)=(255,255,255)$であった..

なんという罠。

つまり、

colorMode(HSB,360,100,100);

とすれば自分が想定した値のHSVの色が得られることがわかった。ひどE

colorMode(HSB,360,100,100,100);

自分は透明度も付けたいのでこうするかな..

続きみたいなもの-> kumohara-tagebuch.hatenablog.com