アニメーション - はじめの一歩

まずは正方形を動かしてみよう。

int  i = 0;

void loop()
{
  rect(i, i, 10, 10);
  i++;
}

実行すると、左上から黒枠の白い正方形が右下へ動きます。 loop() 構文を使うと、実行中に繰り返す文を記述できます。 int型の変数「i」の値を増やして正方形の位置をずらしています。 ただし、このままでは前の正方形の枠線が残っていますね。

アニメーション - リフレッシュ

つぎに枠線を消してみます。

int  i = 0;

void loop()
{
  background(128);
  rect(i, i, 10, 10);
  i++;
}

実行すると枠線が残らないようになりました。 background()は、背景の色を指定する関数です。 loop()の中では、アニメーションのリフレッシュに使えます。 background()の引数は、fill()と同じです。 ただし、まだ問題がありますね。 正方形がウィンドウの外に出てしまって、すぐに終わってしまいます。

アニメーション - 境界ループ

正方形が外に出てしまったら、また入って来るようにしましょう。

int  i = 0;

void loop()
{
  if (i > width)
  {
    i = -10;
  }
  background(128);
  rect(i, i, 10, 10);
  i++;
}

loop()の最初にiの値を調整しています。 iがウィンドウの幅widthを超えていれば、-10を代入します。 これでまた左上に戻ってきます。 -10ではなく0を代入しても構いませんが、-10を代入するほうが左上からスムーズにウィンドウに入ってきます。 代入する値を変えて試してみてください。