【p5.js】四角形をアニメーションさせる

今回は、四角形をアニメーションさせてみます。draw()に再描画の内容を記述するので、その書き方をご紹介します。また、background()を記述する位置を変えるとどのような変化があるのかを見ていきます。

四角形をアニメーションさせる

rect()のパラメータを変数に置き換える。draw()の中でx座標の値を増加させる。

//x座標
var x = 0;

//初期設定
function setup() {
  createCanvas(200, 200);
}

//再描画
function draw() {
  background(0);
  rect(x, 40, 50, 50);
  x++;
}

rect()のx座標の値を増加させているので、四角形が右に動いているように見える。

background()の記述位置を変える

background()をsetup()に書いたらどのような動作になるのか試す。

//x座標
var x = 0;

//初期設定
function setup() {
  createCanvas(200, 200);
  background(0);  //draw()から移動
}

//再描画
function draw() {
  rect(x, 40, 50, 50);
  x++;
}

上記の処理を実行すると、四角形の軌跡が残る。

background()をsetup()に移したので、最初の1回しか背景を塗りつぶさないようになった。そのため、四角形の軌跡が残る。

まとめ

• rect()のパラメータを変数に置き換える
• draw()内で変数の値を増加させて、アニメーションさせる
• 色々なコードを試してみる
  • rect()の他のパラメータでアニメーションさせてみるのも良い