数回に分けてp5.jsの基本的な要素について紹介し、p5.jsでのプロジェクトの始め方を説明します。最初はp5.jsの構文について説明します。

公式リファレンスの以下のプログラムを例に説明していきます。

reference | preload() (p5js.org)

p5.jsは基本的に以下のような構文となっています。以下のプログラムは例に挙げた公式リファレンスを少し変更して記載しています。

// グローバル変数宣言
let img;
let c;

// 画像やフォントなどの外部ファイルを読み込む
// プログラム開始時に1度だけ実行される
function preload() {
  img = loadImage('assets/laDefense.jpg'); //画像の読み込み
}

// preload()が完了すれば実行される
// プログラム開始時に1度だけ実行される
function setup() {
	createCanvas(400, 400); // 幅400px, 高さ400px
	frameRate(30);          // 30fps

	img.loadPixels(); // 画像のピクセルデータを読み込み
  c = img.get(img.width / 2, img.height / 2); // 
}

// setup()が完了すれば実行される
// プログラムが停止するまで繰り返し実行される
function draw() {
	background(c); // 背景を塗りつぶし
  image(img, 25, 25, 50, 50); // 画像を出力
}

特に重要なのが以下の３つの関数です。

• setup( )
• draw( )
• preload( )

draw( )は一定の時間間隔で呼び出される関数です。図形を動かしたい場合は、この関数内に描画用の関数を入力します。→draw( )の公式リファレンス

draw( )の時間間隔はデフォルトでは60fps（１秒間に60回実行）ですが、frameRate( )で時間間隔を変更できます。

setup( )はプログラム開始時に一度だけ実行される関数です。先ほど紹介したframeRate( )や、描画領域の設定を行うcreateCanvas( )など、一度設定すれば変更するのことのないパラメータをこの関数内で設定します。 →setup( )の公式リファレンス

preload( )はプログラム開始時に一度だけ実行される関数で、外部ファイルを確実に読み込むために使用します。上記の例ではpreload( )内で画像を読み込んでいますが、フォントやJSONなども読み込めます。読み込むファイルが特にない場合、preload( )関数は省略できます。 →preload( )の公式リファレンス

名前がややこしいですが、setup( )内のloadPixels( )は画像データ処理用の関数なのでpreload( )内でなくてもOK。

今回はp5.jsの構文について説明しました。

p5.jsの構文はsetup( ), draw( ), preload( )で成り立っており、以下の順番で使います。

①preload( )関数で画像など外部ファイル読み込み（外部ファイルを使用しない場合は省略可）

↓

②setup( )関数で描画領域などの基本設定を行う

↓

③draw( )関数で描画

p.s.

p5.js公式HPに作品例がたくさんあるのですが、画像を使ったこちらの作例。画像の読み込みをpreload( )関数で行っていない。。preload( )関数はそんなに重要ではないかもしれません🙃