2024-09-10
今までコードは setup()関数内に書いていましたが、アニメーションを作成するには、draw()関数を使います。draw()関数は、setup()関数と同様に、p5.js が自動的に呼び出します。draw()関数内に描画する処理を書くことで、アニメーションを作成することができます。
function setup() {
// １回だけ実行される処理
}
function draw() {
// 繰り返し実行される処理
}2 つの関数の違いは、setup()関数はプログラムが開始されたときに 1 回だけ呼び出されるのに対し、draw()関数はプログラムが実行されている間、繰り返し呼び出される点です。
色々なアニメーション
試しに円を draw()関数内に描いてみましょう。
function setup() {
createCanvas(400, 400);
background('#F1F5F9');
}
function draw() {
circle(200, 200, 100);
}
おや、setup()関数内で円を描画するときと変わりが無いように見えます。これは、円を同じ位置に何度も描画しているためです。円を動かすためには、円の位置を毎回更新する必要があります。
mouseXとmouseYという変数を使って、マウスの位置に円を描画してみましょう。
function setup() {
createCanvas(400, 400);
background('#F1F5F9');
}
function draw() {
circle(mouseX, mouseY, 100);
}
円がマウスの位置に追従して描画されることが確認できました。これで、アニメーションを作成するための基本的な構造を理解しました。
今度は、マウスの位置ではなく、ランダムな位置に円を描画してみましょう。
function setup() {
createCanvas(400, 400);
background('#F1F5F9');
}
function draw() {
let x = random(width);
let y = random(height);
let r = random(50);
circle(x, y, r);
}
新しい関数が登場しました。random()関数は、引数に指定した範囲のランダムな値を返す関数です。random(width)は、0 から width の値の範囲でランダムな値を返します。今回は、円の位置と半径をランダムに設定しています。
今度は、円を右方向に動かしてみましょう。変数xを使って、円の x 座標を毎回1pxずつ増やします。
let x = 0;
let y;
function setup() {
createCanvas(400, 400);
background('#F1F5F9');
y = height / 2;
}
function draw() {
circle(x, y, 50);
x += 1;
}
確かに円が右方向に動いていますが、前の軌跡が残ったままになってしまいます。これは、新しい円を描画する前に、前の円を消去する処理が必要です。background()関数を使うと、毎回背景をクリアして、前の軌跡を消去することができます。
let x = 0;
let y;
function setup() {
createCanvas(400, 400);
y = height / 2;
}
function draw() {
background('#F1F5F9'); // 背景をクリア
circle(x, y, 50);
x += 1;
}
これで、円が右方向に動くアニメーションが完成しました。