Processing.jsでSVG画像をその場で回転させるサンプル

ProcessingでSVG画像を読み込んで回転させようとすると、その場で回転せずに、下図のように画像の左上の頂点を中心にして回転してしまう。

同じ場所で回転させるためには、(1)の移動の際には、右方向に1マス分、(2)の移動の際には、右方向と下方向に1マス分という具合に、回転した後で画像自体を動かす必要があるようだ。

Processing の関数内で実装すると下記のようになる。

void moveRect2() {
  int xAdjust = 0;
  int yAdjust = 0;
  background(200);
  fill(200);
  myicon.resetMatrix();
  if (currentAngle == TWO_PI) {
    currentAngle = 0;
  } else {
    currentAngle += HALF_PI;
  }
  myicon.rotate(currentAngle);
  if (currentAngle == HALF_PI) {
    xAdjust = 30;
    yAdjust = 0;
  } else if (currentAngle == PI) {
    xAdjust = 30;
    yAdjust = 30;
  } else if (currentAngle == (PI + HALF_PI)) {
    xAdjust = 0;
    yAdjust = 30;
  } else {
    xAdjust = 0;
    yAdjust = 0;
  }
  shape(myicon, 50 + xAdjust, 50 + yAdjust, 30, 30);
}

実際に動作するサンプルはこちら。
"Rotate1"ボタンを押すと通常の回転、"Rotate2"ボタンを押すとその場から動かずに回転する。

ソースコード全文はこちら。
https://gist.github.com/4204624