![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
コンピュータで画像を扱う場合には、色を数値で指定する必要がある。グレースケール(白黒)画像では、黒が0で明るくなるにしたがって大きくなる1つの数値で表す。最大値は255であることが多い。 カラー画像では3つの数値で指定するのが一般的である。その方法にはいくつかあるが、Processingでは、RGBとHSBを用いることができる。RGBではR(赤)、G(緑)、B(青)の光の強さをそれぞれ数値で表す。この場合も数値は0から255が一般的である。HSBでは、H(色調)、S(彩度)、B(明度)で色を表す。色調は、0が赤で、数値が大きくなるにつれて赤→黄→緑→水色→青→紫となり最大もまた赤に戻る。彩度は色の鮮やかさを表し、数値大きいほど色がくっきりし、0は白黒を表す。明度は明るさを表す。下の図は、明度を255として、円環の周に沿って反時計回りに色調が大きくなり、中心からの距離が彩度を表す。
Processingでは、色は描画の線と塗りつぶしのそれぞれに指定する。カラーを使う場合には、colorMode()を用いて、RGBとHSBのどちらを使うかを設定する。
| colorMode(RGB); | RGBを用いる。 |
| colorMode(HSB); | HSBを用いる。 |
何も指定しなければRGBである。線の色は、stroke()で、塗りつぶしの色はfill()で設定する。また、background()で背景色を設定し、その色で画面が塗りつぶされる。()の中には、1つから4つの数値が入る。
| fill(g); | 明るさgのグレースケール(白黒) |
| fill(g, alpha); | グレースケール(白黒)で、不透明度alpha |
| fill(x,y,z); | カラー。RGBのとき、R=x, G=y, B=zであり、HSBのとき、H=x, S=y, B=zである。 |
| fill(x,y,z,alpha); | カラーで、不透明度alpha |
ここで、不透明度は後ろに描いたものが透けて見える度合いであり、数値が小さいほど透けて見え、最大値を設定すると全く透けて見えなくなる。不透明度を指定しない場合は、最大値が設定されたものとみなされる。
noStroke();を実行すると、それ以降、線が描かれなくなる。noFill();を実行すると、それ以降、塗りつぶされなくなる。
以下の例では、最初に描いた横長の長方形の上に、不透明度の異なる5つの赤い長方形を描いている。
size(300,200); rect(10,80,280,40); noStroke(); fill(255,0,0); rect(30,10,40,180); fill(255,0,0,200); rect(80,10,40,180); fill(255,0,0,150); rect(130,10,40,180); fill(255,0,0,100); rect(180,10,40,180); fill(255,0,0,50); rect(230,10,40,180);
次の図を描け。大きさは横300x縦200とせよ。灰色の枠は描かなくてよい。緑はR=0, G=146, B=70、白はR=G=B=255、赤はR=236, G=43, B=55とせよ。
