FrocessingではじめるActionScriptドローイング

第2回 Frocessingの基本描画API

この記事を読むのに必要な時間:およそ 5 分

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

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

色の指定方法

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

リスト1 円の描画

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

図1 リスト1の実行結果

図1 リスト1の実行結果

このプログラムには描画の基本的な手順が記述されています。線と塗りの色指定とシェイプの描画です。まずは,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に設定しています。そのため同じ値を指定した場合,赤が強い色で描画されます。

リスト2 ColorModeSample

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 );
}

著者プロフィール

高輪知明(たかなわともあき)

デザイナー/ディレクター。2008年初夏より「SparkProject」に参加し,今回紹介する「Frocessing」などをコミット。http://nutsu.comでマイペースに個人活動継続中。

コメント

コメントの記入