前回はFrocessingの概要などを解説しましたが，今回は描画プログラムの基本となるAPI（線と塗りの色・基本シェイプ・キャンパスの変形）について解説します。

なお，今回のサンプルプログラムは全てfrocessing.display.F5MovieClip2Dがスーパークラスとなります。

• サンプルプログラムのダウンロード

色の指定方法

以下のプログラム（リスト1）と実行結果（図1）をご覧ください。

stroke( 20 );          //線の色指定
fill( 168, 192, 255 ); //塗りの色指定
circle( 150, 75, 50 ); //座標(150,75)に半径50の円を描画

このプログラムには描画の基本的な手順が記述されています。線と塗りの色指定とシェイプの描画です。まずは，stroke()，fill()による色指定について解説します。

線と塗りの色

FlashのGraphicsクラスでは線と塗りの色をlineStyle()，beginFill()で指定します。このとき色の値として24bitカラー（※1）を使いますが，Frocessingのstroke()，fill()では24bitカラー以外の値でも色指定を行うことができます。

線の色を指定するstroke()を例にみていきましょう。fill()の指定方法も同様です。

RGB（red,green,blue）を個別に指定します。値の範囲は0～255です。透明度（alpha）は0.0～1.0の範囲で，省略した場合は1.0となります。

stroke( red, green, blue, alpha )

グレースケール（gray）で色を指定します。値の範囲はRGBと同じで0～255です。透明度は省略できます。

stroke( gray, alpha )

Graphicsクラスと同じように24bitカラーで指定します。透明度は省略できます。値が255以下（0x0000CCなど）だとグレースケールとして処理されるので，このような場合は32bitカラー（※1）で指定します。

stroke( 0xRRGGBB, alpha )

32bitカラーで色と透明度を指定します。

stroke( 0xAARRGGBB )

線が描画されないようにします。塗りを無効にする場合はnoFill()を使います。

noStroke()

サンプルプログラム

次のFlashは，以上の指定方法をまとめたサンプルです。プログラムはWonderflでご覧ください。

※1：24bitカラー/32bitカラー

24bitカラーはHTMLなどで用いられる色値の形式です。赤，緑，青の色情報をそれぞれ8bit（0～255）で表現し、RGBを合わせて24bitのデータとなります（0xRRGGBB⁠）⁠。32bitカラーは24bitカラーに透明度（8bit）を加えた形式です（0xAARRGGBB⁠）⁠。

色値の範囲設定

RGBやグレースケールの色は0～255（透明度は0.0～1.0）の範囲で指定すると説明しましたが，colorMode()により範囲（最大値）を任意に変更することができます。

赤，緑，青，透明度の値の範囲を個別に設定します。透明度は省略できます。

colorMode( RGB, red, green, blue, alpha )

赤，緑，青，透明度のすべての値の範囲をrangeに設定します。

colorMode( RGB, range )

サンプルプログラム

次のプログラム（リスト2）では赤，緑，青の値の範囲を1:2:4に設定しています。そのため同じ値を指定した場合，赤が強い色で描画されます。

var n:int = 5;

//値の範囲を1:2:4に設定
colorMode( RGB, n, n*2, n*4 );

noStroke();
for ( var i:int = n; i >0; i-- ) {
  //塗りの指定
  fill( i, i, i );
  //円の描画
  circle( 465/2, 465/2, 40 * i );
}