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

入力するコード

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

int x = 0;

int y = 0;

  

void setup() {

  size(300, 300);

}

  

void draw() {

  background(255);

  line(x, y, 100 + x, 100 + y);

  if (x < 300) {

    x = x + 3;

    y = y + 3;

  } else {

    x = 0;

    y = 0;

  }

}

結果

図形を動かす：直線(2)と同様の速度で直線が移動し、直線が画面右端に消えた途端に左上に再度出現する動きが繰り返されるアニメーションが表示されればOKです。

解説

このコードは図形を動かす：直線(2)が元になっています。
図形を動かす：直線(2)と異なるのは以下の部分です。

  if (x < 300) {

    x = x + 3;

    y = y + 3;

  } else {

    x = 0;

    y = 0;

  }

　
ここでは、プログラミングにおいて非常に重要な「条件分岐」を使っています。
詳しくは条件分岐(if～else)について理解するで解説しています。
　
以下では、このプログラムの条件分岐について簡単に流れを追ってみましょう。
　
まず、この「if」から始まる部分は「if (...) {---} else {~~~}」と大きく分割することができます。
　
プログラミングにおける「if」の意味は英語で習った通り「もし～ならば」、「else」は「さもなければ」という意味で使っています。従って「if (...) {---} else {~~~}」という部分は
　
「もし(...)が成り立つならば{---}という処理をしなさい。そうでなければ{~~~}という処理をしなさい。」
　
と解釈されます。つまり、()内の「条件」によって最初の{}内を処理するか、else以降の{}内を処理するかが「分岐」する、ということです。これが「条件分岐」の基本的な考え方です。
　
さて、ここからはもう少し具体的にコードを見ていきます。
　

  if (x < 300) {
　

()内を見てみましょう。「x > 300」の「x」は変数、「<」は数学の不等号とほぼ同じです。ここでは「xが300より小さかったら」という条件が与えられています。
　
「x」は図形を動かす：直線(2)で見た通り、「0」から始まって3ずつ増えていきますから、初めは「x」がこの条件を満たしますが、いつかは300を超えます。
　
「x」が300を超えない場合は最初の{}内の処理が実行されます。
　

    x = x + 3;

    y = y + 3;

　
これは図形を動かす：直線(2)と同じですね。「x」, 「y」にそれぞれ3を加算しています。このときは、直線がどんどん右下に動いて行くことになります。
　
一方、「x」が300を超えたときは２番目の{}内の処理が実行されることになります。
　

    x = 0;

    y = 0;

　
「x」、「y」それぞれに「0」を代入しています。これにより、直線の位置は一番初めと同じ状態に戻ります。
　
これまでの流れをおさらいすると、「if」以下の部分はこう解釈されます。
　
「もし(xが300より小さい)が成り立つならば{x, yに3を加算する}という処理をしなさい。そうでなければ（※xが300より大きければ）{x, yを0にする}という処理をしなさい。」
　
（しつこいですが）さらに言い方を変えれば、
　
「x」が0から300の間（つまり直線の左上端が画面内にある間）は直線は移動し、「x」が300を超えたら（つまり直線が画面外にいったら）直線の位置を左上に戻す
　
というアニメーションをこの「if」と「else」を用いた条件分岐により実現している、ということになります。