p5.jsでwebページにアニメーションを作ろう - 05　何度も繰り返そう

かなり間が空いてしまいました、僕です。
前回までの記事を並べておきますので、ざっと読み返してきて頂けると良いかと思います。

p5.jsでwebページにアニメーションを作ろう - 01
p5.jsでwebページにアニメーションを作ろう - 02　webサイトで公開しよう
p5.jsでwebページにアニメーションを作ろう - 03　自由に作れるようになろう
p5.jsでwebページにアニメーションを作ろう - 04　図形を描いて動かそう

ifを使って繰り返そう

前回までの内容ですと、円が現れて、右端に消えてしまったらそれっきりになってしまい、webサイトに設置するには少しもったいない感じになってしまっていました。
そこで、if文を使って図形の移動を何度も繰り返しましょう。

if文？

if文は、もしこの条件が正しければこれを実行、この条件が間違っていたらこっちを実行する、という風に条件分岐をするための構文です。

文法としては

if(ここに条件){
　ここに条件が正しい場合の実行内容
}

という風に記述します。

前回の記事で、ご紹介したコードでは円が右に消えていったらそれきりだったのに、サンプルでは円が右に消えていった後に左から出てきて…という動きを繰り返していたのは、これを使っていたからです。

ではサンプルに使っていたコードにをご紹介します。

var x = 0;
function setup() {
  createCanvas(400, 300);

}
function draw() {
  background(255);
  ellipse(x,150,50,50);
  x = x + 1;
  if(x > width){
x = 0;
}
}

前回ご紹介したコードに、

if(x > 400){
  x = 0;
}

という一文が追加されています。
これは「もしxが400より大きければ x = 0　を実行しなさい」という意味です。
xの値は

x = x + 1;

の行によって増え続けて、円の位置は右に移動し続けます。
そして、円が右端に到達した時（400を超えた時）、x に 0を代入し、左端に戻しているのです。

このif文にはさらに、elseを付けて条件に当てはまらない場合の動作を指定することが出来ます。

何が「正しい」で何が「正しくない」の？

さて、条件分岐に使える「正しい」「正しくない」は「比較演算子」という物を使って判断します。
所謂「〜より大きい」「〜より小さい」「〜と等しい」等です。

x > 0（xは0より大きい）
x < 0（xは0より小さい）
x == 0(xは0である)
x >= 0(xは0と同じかそれより大きい)
x <= 0(xは0と同じかそれより小さい)
x != 0(xは0ではない）

これらを使って、条件を指定します。
当てはまっていれば正しい（true）、当てはまっていないければ正しくない(false)です。

例えば、円が左半分にある場合には赤で、右半分にある時には緑で塗りつぶす、というコードはこんな風になります。

var x = 0;

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(255);


  if (x < 200) {//xが200より小さい時
    fill(255, 0, 0);//赤で塗りつぶす
  } else {//そうでない場合
    fill(0, 255, 0);//緑で塗りつぶす
  }

  ellipse(x, 150, 50, 50);
  x = x + 1;

  if (x > width) {
    x = 0;
  }
}

他にも条件分岐は様々な場面で役に立ちます。
これらの記法は何もp5.jsに限った事ではないので覚えておくと役に立つかと思います。

                           

  関連記事