#author("2019-05-21T17:07:22+09:00","default:qua","qua")
#navi(Processing/1はじめに)
*6色 [#d5d0c652]
コンピュータで画像を扱う場合には、色を数値で指定する必要がある。グレースケール(白黒)画像では、黒が0で明るくなるにしたがって大きくなる1つの数値で表す。最大値は255であることが多い。 
カラー画像では3つの数値で指定するのが一般的である。その方法にはいくつかあるが、Processingでは、RGBとHSBを用いることができる。RGBではR(赤)、G(緑)、B(青)の光の強さをそれぞれ数値で表す。この場合も数値は0から255が一般的である。HSBでは、H(色調)、S(彩度)、B(明度)で色を表す。色調は、0が赤で、数値が大きくなるにつれて赤→黄→緑→水色→青→紫となり最大もまた赤に戻る。彩度は色の鮮やかさを表し、数値大きいほど色がくっきりし、0は白黒を表す。明度は明るさを表す。下の図は、明度を255として、円環の周に沿って反時計回りに色調が大きくなり、中心からの距離が彩度を表す。 
#author("2019-05-21T17:09:42+09:00","default:qua","qua")

#ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/1-6-1.png)

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); 
 
#ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/1-6-2.png)

**【練習問題】 [#bcc6db77]
次の図を描け。大きさは横300x縦200とせよ。灰色の枠は描かなくてよい。緑はR=0, G=146, B=70、白はR=G=B=255、赤はR=236, G=43, B=55とせよ。 

#ref(http://www.ist.aichi-pu.ac.jp/lab/qua/~qua/pbl/processing/img/1-6-3.png)
トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS