レベル1：直線の動きの繰り返し

お題

図形を動かす：直線(3)のプログラムを実行すると、直線が左上に戻るときにどこか違和感がありませんか？
直感的には、直線が先端から画面右下に徐々に消えていくのだから、左上から出てくる時にも先端から徐々に見えてくる方が自然な動きになります。
基本は変えずに直線の再登場の仕方だけ見直して、図形を動かす：直線(3)のコードを修正してみましょう。

参考

• 図形を動かす：直線(3)
• 変数について理解する

回答例

図形を動かす：直線(3)と基本的に動作は同じですが、２番目の図のように消えた直線が再度出現する際に先端が画面左上から徐々に表示されるようにしましょう。
　

ヒント

• まずは図形を動かす：直線(3)のコードをよく読み解き、「なぜこのコードだと直線がいきなり左上に表示されてしまうのか」を考えましょう。
• その上で、コードのどの箇所をどのように修正すればよいか検討しましょう。
• 二か所修正を加えるだけで、動作は改善されます。

サンプルコード

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 = -100;

    y = -100;

  }

}

　
「line(x, y, 100 + x, 100 + y)」に注目すると、「100 + x」、「100 + y」がそれぞれ直線の先端の横方向と縦方向の座標になっていることがわかります。
再び直線が左上に戻ってくる瞬間に、「直線の先端の座標（※(100 + x, 100 + y)）」と「画面の左上の座標（※(0, 0)）」が一致していれば、先端が徐々に表示される動作が実現できます。
よって、「100 + x = 0」、「100 + y = 0」となればよいことから、直線を左上に戻すとき（＝「x」が300を超えたとき）に、「x」、「y」をそれぞれ「-100」にすればよいのです。