図形を動かす：直線(2)

入力するコード

以下のコードを入力してください。
※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;

}

結果

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

解説

※解説を見る前に、なぜこのような動きになったのか、図形を動かす：直線(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)のときと比べて３倍のスピードで直線が進むことになるわけです。