p5.jsには「グローバルモード」と「インスタンスモード」という二つの異なる使用方法があります。これらはどちらもp5.jsライブラリを使ってクリエイティブなコーディングを行うためのモードですが、それぞれ異なるケースに適しています。
グローバルモード
グローバルモードは、p5.jsの関数や変数がグローバルスコープに配置される方式です。これはp5.jsが最も簡単に使用できるモードであり、特に小規模なプロジェクトや教育的な環境での利用に適しています。
特徴:
p5.jsの関数やオブジェクトに対して簡単にアクセス可能。
スクリプト全体で一つのp5.jsのインスタンスが自動的に作成される。
setup() や draw() などの関数が直接記述され、p5.jsによって自動的に実行される。
このモードでは、すべてのp5.js関連の機能がグローバル名前空間に存在するため、他のJavaScriptライブラリやスクリプトと名前が衝突する可能性があります。
インスタンスモード
インスタンスモードでは、p5.jsの各インスタンスが独立して動作します。これにより、同一のページ上で複数のp5スケッチを同時に実行することができ、それぞれが独立したスコープを持つため、互いに干渉することなく動作します。
特徴:
new p5() コンストラクタを使って、新しいp5インスタンスを明示的に作成します。
それぞれのインスタンスは、setup() や draw() などの関数を独自のスコープ内で保持し、別々に管理されます。
複数のスケッチをページ上に配置することが可能。
p5.jsでは、setup 関数の呼び出しは window.onload イベントの内部ではなく、p5.jsライブラリが提供する独自の初期化処理によって制御されます。setup 関数がどのようにして呼び出されるかについて具体的な流れを説明します。
p5.jsにおける setup の呼び出し
ライブラリの読み込みと初期化: p5.jsのスクリプトが読み込まれた際に、ライブラリの全体的な初期化が行われます。この初期化には、必要な関数やオブジェクトのセットアップが含まれます。
p5インスタンスの作成: グローバルモードでは、p5.jsは自動的に p5 インスタンスを作成します。このインスタンス化プロセスの一環として、ライブラリはドキュメントの読み込みが完了したかどうかをチェックし、準備が整い次第 setup 関数を実行するようスケジュールします。
初期化プロセスのトリガー: p5.jsでは、document.readyState プロパティを使用して、ページの読み込み状態をチェックします。ページが完全に読み込まれ (complete 状態) と判断された場合、p5.jsは初期化プロセスをトリガーします。
_setup 関数の呼び出し: p5.jsの内部で、ページが読み込まれた後、_setup という内部関数が呼び出されます。この _setup 関数がユーザーが定義した setup 関数を呼び出す責任を持っています。この過程で、setup 関数内で定義されたキャンバス作成や変数初期化などが実行されます。
draw 関数の連続実行: setup 関数の実行が完了すると、p5.jsは draw 関数が定義されていれば、その関数をフレームごとに呼び出し続けるようになります。
このプロセスにより、p5.jsはユーザーに透明な形で、スムーズなスタートアップと継続的な実行を保証します。基本的に、ユーザーは setup や draw の関数を定義するだけで、背後でどのようにこれらが管理されているかを深く考える必要はありません。これにより、特にビジュアルアートやインタラクティブなプロジェクトを手軽に実現することができます。
setup() 関数は、プログラムの起動時に一度だけ呼び出されます。
setup() 関数は、各プログラムに対して 1 つだけ使用することができ、最初の実行後に再度呼び出されることはありません。
setup() の直後に呼ばれた draw() 関数は、プログラムが停止するか noLoop() が呼ばれるまで、 ブロック内のコード行を継続的に実行します。noLoop() が setup() で呼び出された場合でも、draw() は停止する前に一度だけ実行されることに注意してください。
draw() は自動的に呼び出される
draw() が 1 秒間に実行される回数は frameRate() 関数で制御することができます。
例えば、関数呼び出し frameRate(30) は、1 秒間に 30 回のリフレッシュを試みます。指定したレートを維持するためにプロセッサの速度が十分でない場合、フレームレートは達成されません。フレームレートは setup() 内で設定することを推奨します。
デフォルトのフレームレートは、ディスプレイのフレームレート（ここでは「リフレッシュレート」とも呼ばれます）に基づいており、ほとんどのコンピュータでは毎秒60フレームに設定されています。
24 フレーム/秒 (映画の場合は通常) 以上のフレームレートがあれば、滑らかなアニメーションには十分でしょう。これは setFrameRate(val) と同じです。
