図形を移動・回転させる のバックアップソース(No.1)

Processingは画面左上を原点(0, 0)とし、右方向と下方向をそれぞれ正としています。
これは、中学・高校の数学で習ってきた「x-y平面」とは異なり、そのため、図形の動かし方や回転の方向を考えるときに混乱してしまうこともあるかもしれません。
 
Processingでは、より直感的に図形を移動させたり、回転させたりする方法が提供されています。
 
>translate(200, 100)

 
「translate(x, y)」はこの後に出てくる図形等の位置をまとめて移動させるものです。
例えば次の2つのコードは同じ結果になります。
 
>size(300, 300);
>ellipse(100, 100, 100, 100);
>line(200, 200, 250, 250);

 
>size(300, 300);
>%%%''translate(100, 100);''%%%
>ellipse(%%%''0''%%%, %%%''0''%%%, 100, 100);
>line(%%%''100''%%%, %%%''100''%%%, 150, 150);