p5.js入門　基本的な仕組み

前回はp5.jsライブラリを使うための準備として

開発環境のセットアップ方法について紹介しました。

前回の記事

techty.hatenablog.com

今回は、前回作成したプログラムの説明と

p5.jsライブラリの基本的な仕組みについて紹介したいと思います。

前回作成したプログラムは以下のようなものでした。

index.html

<!DOCTYPE html>
<html lang='ja'>

<head>
  <meta charset='utf-8'>
  <title>Sample</title>
  <script src='lib/p5.min.js'></script>
</head>

<body>
  <script src='js/sketch.js'></script>
</body>

</html>

sketch.js

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

function draw() {
  ellipse(width / 2, height / 2, 200, 200);
}

フォルダ構成は以下のようにしましたね。

f:id:techty:20190501062339p:plain

f:id:techty:20190501062342p:plain

p5.jsライブラリは「p5.min.js」を使うことにしましたね。

まずは前回作成したプログラムの全体像について説明します。

作成したファイルの役割は大体以下のような感じになります。

　・index.html：絵を描くキャンバス

　・sketch.js：実際に絵を描く人

　・p5.min.js：sketch.jsをサポートする人

イメージとしては以下のような感じです。

f:id:techty:20190502022229p:plain

実際に絵を描くのはsketch.jsの仕事です。

絵を描く先（キャンバス）はindex.htmlとなります。

p5.min.jsは、絵を描くための様々な機能をsketch.jsに提供します。

最終的にブラウザがindex.htmlを読み込み、画面に絵が表示されるという流れです。

次にプログラムの中身について見ていきます。

index.htmlはキャンバスの役割を果たしているので、

ここには絵を描く処理は記載されていません。

sketch.jsとp5.min.jsを参照しているだけです。

index.html

f:id:techty:20190502024727p:plain

p5.jsライブラリを使うには、index.htmlに下記を記載する必要があります。

　・sketch.jsへの参照

　・p5.min.jsへの参照

これはp5.jsライブラリを使うときのルールです。

あまり深く悩まず、こういうものと理解しておきましょう。

次にsketch.jsについて見ていきます。

sketch.jsには2つの関数があります。setup関数とdraw関数です。

p5.jsライブラリを使うときには、setup関数とdraw関数を定義する必要があります。

これもp5.jsライブラリを使うときのルールです。

sketch.js

f:id:techty:20190502030356p:plain

index.htmlがブラウザに読み込まれると、最初にsetup関数が呼ばれます。

setup関数の処理が終わると、次にdraw関数が呼ばれるようになっています。

ただし、ここで暗黙の了解となっていることがあります。

それは

　・setup関数は1度だけ呼ばれる

　・draw関数は何度も呼ばれる

ということです。

もう少し具体的に言うと、draw関数は1秒間に60回のペースで呼ばれ続けます。

sketch.jsにはsetup関数とdraw関数の定義が書いてあるだけなのですが、

暗黙の了解として「draw関数は何度も呼ばれる」ことになっています。

これもp5.jsライブラリを使うときのルールです。

これはアニメーション作成を楽にするためのルールです。

実際にプログラムを書いてみるとわかりますが、

draw関数が自動的に繰り返し呼び出されるというのは

プログラムを書く側からすると意外と嬉しいものなのです。

ここからは関数の中身について見ていきます。

setup関数では2つのことをしています。

　・キャンバスの作成

　・キャンバスの背景色の設定

setup関数

f:id:techty:20190502044250p:plain

createCanvas関数はキャンバスを作成する関数です。

作成したキャンバスは、Canvas要素としてindex.htmlに埋め込まれます。

関数の引数には、作成するキャンバスの横幅と高さをピクセル単位で指定します。

第一引数が横幅、第二引数が高さを表しています。

background関数はキャンバスの背景色を設定する関数です。

background関数の引数に0を指定することによって、

キャンバスの背景色を黒色に設定しています。

setup関数を呼び出すことによって、

「背景色が黒色の、横幅400ピクセル、高さ400ピクセルのキャンバス」が

Canvas要素としてindex.htmlに埋め込まれます。

次にdraw関数の中身について見ていきます。

draw関数では、先ほど作成したキャンバスに円を描いています。

draw関数

f:id:techty:20190502063513p:plain

ellipse関数は楕円を描くための関数です。

関数の引数には、楕円の位置と大きさを指定します。

引数の意味はそれぞれ

　・第一引数：楕円の中心のx座標

　・第二引数：楕円の中心のy座標

　・第三引数：楕円の横幅

　・第四引数：楕円の高さ

となっています。

第一引数にあるwidthというのは、p5.min.jsが提供している組み込み変数です。

widthはキャンバスの横幅を表します。

第二引数にあるheightも、p5.min.jsが提供している組み込み変数です。

heightはキャンバスの高さを表します。

先ほどsetup関数の中でcreateCanvas(400,400)を実行して、

横幅400ピクセル、高さ400ピクセルのキャンバスを作成したので、

widthとheightにはそれぞれ400という値が入っています。

ここでキャンバスの座標系について説明します。

キャンバスは2次元平面になっており、原点は左上になります。

キャンバスの座標系

f:id:techty:20190502073714p:plain

原点から右へ行くほどx座標の値は大きくなります。

原点から下へ行くほどy座標の値は大きくなります。

ここで先ほどのdraw関数に戻ります。

draw関数

f:id:techty:20190502063513p:plain

ellipse関数の引数を見るとwidthとheightにはそれぞれ400という値が入っているので、

以下の条件で楕円を描くことになります。

　・第一引数：楕円の中心のx座標 = 200(ピクセル)

　・第二引数：楕円の中心のy座標 = 200(ピクセル)

　・第三引数：楕円の横幅 = 200(ピクセル)

　・第四引数：楕円の高さ = 200(ピクセル)

実際にdraw関数を実行すると以下の画面が描画されます。

f:id:techty:20190501085230p:plain

座標を重ね合わせると以下のようになります。

f:id:techty:20190502081637p:plain

ellipse関数の引数に指定した通り

　・楕円の中心のx座標 = 200(ピクセル)

　・楕円の中心のy座標 = 200(ピクセル)

　・楕円の横幅 = 200(ピクセル)

　・楕円の高さ = 200(ピクセル)

となっていることがわかりますね。

以上で、p5.jsライブラリの基本的な仕組みについての説明は終わりです。

実際にp5.jsライブラリを使って絵やアニメーションを作りたいといったときには、

大体以下のような作業手順になります。

手順

sketch.jsにプログラムを書き込む
index.htmlをブラウザで表示する
ブラウザに表示された内容を確認する
問題なければ作業完了。問題があれば手順1に戻ってプログラムを修正する

基本的にはsketch.jsにプログラムを書き込んでいき、

index.htmlをブラウザで表示して内容を確認するという流れになります。

基本的な仕組みが理解できたら、

簡単なプログラムでよいのでいろいろな作品を作っていきましょう。

最後までお読みいただき、ありがとうございました。