Chapter 02

アニメーション

miku
miku
2021.11.10に更新

アニメーション

画面の中に動いているものを想像してみよう。映画やテレビ番組、ゲーム、あるいは自身が操作をするマウスカーソルなどがある。

マウスを動かすと画面の中にあるマウスカーソルも合わせて動くが、実際には本当に動いているわけではない。パラパラ漫画のように、静止画を短い間隔で切り替えることで人間の目にはマウスカーソルが動いているように見えているのだ。これがアニメーションの原理である。

では手動でアニメーションを再現してみよう。

実行結果の画面をクリックすると円が少しずつ移動する。急いで連打すればアニメーションに見えなくはないだろう。

さすがに連打による更新はつらいので、p5.jsを利用してアニメーションを表現したい。

function draw() {
}

draw() という関数を書いておくと、p5.js側から定期的に呼び出される。呼び出される間隔は環境に依存するのだが、1秒間に60回前後呼ばれることが多い。

なので、上の連打による更新を、この draw() に任せてみよう。

実際に任せたのが上記の作例である。左上の数字は1秒間あたりの連打回数、つまり1秒間あたりに呼ばれている draw() の回数になる。

p5.jsでアニメーションを表現するための構造

具体的なコードの書き方はおいおい学んでいくが、その前に、このような描画を行うためにはどのような書き方をするのかの全体的な構造を先に見ていきたい。

function draw() {
  座標の更新
  画面のクリア
  描画
}

円を動かすアニメーションにおいて draw() で行っているのは3つの処理になる。

「座標の更新」
円を動かすには座標を更新させなければならない。座標を変数で持っておき、変数の値を毎回更新させる。今回は座標の更新であったが、色や大きさを更新させることもある。これら座標や色、大きさは値として持っているので、まとめていうと値の更新である。

「画面のクリア」
パラパラ漫画と違い、コンピュータの画面には静止画を切り替えるという概念が無いので、消しゴムや黒板消しのように一度描いたものを消す必要がある。ただ、画面をクリアするかどうかは用途に応じて使い分ける必要があり、たとえばお絵かきのようなものを実装する場合は前に描いていたものを残す必要があるだろう。

「描画」
座標の変数をもとに円を描画する。

「画面のクリア」は描画の一機能なので、「円を描画する」と合わせて「描画」とまとめると、draw() の役割は「値の更新」と「描画」の繰り返し作業になる。

function draw() {
  値の更新
  描画
}

フレーム

draw() を呼び出すたびに、値の更新と描画が行われるということは、draw() は毎回一枚一枚の絵を生み出しているということだ。このような一枚一枚の絵をフレーム(frame)と呼ぶ。

他にも、定期的に呼び出される draw() の一回一回をフレームと呼ぶこともある。なので、1回目の draw() を1フレーム目、2回目は2フレーム目などと呼ぶことも多い。

初期設定

p5.jsでは draw() で絵を生み出す前に、初期の設定を行う必要がある。それが setup() だ。

function setup() {
  // 初期設定
}

function draw() {
  // setup() の実行後、1秒間に数十回呼ばれる。
}

setup() を書いておけば、draw() が呼び出される前に必ず一度だけ setup() が呼び出される。

通常、ここには初期設定を書いておく。他にも、1フレームの描画で済む、つまり動きのない描画をするだけなら、初期設定のあとにそのコードをここに書けばいい。その場合は draw() を記述する必要はない。

次は具体的な初期設定の内容を見ていこう。

function setup() {
  createCanvas(windowWidth, windowHeight);
}

p5.jsで何かを描画する場合、描画先となるCanvasが必要になる。そのCanvasを生成するには createCanvas(幅, 高さ) を指定すればいい。

ブラウザの画面幅、画面の高さは windowWidth, windowHeight で取得できるので、それを指定してみよう。

これでHTMLを実行すると setup() が呼ばれ、createCanvas() の実行によって <body> 直下に <canvas> が生成されることになる。Canvasのサイズは createCanvas() に指定したものになる。

この章のまとめ

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
}
  • p5.jsでは setup() が最初に呼ばれ、その後に draw() が繰り返し呼ばれる。
  • 初期設定のコードを setup() に書く。描画先となるCanvasを生成する必要があるため、createCanvas(幅, 高さ) を呼び出す。
  • draw() に書くコードは大きく分けて2種類あり、値の更新とその値に応じた描画をすることである。
  • 一枚絵を描くだけなら draw() を書く必要はない。