Processingでスケッチ(2)
はじめに
前の記事で図形を描く方法を述べた。
今回はこれらに色を付けていこうと思う。
Processingにおける「色」
Processingでは、色は赤、緑、青を混ぜて作るRGB方式がデフォルトである。もちろん、RはRed、GはGreen、BはBlueからきている。
色に関する命令を記述する際には、基本的にパラメーター(数値)はこの3つを使うことが多い。
図形を塗りつぶす
実際に図形を塗りつぶしてみよう。
・命令
fill( R の数値, Gの数値 , Bの数値 );
この命令の後に描いた図形はすべて指定した色で塗りつぶされる。
各値の最大値は255で、値が大きければ大きいほどその要素が強くなる。
例えば、fill(255,0,0);ならば赤になる。
黄色はfill(255,255,0); で、紫はfill(255,0,255);である。僕はfill(0,255,255);が好みである。
ちなみに、fill(0,0,0);ならば黒、fill(255,255,255);ならば白である。
また、黒や白のように値がすべて同じ場合は
fill(数値);
と表してもよい。
この場合、255段階のグレースケールになる。
プログラムを実行する順番
プログラムの実行順序について考えよう。
プログラムは基本的に、上から下の順番で実行される。
よって、円のあとに四角形を重ねて描いた場合、四角形が前面に出ることになる。
だから、size();などはなるべく初めに書こう。
背景を塗りつぶす
図形だけでなく、時には背景を塗りつぶしたいこともあるだろう。キャンバスいっぱいに大きな四角形を描くというのも一つの手だが、Processingには背景を塗りつぶす命令が用意されている。
・命令
background( R , G , B );
実は、この命令が実行されるとそれまで描かれていた図形も塗りつぶされてしまう。図形を描く前に記述しよう。
塗りつぶさない
図形は最初白で塗りつぶされているが、完全に透明な図形を描きたいこともあると思う。
・命令
noFill();
パラメーター(数値)はない。つまり、上記をそのままコピペしてもよい。
Processingにおける単語の区別
Processingの命令において、2単語から成る命令は後ろの単語の頭文字が大文字になる。
例えば、前述のnoFill();の場合、no+fillなのでnoFillになる。
透過度
これまで、RGBやグレースケールのみを扱ってきたが、半透明にしたり、中途半端に透かしたいこともあるだろう。
色の命令にはさらにもう一つパラメータを追加することができる。
例えば、
fill(255,0,0,255);
とすると、真っ赤に塗りつぶされるが、
fill(255,0,0,0);
とすると、透明になる。
fill(255,0,0,100);
とすると、半透明のようになる。
終わりに
今回は内容が多く、初めて読む人にとっては少々重かったかもしれない。
実は、ここに乗っている全ての情報が必ずしも必要とは限らない。目的の達成のために必要のない情報は読み飛ばしてもらっても構わないのだ。