図形を移動・回転させる の変更点

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

　
「translate(x, y)」はこの後に出てくる図形等の位置をまとめて移動させるものです。
例えば次の２つのコードは同じ結果になります。
「translate(x, y)」は、その後に出てくる図形等の位置をまとめて移動させるものです。
具体的には、横方向に「x」, 縦方向に「y」移動させます。
例えば次の２つのコードは同じ結果になります。確認してみてください。
　
>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''%%%);

*図形の回転 [#p75bc73f]
>rotate(radians(90));

　
「rotate(x)」はその後に出てくる図形等の位置を、原点（0,0)を中心としてまとめて時計回りに回転させるものです。
「radians(d)」は度数法から弧度法への変換をしてくれるもので、具体的には()内の数字をラジアンに変換して返してくれます（弧度法は数Ⅱの三角関数で学習します）。
　
「rotate(radians(90))」は「この後に出てくる図形等を、(0, 0)を原点とし、すべて90度（をラジアンに変換した角度）分時計回りに回転させなさい、という意味になります。」
　
次の２つのコードで動作を確認してみましょう。
　
>size(300, 300);
>ellipse(150, 0, 200, 200);

　
&ref(rotate_sample1.png);
　
中心が(100, 0)になるので、上半分が表示されない半円が描けます。
続いて「rotate()」を一行追加してみましょう。
　
>size(300, 300);
>rotate(radians(90));
>ellipse(150, 0, 200, 200);

　
&ref(rotate_sample2.png);
　
円が左上隅(0, 0)を中心に時計回りに90度移動し、今後は左半分が表示されない半円になりました。
　
&ref(rotate_sample3.png);