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

第2回 Frocessingの基本描画API

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

フラクタルを描画してみる

最後に,キャンバスの変形を利用したフラクタル描画のプログラムを紹介します。描画するフラクタルは前回紹介したシェルピンスキーギャスケットです。

シェルピンスキーギャスケット

次のプログラムリスト7と実行結果をみてみましょう。

リスト7 FractalSample

package {
  import frocessing.display.F5MovieClip2D;
  
  [SWF(width=465,height=465,backgroundColor=0xFFFFFF)]
  public class FractalSample extends F5MovieClip2D
  {
    private var shape_size:Number;
    private var r1:Number;
    private var r2:Number;
    private var r3:Number;
    
    public function FractalSample() 
    {
      //線と塗りの色指定
      stroke( 0, 0.5 );
      noFill();
      
      //キャンバスを移動
      translate( 465/2, 465/2 + 30 );
      
      //シェイプの大きさ
      shape_size = 200;
      
      //三角形の座標パラメータ
      r1 = shape_size;
      r2 = r1/2;
      r3 = r2*Math.sqrt(3);
      
      //フラクタルの描画
      //再帰回数を指定
      draw_shapes( 6 );   //・・・・・(1)
    }
    
    private function draw_shapes( n:int ):void
    {
      if ( n-- <= 0 ) return;
      
      var rn:int = 3;
      for ( var i:int = 0; i < rn; i++ ) {
        
        pushMatrix();
        //キャンバスのサイズを半分に
        scale( 0.5 );
        //Y方向に-r移動
        translate( 0, -shape_size );
        
        //正三角形の描画
        triangle( 0, -r1, r3, r2, -r3, r2 ); //(3)
        
        //再帰的に描画
        draw_shapes( n );  //・・・・・(2)
        popMatrix();
        
        //360/rn 度回転
        rotate( 2*Math.PI/rn );
      }
    }
  }
}

このプログラムは,(1)の関数で描画を開始し,(2)で再帰的に描画を繰り返すことでフラクタルを描画しています。実際の描画は(3)の三角形だけですが,キャンバスの変形によって複雑な図形となります。

キャンバスの状態は図11のように遷移しています。再帰描画がそれぞれの三角形の中心と大きさを基準として実行される点に注目してください。

図11 フラクタル描画の流れ

図11 フラクタル描画の流れ

描画要素を変えてみる

リスト7のプログラムは描画部分(3)がシンプルに記述されているのでシェイプの変更が容易です。三角形を円に変更するだけでも違った表情のグラフィックとなります。

次のFlashは,実際にシェイプの描画内容を変えてみたものです。プログラムはWonderflでご覧ください。

まとめ

色指定のように使用方法がいくつかある関数は,プログラムの内容に応じて適した方法を選ぶことで手早くプログラミングできるようになります。

また,キャンパスの変形は始めは手間取るかもしれませんが「紙にペンで絵を描くとき,ペンではなく紙を動かすようなもの」と考えてみてください。適宜キャンバスを動かすことで描画プログラムが簡潔なものとなります。

著者プロフィール

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

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