前回はFrocessingの概要などを解説しましたが、今回は描画プログラムの基本となるAPI（線と塗りの色・基本シェイプ・キャンパスの変形）について解説します。

なお、今回のサンプルプログラムは全てfrocessing.display.F5MovieClip2Dがスーパークラスとなります。

• サンプルプログラムのダウンロード

色の指定方法

以下のプログラム（リスト1）と実行結果（図1）をご覧ください。

stroke( 20 );          //線の色指定
fill( 168, 192, 255 ); //塗りの色指定
circle( 150, 75, 50 ); //座標(150,75)に半径50の円を描画

このプログラムには描画の基本的な手順が記述されています。線と塗りの色指定とシェイプの描画です。まずは、stroke()、fill()による色指定について解説します。

線と塗りの色

FlashのGraphicsクラスでは線と塗りの色をlineStyle()、beginFill()で指定します。このとき色の値として24bitカラー[1]を使いますが、Frocessingのstroke()、fill()では24bitカラー以外の値でも色指定を行うことができます。

線の色を指定するstroke()を例にみていきましょう。fill()の指定方法も同様です。

RGB（red,green,blue）を個別に指定します。値の範囲は0～255です。透明度（alpha）は0.0～1.0の範囲で、省略した場合は1.0となります。

stroke( red, green, blue, alpha )

グレースケール（gray）で色を指定します。値の範囲はRGBと同じで0～255です。透明度は省略できます。

stroke( gray, alpha )

Graphicsクラスと同じように24bitカラーで指定します。透明度は省略できます。値が255以下（0x0000CCなど）だとグレースケールとして処理されるので、このような場合は32bitカラー[1]で指定します。

stroke( 0xRRGGBB, alpha )

32bitカラーで色と透明度を指定します。

stroke( 0xAARRGGBB )

線が描画されないようにします。塗りを無効にする場合はnoFill()を使います。

noStroke()

サンプルプログラム

次のFlashは、以上の指定方法をまとめたサンプルです。プログラムはWonderflでご覧ください。

色値の範囲設定

RGBやグレースケールの色は0～255（透明度は0.0～1.0）の範囲で指定すると説明しましたが、colorMode()により範囲（最大値）を任意に変更することができます。

赤、緑、青、透明度の値の範囲を個別に設定します。透明度は省略できます。

colorMode( RGB, red, green, blue, alpha )

赤、緑、青、透明度のすべての値の範囲をrangeに設定します。

colorMode( RGB, range )

サンプルプログラム

次のプログラム（リスト2）では赤、緑、青の値の範囲を1:2:4に設定しています。そのため同じ値を指定した場合、赤が強い色で描画されます。

var n:int = 5;

//値の範囲を1:2:4に設定
colorMode( RGB, n, n*2, n*4 );

noStroke();
for ( var i:int = n; i >0; i-- ) {
  //塗りの指定
  fill( i, i, i );
  //円の描画
  circle( 465/2, 465/2, 40 * i );
}

HSVでの色指定

HSVは色情報を色相（hue⁠）⁠、彩度（saturation⁠）⁠、明度（brightness・value）で表す形式で、RGBと比較すると明るさ鮮やかさといった直感的な情報で指定できることが特長です。

FrocessingではcolorMode()の最初の引数を「HSV」と指定することで、HSVでの色指定を利用できます。このときstroke()やfill()の記述形式は次のようになります。

stroke( hue, saturation, brightness, alpha )

RGBと同様に透明度（alpha）は省略でき、値はcolorMode()で設定した範囲となります。

サンプルプログラム

プログラム（リスト3）は、色相と明度をX方向とY方向に対応させて塗りの色を変化させています。HSV指定を使うことで、色の階調変化を簡単にプログラミングできます。

var n:int = 10;

//線は描画しない
noStroke();

//HSVで色指定
//値の範囲を,色相(0～n),彩度(0～1),明度(0～n)に指定
colorMode( HSV, n, 1, n );

for ( var i:int = 0; i <= n; i++ ) {
  for ( var j:int = 0; j <= n; j++ ) {
    //塗りの指定
    fill( i, 1, n - j );
    
    //円の描画
    var cx:Number = 33 + 40 * i;
    var cy:Number = 33 + 40 * j;
    circle( cx, cy, 19 );
  }
}

基本シェイプの描画

次に円や矩形などの基本シェイプについて解説します。

基本となるシェイプ描画関数

基本シェイプの描画関数は以下の8つがあります。引数は全て数値（Number）です。

(x,y)の位置に点を描画します（strokeで指定した色で描画されます⁠）⁠。

point(x,y)

2点を結ぶ直線を描画します。

line(x1,y1,x2,y2)

3点を結ぶ三角形を描画します。

triangle(x1,y1,x2,y2,x3,y3)

4点を結ぶ四角形を描画します。

quad(x1,y1,x2,y2,x3,y3,x4,y4)

左上(x,y)に幅width、高さheightの矩形を描画します。第5、第6引数に半径を指定することで角丸の矩形を描画できます。

