図形を動かす：直線(2) の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• 図形を動かす：直線(2) へ行く。

*入力するコード [#a3cd4291]
以下のコードを入力してください。
※Tabキーを押すと行頭に半角スペース2つが挿入されます。

>int x = 0;
>int y = 0;
>  
>void setup() {
>  size(300, 300);
>}
>  
>void draw() {
>  background(255);
>  line(x, y, 100 + x, 100 + y);
>  x = x + 3;
>  y = y + 3;
>}

*結果 [#ecc918eb]
以下のような画面が表示され、直線が画面左上から右下に移動したらOKです。
※[[図形を動かす：直線(1)]]よりも早く直線が移動していることに気づきましたか？

&ref(line_move_sample2.png);

*解説 [#we9ae389]
※解説を見る前に、なぜこのような動きになったのか、[[図形を動かす：直線(1)]]のときのコードと比較して自分なりに考えてみましょう。
　
[[図形を動かす：直線(1)]]のときのコードはこちら。

>int x = 0;
>int y = 0;
>  
>void setup() {
>  size(300, 300);
>}
>  
>void draw() {
>  background(255);
>  line(x, y, 100 + x, 100 + y);
>  x = x + 1;
>  y = y + 1;
>}

　

今回のコードが前回と異なるのはdraw()の{}内の最後の２行の
　
>  x = x + 3;
>  y = y + 3;

　
だけですね。[[図形を動かす：直線(1)]]のときは「1」だったところが今回は「3」に変わっています。その違いだけで、直線の移動速度が向上しました。
　
まずはdraw()の{}内の処理について考えてみましょう。
　
[[図形を動かす：直線(1)]]のときは次の通り。
　
'''「画面を白にする」→「(0,0)～(100,100）の直線を描く」→「画面を白にする」→「(1,1)～(101,101）の直線を描く」→「画面を白にする」→「(2,2)～(102,102）の直線を描く」→「画面を白にする」→・・・'''
　
今回は「1」ずつではなく、「3」ずつ加算されることになりますから、

　
「画面を白にする」→「(0,0)～(100,100）の直線を描く」→「画面を白にする」→「(3,3)～(103,103）の直線を描く」→「画面を白にする」→「(6,6)～(106,106）の直線を描く」→「画面を白にする」→・・・
　
というアニメーションができることになります。
つまり、[[図形を動かす：直線(1)]]のときと比べて３倍のスピードで直線が進むことになるわけです。