04-04 アニメーションの概要

アニメーションを行うにはframeRateとframeCountを使う。

p5.jsでアニメーションを行うための基本的な機能として以下がある。

・frameRate(n)

 draw関数を１秒間に呼び出す回数を設定する。デフォルトは60回。

・frameCount

予約変数の一つで、現在のフレーム数(draw関数が呼ばれた回数)を示す。

例題 4-4-1

円を画面の左から右に、大きさを変えながら移動する。
円の中心のX座標と半径は frameCount を使って変化させる。

コード

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

function draw() {
  background(50);
  noFill();
  stroke(255);
  strokeWeight(8);
  ellipse(frameCount, 200, 100, 50 + (frameCount / 2));
}

練習問題4-4-1

2つの円を左右から中央に向かって移動させる。
それぞれの円の高さ（縦の大きさ）も時間とともに変化させる。
frameCount % 400 を使って、X座標と大きさを調整する。