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

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

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

乱数の利用

Frocessingには乱数を発生させる関数が2つ用意されています。random()とnoise()です。

random()は引数で指定した値a~bの範囲で乱数を発生させます。bを省略した場合は0~aの範囲となります。

random( a, b )

noise()はPerlinノイズを発生させます。yとzは省略できます。

noise( x, y, z )

連続的な引数を指定することで自然に変化する乱数を得ることができますリスト6図5⁠。

リスト5 Perlinノイズ

colorMode( RGB, 1.0 );
for ( var i:int = 0; i < 200; i++ ){
  for ( var j:int = 0; j < 200; j++ ) {
    stroke( noise( i*0.02, j*0.02 ) );
    point( i, j );
  }
}

図5 リスト5(Perlinノイズ)の実行結果

図3 2リスト5(Perlinノイズ)の実行結果

第1回で紹介したサンプルコードFrocessingSampleの曲線の動きでnoise()を使用しているので参考にしてください。

ペイントプログラムをつくってみよう

最後に,マウスを使ったペイントプログラムをつくってみましょう。

まずは,次のプログラムリスト6と実行結果をご覧ください。マウスの移動に沿って線を描き,クリックで描画内容をクリアするシンプルなペイントプログラムです。

リスト6 PaintSample

package {
  import frocessing.display.F5MovieClip2DBmp;
  [SWF(width=465,height=465,backgroundColor=0x000000)]
  public class PaintSample extends F5MovieClip2DBmp
  {
    public function setup():void
    {
      //キャンバスのサイズ指定
      size( 465, 465 );     //・・・(1)
      //背景の描画
      background( 0 );      //・・・(2)
      //色指定
      stroke( 255, 0.5 );
    }
    
    public function draw():void
    {
      //マウスが押されているときは描画内容をクリア
      if ( isMousePressed )
        background( 0 );
      
      //直線の描画
      line( pmouseX, pmouseY, mouseX, mouseY );//(3)
    }
  }
}

F5MovieClip2DBmp

リスト6のスーパークラスは,これまで利用していたF5MovieClip2DではなくF5MovieClip2DBmpです。違いはdraw()で描画されたグラフィックが画像データ(BitmapData)に重ねて描画される点です※2⁠。このクラスを利用することで描画した内容をクリアせずに残すことができます。

リスト6では直線を重ねて描くことでマウスの軌跡を表現しています(3)。

※2
描画される画像データはbitmapDataプロパティでアクセスできます。

キャンバスのサイズ

size()はキャンバスのサイズを指定します(1)。F5MovieClip2DBmpでは描画される画像データ(BitmapData)のサイズとなります。

size( canvasWidth, canvasHeight )

背景色の指定

background()はキャンバスの背景色を指定します(2)。色の指定方法はstroke()やfill()と同じです色の指定方法⁠。background()を実行すると描画内容はクリアされます。

background(色指定)

描画部分を変えてみる

F5MovieClip2DBmpを利用すれば手軽にペイントプログラムをつくることができます。リスト6の描画部分(直線)に手を加えて,いろいろなペイントプログラムを試してみてください。

次のFlashは直線の描画をrandom()を使った円のパーティクルに変更したものです。プログラムはWonderflでご覧ください。

まとめ

今回解説したdraw()やイベントの関数を使うことで手早くインタラクティブなプログラムをつくることができます。描画プログラムのプロトタイプなどで利用してみてください。次回はペイントプログラムを発展させる過程を紹介する予定です。

著者プロフィール

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

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