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

第3回 アニメーションとイベント処理

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

マウスとキーボードの処理

AS3でマウスやキーボードのイベント処理を行う場合はイベントリスナーを記述する必要がありますが,Frocessingではイベントに対応した名前で関数を記述するだけでイベントを受け取ることができます。AS2のイベント処理と同じようなものです。

イベント関数

次のFlashはリスト1にマウスイベント処理を行うプログラムリスト2を追加したものです。マウスを押すとアニメーションが停止し,離すと再開されます。

リスト2 マウスイベント処理

・・・
//MOUSE_DOWNイベント時に実行
public function mousePressed():void {
  noLoop();
}

//MOUSE_UPイベント時に実行
public function mouseReleased():void {
  loop();
}
・・・

図2 リスト2(AnimationSample2)を追加した実行結果

マウス・キーボードイベントに対応した関数は次の6つです。

※関数名はProcessingに準じているためFlashのイベント名と異なります。

表2 マウス・キーボードのイベント関数

関数名イベント
mousePressedMouseEvent.MOUSE_DOWN
mouseReleasedMouseEvent.MOUSE_UP
mouseClickedMouseEvent.CLICK
mouseMovedMouseEvent.MOUSE_MOVE
keyPressedKeyboardEvent.KEY_DOWN
keyReleasedKeyboardEvent.KEY_UP

マウス・キーボードのプロパティ

次のプロパティは,よく使われるマウスとキーボードの状態を示します。

表3 マウス・キーボードのプロパティ

プロパティ状態
isMousePressedマウスが押されている(Boolean)
pmouseX直前のマウス座標(Number)
pmouseY直前のマウス座標(Number)
isKeyPressedキーが押されている(Boolean)
keyCode最後に押されたキーコード(uint)

曲線の描画

Graphicsクラスでは2次ベジェ曲線(curveTo)を使って曲線を描画することができますが,描きたい曲線によってはプログラムが冗長になる場合があります。Frocessingは2次ベジェ曲線に加えて,3次ベジェ曲線,スプライン曲線のAPIが提供されており,場合によって使い分けることができます。

今回はスプライン曲線について解説します。

スプライン曲線

スプライン曲線は任意の座標を通る滑らかな曲線を描きたい場合に適しています。ベジェ曲線のようにコントロール点を指定する必要がありません図3)。

図3 2次ベジェ曲線とスプライン曲線

図3 2次ベジェ曲線とスプライン曲線

4点を指定してスプライン曲線を描画します。実際に描画されるのは(x2,y2),(x3,y3)を結ぶ曲線です。

curve( x0, y0, x1, y1, x2, y2, x3, y3 )

curveVertex

より複数の座標を指定して連続した曲線を描画する場合はcurveVertex()を使いますリスト3)⁠前後に記述するbeignShape(),endShape()は座標の開始と終了を示します。curve()と同様に最初と最後の座標には曲線が描画されない点に注意してください。

リスト3 curveVertex

beginShape();
curveVertex( x0, y0 );
curveVertex( x1, y1 );
curveVertex( x2, y2 );
curveVertex( x3, y3 );
curveVertex( x4, y4 );
・・・
endShape();

第1回で紹介したサンプルコードFrocessingSampleはこの方法で曲線を描画しています。

vertex

vertex()はcurveVertex()と同じように複数の座標を指定する関数で,曲線ではなく直線が描画されますリスト4)⁠GraphicsクラスのmoveTo(),lineTo()に該当します。

リスト4 vertex

beginShape();
vertex( x0, y0 );
vertex( x1, y1 );
vertex( x2, y2 );
・・・
endShape();

次のFlashはマウスドラッグにより曲線(curveVertex)を描画するプログラムです。何かキーを押すと曲線が直線(vertex)となるので違いを確認してみましょう。プログラムはWonderflでご覧ください。

著者プロフィール

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

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

コメント

コメントの記入