HSVでの色指定

HSVは色情報を色相（hue⁠）⁠，彩度（saturation⁠）⁠，明度（brightness・value）で表す形式で，RGBと比較すると明るさ鮮やかさといった直感的な情報で指定できることが特長です。

FrocessingではcolorMode()の最初の引数を「HSV」と指定することで，HSVでの色指定を利用できます。このときstroke()やfill()の記述形式は次のようになります。

stroke( hue, saturation, brightness, alpha )

RGBと同様に透明度（alpha）は省略でき，値はcolorMode()で設定した範囲となります。

サンプルプログラム

プログラム（リスト3）は，色相と明度をX方向とY方向に対応させて塗りの色を変化させています。HSV指定を使うことで，色の階調変化を簡単にプログラミングできます。

var n:int = 10;

//線は描画しない
noStroke();

//HSVで色指定
//値の範囲を,色相(0～n),彩度(0～1),明度(0～n)に指定
colorMode( HSV, n, 1, n );

for ( var i:int = 0; i <= n; i++ ) {
  for ( var j:int = 0; j <= n; j++ ) {
    //塗りの指定
    fill( i, 1, n - j );
    
    //円の描画
    var cx:Number = 33 + 40 * i;
    var cy:Number = 33 + 40 * j;
    circle( cx, cy, 19 );
  }
}

基本シェイプの描画

次に円や矩形などの基本シェイプについて解説します。

基本となるシェイプ描画関数

基本シェイプの描画関数は以下の8つがあります。引数は全て数値（Number）です。

(x,y)の位置に点を描画します（strokeで指定した色で描画されます⁠）⁠。

point(x,y)

2点を結ぶ直線を描画します。

line(x1,y1,x2,y2)

3点を結ぶ三角形を描画します。

triangle(x1,y1,x2,y2,x3,y3)

4点を結ぶ四角形を描画します。

quad(x1,y1,x2,y2,x3,y3,x4,y4)

左上(x,y)に幅width，高さheightの矩形を描画します。第5，第6引数に半径を指定することで角丸の矩形を描画できます。

rect(x,y,width,height)

中心(x,y)に幅width，高さheightの楕円を描画します。

ellipse(x,y,width,height)

中心(x,y)に半径radiusの円を描画します。

circle(x,y,radius)

中心(x,y)，幅width，高さheight，開始角度begin，終了角度endの円弧を描画します。角度はラジアンで指定します。

arc(x,y,width,height,begin,end)

以上のシェイプは，stroke()，fill()で指定された色で描画されます。Graphicsクラスの塗り指定は，シェイプ描画の度にbeginFill()，endFill()を記述しなければいけませんが，Frocessingではその必要がありません。fill()で指定された色が保持され，自動的に塗りが適用されます。

サンプルプログラム

次のFlashは，以上のシェイプ描画をまとめたサンプルです。プログラムはWonderflでご覧ください。

rectMode

矩形（rect）を描画するとき，その位置を左上の座標ではなく中心の座標で指定したいことがあります。そのような場合，rectMode()により座標やサイズの指定方法を変更することができます。

rectMode( mode )

modeで指定できるのは，CENTER，CORNER，CORNERS，RADIUSの4つです。それぞれ次のような指定方法となります。

//CENTER
rect(centerX, centerY, width, height)
//CORNER
rect(left, top, width, height)
//CORNERS
rect(left, top, right, bottom)
//RADIUS
rect(centerX, centerY, halfWidth, halfHeight)

楕円を描くellipse()にも同様の設定を行うellipseMode()があります。rectMode()のデフォルトはCORNER，ellipseMode()はCENTERです。