rect(x,y,width,height)

中心(x,y)に幅width、高さheightの楕円を描画します。

ellipse(x,y,width,height)

中心(x,y)に半径radiusの円を描画します。

circle(x,y,radius)

中心(x,y)、幅width、高さheight、開始角度begin、終了角度endの円弧を描画します。角度はラジアンで指定します。

arc(x,y,width,height,begin,end)

以上のシェイプは、stroke()、fill()で指定された色で描画されます。Graphicsクラスの塗り指定は、シェイプ描画の度にbeginFill()、endFill()を記述しなければいけませんが、Frocessingではその必要がありません。fill()で指定された色が保持され、自動的に塗りが適用されます。

サンプルプログラム

次のFlashは、以上のシェイプ描画をまとめたサンプルです。プログラムはWonderflでご覧ください。

rectMode

矩形（rect）を描画するとき、その位置を左上の座標ではなく中心の座標で指定したいことがあります。そのような場合、rectMode()により座標やサイズの指定方法を変更することができます。

rectMode( mode )

modeで指定できるのは、CENTER、CORNER、CORNERS、RADIUSの4つです。それぞれ次のような指定方法となります。

//CENTER
rect(centerX, centerY, width, height)
//CORNER
rect(left, top, width, height)
//CORNERS
rect(left, top, right, bottom)
//RADIUS
rect(centerX, centerY, halfWidth, halfHeight)

楕円を描くellipse()にも同様の設定を行うellipseMode()があります。rectMode()のデフォルトはCORNER、ellipseMode()はCENTERです。

キャンバスの変形

Frocessingはキャンバスを変形しながらグラフィックを描画できます。これはFrocessingの特徴のひとつです。変形には移動、拡大縮小、回転の3つがありますので順を追って解説します。

キャンバスの移動

キャンバスの位置をX方向にtx、Y方向にty移動します。続けてtranslate()を実行すると移動量が加算されます。

translate( tx, ty )

サンプルプログラム

リスト4はキャンバスを移動しながら矩形を描画するプログラムです。

//キャンバスをX方向に40,Y方向に20移動
translate( 40, 20 );
fill( 255, 0, 0 );
rect( 0, 0, 60, 60 );

//X方向に80移動
translate( 80, 0 );
fill( 0, 255, 0 );
rect( 0, 0, 60, 60 );

//さらに80移動
translate( 80, 0 );
fill( 0, 0, 255 );
rect( 0, 0, 60, 60 );

3つのrect()は座標(0,0)で描画するようにプログラムされていますが、キャンバスの移動により実際の描画位置が異なっています(図6)。

実際の描画座標は左から(40,20)、(120,20)、(200,20)となります。

キャンバスの拡大縮小

キャンバスの大きさをX方向にsx、Y方向にsyの倍率で拡大縮小します。syを省略した場合は倍率がsxとなります。tranlate()と同じように倍率は乗算されます。

scale( sx, sy )

サンプルプログラム

リスト5はキャンバスを縮小しながら半径120の円を描画するプログラムです。描画される円はキャンバスの縮小にあわせて小さなサイズとなります（図7⁠）⁠。

noStroke();
fill( 255, 0, 0, 0.25 );

//キャンバスの移動
translate( 150, 150 );
circle( 0, 0, 120 );

//キャンバスのサイズを半分に
scale( 0.5 );
circle( 0, 0, 120 ); //描画半径は60になる

//さらに半分
scale( 0.5 );
circle( 0, 0, 120 ); //描画半径は30になる

キャンバスの回転

キャンバスを角度rだけ回転させます。値はラジアンで指定します。続けて実行することで回転量が加算されます。

rotate( r )

サンプルプログラム

リスト6はキャンバスを回転させながら矩形を描画するプログラムです。矩形の描画位置が円を描くように変化します。

var n:int = 30;
var r:Number = 2*Math.PI/n;

//HSVで色指定
colorMode( HSV, n, 1, 1 );

//矩形座標を中心に設定
rectMode( CENTER );

//キャンバスをステージの中心へ移動
translate( 465/2, 465/2 );

noStroke();
for ( var i:int = 0; i < n; i++ ) {
  //キャンバスを角度r回転
  rotate( r );
  //塗り指定
  fill( i, 1, 1 );
  //矩形描画
  rect( 150, 0, 36, 10, 4, 4 );
}

このプログラムでは図9のようにキャンバスの座標系が変形しています。実行結果と見比べてキャンバスの回転をイメージしてみましょう。

pushMatrixとpopMatrix

pushMatrix()とpopMatrix()はキャンバスの変形状態を一時的に保持する関数です。pushMatrix()で変形を保持し、popMatrix()で保持していた変形に戻します。Arrayクラスのpush()、pop()と同じように、pushMatrix()で変形状態が追加され、popMatrix()で新しいものから順に戻されます。

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

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

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

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

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のように遷移しています。再帰描画がそれぞれの三角形の中心と大きさを基準として実行される点に注目してください。

描画要素を変えてみる

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

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

まとめ

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

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