FrocessingではじめるActionScriptドローイング
第3回 アニメーションとイベント処理
前回は基本描画APIを使って静止画を描くプログラムを紹介しましたが，今回はアニメーションやマウスイベントなどを使った動的なグラフィックの描画について解説します。また，曲線の描画，乱数の利用についても解説します。
動きのあるグラフィックの描画
まずは，以下のプログラム（リスト1）と実行結果をご覧ください。前回解説したキャンバスの回転の例（TransformSample）に動きを加えたものです。
リスト1 AnimationSample
package {
import frocessing.display.F5MovieClip2D;
[SWF(width=465,height=465,backgroundColor=0x000000)]
public class AnimationSample extends F5MovieClip2D
{
private var n:int;
private var r:Number;
private var a:int;
//描画プログラムの初期化(ADDED_TO_STAGE)
public function setup():void //・・・・・(3)
{
n = 30;
r = 2*Math.PI/n;
a = 0;
colorMode( HSV, n, 1, 1 );
rectMode( CENTER );
noStroke();
}
//一定間隔で描画を実行する(ENTER_FRAME)
public function draw():void //・・・・・(1)
{
//キャンバスをステージの中心へ移動
translate( 465/2, 465/2 );
//キャンバスを角度a*r回転
rotate( r * a ); //・・・・・(2)
//描画
for ( var i:int = 0; i < n; i++ ) {
rotate( r );
fill( i, 1, 1 );
rect( 150, 0, 36, 10, 4, 4 );
}
a++;
}
}
}
図1 リスト1（AnimationSample）の実行結果
描画関数 draw
前回までは描画プログラムをコンストラクタ内に記述していましたが，リスト1ではdraw()関数内に場所を変えています(1)（注1）。draw()は一定の時間間隔で繰り返し実行される特別な関数です。時間間隔はフレームレートで指定した値によって決まります。フレームレートが30であれば間隔は1/30秒です。
public function draw():void { }
グラフィックはdraw()が実行される度にクリアされ，毎回新しく描画されることになります。リスト1ではキャンバスの回転角度を変化させることでグラフィックに動きを与えています(2)。
drawの制御
draw()は自動的に繰り返し実行されますが，次の関数で停止・再開を制御できます。
noLoop() //draw()を停止
loop() //draw()を再開
draw()の描画プログラムを明示的に実行する場合はredraw()を使います。
redraw() //draw()による描画を実行
- 注1
- frocessing.display.F5MovieClipを拡張して描画プログラムを記述する場合は，コンストラクタかdraw()のいずれかで描画が実行される必要があります。他の場所で実行したとき，描画の前後処理がなせれずにグラフィックが描画されないことがあります。
初期化関数 setup
リスト1のsetup()はプログラムの表示時に実行されます(3)。繰り返し実行する必要がない初期化の処理などを記述します。
public function setup():void { }
draw()はsetup()の実行後に開始されます。
イベントとの対応
setup()とdraw()は自動的にFlashのイベントに割り当てられます。次の表で関数と対応するイベントを確認してください。
表1 イベントとの対応
| 関数名 | イベント |
|---|---|
| draw | Event.ENTER_FRAME |
| setup | Event.ADDED_TO_STAGE |
※クラス内でこれらの関数を実装する場合はpublic属性を指定する必要があります。
高輪知明（たかなわともあき）
デザイナー／ディレクター。2008年初夏より「SparkProject」に参加し，今回紹介する「Frocessing」などをコミット。http://nutsu.comでマイペースに個人活動継続中。
FrocessingではじめるActionScriptドローイング
- 第4回 スケッチしてみよう
- 第3回 アニメーションとイベント処理
- 第2回 Frocessingの基本描画API
- 第1回 はじめてのFrocessing
