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

第1回 はじめてのFrocessing

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

Frocessingについて

Frocessingとは

"Frocessingとは何か?"その説明をする前にProcessingについて簡単に紹介したいと思います。Processingとはグラフィック制作向けのプログラムを行う開発環境(ソフトウェア)です。独自の描画APIとシンプルな開発ツールによって,手軽に,直感的にプログラミングできるよう工夫されています。

Frocessingは,そのProcessingのような描画APIをActionScript3で利用できるようにしたライブラリです。Processingのように手早くプログラミングできることを目的としています。

Graphicsとの違い

次のプログラムリスト3はリスト1のプログラムをFrocessingを利用して記述したものです。

リスト3 矩形描画のプログラム

stroke( 255, 0, 0 );
fill( 255 );
rect( 50, 50, 200, 100 );

同じ処理が手早く書けることが分かっていただけると思います。これだけを見ると大きな違いはないように思えますが,いろいろな描画プログラムを試す場合など,小さな違いの積み重ねがプログラミングのスピードや快適さに与える影響は少なくないと思います。

Frocessingの準備

プログラミングをはじめる前に,プログラム環境とFrocessingライブラリを準備します。後述するWonderflを利用する場合,この準備は必要ありません。ローカル環境で制作する際の参考にしてください。

プログラム環境の準備

この連載ではActionScript3のプログラミングを行います。ActionScript3で書かれたプログラムをコンパイルするには,Flash CS3以降か,FlexSDKを用いるとよいでしょう。FlexSDKは無料で利用できる開発環境ですので,ActionScriptによるプログラムを試したい方にお勧めです。FlexSDKのセットアップ,使用方法,ActionScriptの基本についてはプログラマのためのFlash遊び方をご覧ください。

Frocessingのダウンロード

Frocessingライブラリは,日本最大のFlash・ActionScriptのオープンソースコミュニティであるSpark Projectで公開されています。

Spark Projectとは

Spark Project では,最近話題の「FLARToolKit」をはじめ,描画系,音系,デバイス系など多様なライブラリが公開されています。プロジェクト一覧をご覧いただければ興味の湧くライブラリがみつかることでしょう。

Frocessingのプロジェクトページ図3を開くと「Source Code」のブロックにライブラリのデータについて情報が記載されています。最新のソースファイルはSVNリポジトリから閲覧・ダウンロードが可能ですが,今回はZIP形式のデータをダウンロードして使用します。現在の最新版である「frocessing-0.5.7.zip」をダウンロードしてください。

図3 Frocessingのプロジェクトページ

図3 Frocessingのプロジェクトページ

ライブラリの設置

ダウンロードしたZIPを解凍すると「frocessing」というディレクトリが含まれています。このディレクトリがライブラリの本体です。既にライブラリを置く場所が決まっている場合は「frocessing」ディレクトリを所定の場所へコピーすれば利用が可能となります。今回は説明のために「C:\test\」にコピーしたものとします。

Frocessingのサンプルコード

まずは,以下のFlashをご覧ください。

図4 Frocessingのサンプル

これはFrocessingを利用してプログラミングされた簡単なグラフィック描画のサンプルです。時間経過とともにランダムな曲線が描画され,マウスクリックで描画内容がクリアされます。このプログラムのソースは以下のようになります。

リスト4 FrocessingSample.asソースのダウンロード

package {
  import frocessing.display.*;
  [SWF(width="465", height="465", frameRate="60")]
  public class FrocessingSample extends F5MovieClip2DBmp{
    private var stage_width:Number  = 465;
    private var stage_height:Number = 465;
    private var n:int = 5;
    private var t:Number = 0;
    
    public function FrocessingSample() {
      super();
    }
    
    public function setup():void {
      size( stage_width, stage_height );
      background( 0 );
      noFill();
      stroke( 255, 0.1 );
    }
    
    public function draw():void {
      if ( isMousePressed )
        background( 0, 1 );
      
      translate( 0, stage_height / 2 );
      beginShape();
      curveVertex( -100, 0 );
      for ( var i:int=0; i <= n; i++ ){
        var xx:Number = i * stage_width / n;
        var yy:Number = noise( i * 0.25, t ) * 300 - 150;
        curveVertex( xx, yy );
      }
      curveVertex( stage_width+100, 0 );
      endShape();
      t+=0.01;
    }
  }
}

このプログラムを書き写すか,ファイルを保存して,先ほどのライブラリと同じディレクトリに置いてください。

次にサンプルコードをコンパイルして動作させるためのいくつかの方法をご紹介します。

著者プロフィール

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

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

コメント

コメントの記入