キャンバスの変形

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()で新しいものから順に戻されます。