前回はJavaScriptでHello Worldのプログラミングを行ってみました。
今回はp5.jsというJavaScriptライブラリでデータのアニメーションを表示してみたいと思います。
目次
p5.jsとは
p5.jsとはデータの可視化やアニメーションなど、描画用のJavaScriptライブラリです。p5.jsを使うことによって、最初の回でお見せしたようなデータのアニメーションを簡単にブラウザ上に表示することができます。
p5.jsで可視化してみる
では早速p5.jsで可視化を行ってみましょう。
p5.jsのダウンロード
p5.jsもJavaScriptで書かれたプログラムです。まずはこれをダウンロードするために、以下のp5.jsの公式サイトにアクセスします。
ページの左にある「Download」をクリックしてダウンロードページを開きます。
ダウンロードページの下の方にある「p5.min.js」をクリックするとファイルがダウンロードされます。
このp5.min.jsというファイルは、p5.jsのプログラムが書かれたファイルを圧縮したものです。コメントや空白など不要なものはすべて消されているので、容量が小さくなっています。
※となりのp5.jsをダウンロードしても構いません。こちらは圧縮する前のプログラムです。
JavaScriptプログラムの作成
ではp5.jsで可視化するために、簡単なJavaScriptプログラムを作りましょう。次のプログラムをball.jsというファイル名で作成してください。
function setup() {
createCanvas(800, 400);
}
function draw() {
background(220);
ellipse(100, 200, 20);
}最初のsetup()という関数は、p5.jsで初期化のために最初に呼ばれる関数です。createCanvas(x, y)は、xピクセル、yピクセルの大きさの描画領域（キャンバス）を作成するという命令です。
次のdraw()関数は、p5.jsで描画するために呼ばれる関数です。background()は、背景を指定した色で塗るという命令です。220は色コードで灰色のような色を表します。
最後のellipse(x, y, d)は、x, y の位置に直径dピクセルの円を描きます。
※位置x, y は、キャンバスの左上角を原点にした位置です。
このプログラムを実行するために、前回と同じようにindex.htmlを作ります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ball</title>
</head>
<body>
<script type="text/javascript" src="p5.min.js"></script>
<script type="text/javascript" src="ball.js"></script>
</body>
</html>前回と違うのは、<script>タグを一つ増やして、p5.min.jsを読んでいる箇所です。これで、２つのJavaScriptプログラムを読み込みます。
※各ファイルの場所に注意してください。上記の場合だと、index.htmlと同じフォルダにp5.min.js、ball.jsがあります。
プログラムの実行
では、index.htmlをブラウザで開いてみてください。
灰色のキャンバスに円が描かれました。
アニメーションのプログラム
これだけだと面白くないので、ボールを動かしてみましょう。ball.jsを次のように書き換えます。
let x, y;
let dx, dy;
function setup() {
createCanvas(800, 400);
x = 0;
y = 0;
dx = 1;
dy = 2;
}
function draw() {
background(220);
x += dx;
y += dy;
ellipse(x, y, 20);
}x, yを座標の変数、dx, dyを座標増分の変数として宣言します。setup()内でそれぞれの変数の初期値を指定しています。
※ JavaScriptでは代入可能な変数は let で宣言します。
そして、draw()内で、x, y 座標をdx, dyで増やしてやり、円を描きます。
これを実行してみてください。
左上の原点から円が移動していくアニメーションが表示されましたね。
draw()という関数内にはforループなどの処理は書いていませんが、円の位置はどんどん変化していきます。p5.jsではdraw()関数は、1秒間に60回繰り返し呼ばれる仕様になっています。そのため、draw内で位置座標を更新するだけでアニメーションができてしまいます。drawは繰り返し呼ばれる関数なので、「背景を塗りつぶして、円を描く」が繰り返されており、円が動いているように見えるのです。
円が跳ね返るアニメーション
先程のプログラムだと円が一方向にしか動かないので、領域の外に出てしまいます。そこで、ball.jsを次のように書き換えてみましょう。
let x, y;
let dx, dy;
function setup() {
createCanvas(800, 400);
x = 0;
y = 0;
dx = 1;
dy = 2;
}
function draw() {
background(220);
x += dx;
y += dy;
ellipse(x, y, 20);
if (x < 0 || x > 800) {
dx *= -1;
}
if (y < 0 || y > 400) {
dy *= -1;
}
}draw関数の最後にif文を追加しました。円のx, y座標がキャンバス領域から外れると、増分値に-1をかけています。つまり、増分値を反転させています。これで、実行してみます。
円が領域の端で跳ね返るアニメーションが出来上がりました。跳ね返りの挙動を何かで制御するようにすれば、簡単なゲームでも作れそうです。
まとめ
p5.jsを使ってアニメーションを表示するプログラムを作りました。これをたくさんの粒子について表示すればSPH法の粒子のアニメが作れます。
次回は、もう少しJavaScriptのプログラミングについてお話しておきたいと思います。