Processingのtranslate関数とrotate関数

Processingでは、ディスプレイウィンドウ上のすべての画像を動かしたいときに、
個々の画像の座標全てを調整するのは面倒です。

そんな時のために、translate関数とrotate関数が準備されています。

translate関数

translate関数は、ディスプレイウィンドウの中心座標を変えるもの。
Processingの初期状態では、座標(0,0)はディスプレイウィンドウの左上の隅っこに設定されています。
draw()にtranslate(dX, dY);と記述すれば、記述した箇所以降の座標(0,0)が(dX,dY)の位置に移動します。
ディスプレイウィンドウの中心を(0,0)としたい場合は、
translate(width/2, heigth/2);
を記述します。

少し注意が必要なのは、draw関数が一巡すると再び座標系が(0,0)に戻る点です。
translateで円を移動させる場合は、以下のような記述になります。

void draw(){
  background(0);
  fill(255);
  translate(dx,dy);
  ellipse(10,10,30,30);
  dx ++;
  dy ++;
 }

以下のようにtranslate関数を追加すると円の中心座標は(30,30)になりますが、 円は一か所に留まり、移動はしません。
これは、draw関数一巡するたびに座標系が初期化されているためです。

void draw(){
  background(0);
  fill(255);
  translate(30,30);
  ellipse(10,10,30,30);
 }

また、translate関数は相対座標系で考えます。
例えば、以下の記述では2つの円が描画されます。 translate(30,30)を2回記述していますが、記述する度に座標系が移動します。

void draw(){
  background(0);
  fill(255);
  translate(30,30);
  ellipse(10,10,30,30);
  translate(30,30);
  ellipse(10,10,30,30);
 }

rotate関数

rotate関数はディスプレイウィンドウを回転させる関数です。
rotate(angle);の記述以降の画像について、x座標を-cos(angle)、y座標を-sin(angle)する関数と考えて差し支えないです。
マイナスがついているのは、時計周りの方向に回転することを意味しています。
注意が必要なのは、回転の中心がディスプレイウィンドウの左上隅っこである点です。
ウィンドウ中心を回転の中心に置きたい場合は、上述したtranslate(width/2,height/2);を使用します。