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

第4回　スケッチしてみよう

Flash, ActionScript, Frocessing

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

これまで描画APIやイベント関数など，基礎となる利用方法を解説してきました。Frocessingを使うことでグラフィック描画を手軽に，手早くプログラミングできるとことがわかっていただけたかと思います。手軽さや手早さは，いろいろなことを試す，つまりスケッチ（素描・試作・思索）を行う上では重要な要素です。

最終回となる今回はスケッチの例としてペイントプログラムの制作過程を紹介します。

スケッチのはじまり

前回，マウスを使ったプログラムとして「PaintSample」を紹介しました。マウスに沿って線が描かれるシンプルなペイントプログラムです。

このプログラムをスケッチのはじまりとして，最終的には次のFlash（SketchSample7）を制作します。この2つを見比べると随分違うように見えますが「PaintSample」に少しずつ手を加え，変化を積み重ねた結果です。

では，早速スケッチの過程を見てみていきましょう。

線の色を変化させる

まずは，描画する線に表情を与えるため色をつけてみます。次のプログラム（リスト1）と実行結果をご覧ください。

リスト1　SketchSample1

package {
  import frocessing.display.F5MovieClip2DBmp;
  [SWF(width=465,height=465,backgroundColor=0x000000,frameRate=60)]
  public class SketchSample1 extends F5MovieClip2DBmp
  {
    public function setup():void
    {
      //キャンバスのサイズ指定
      size( 465, 465 );
      //背景の描画
      background( 0 );
      //HSV
      colorMode( HSV, 1 );  //・・・・(1a)
    }
    
    public function draw():void
    {
      if ( isMousePressed )
        background( 0 );
      
      //描画
      stroke( random(0.95,1), random(0.2,1), random(0.3,1) );//(1b)
      line( pmouseX, pmouseY, mouseX, mouseY );
    }
  }
}

線の色はHSV指定を利用して(1a)，赤付近(色相)の色をランダムに指定しています(1b)。random()の値によって表示される印象が変化しますのでいろいろと試してみましょう。

Flash, ActionScript, Frocessing

著者プロフィール

高輪知明（たかなわともあき）

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