p5.jsライブラリをインスタンスモードで実行するときのやり方

こんにちわ。nap5です。

p5.jsライブラリをインスタンスモードで実行するときのやり方の一つを紹介したいと思います。

CodePenに動作確認できるサンプルを置きました。

https://www.skypack.dev/view/p5

npm:p5 | Skypack

https://github.com/processing/p5.js/wiki/Global-and-instance-mode

Global and instance mode · processing/p5.js Wiki

https://p5js.org/examples/instance-mode-instantiation.html

examples | p5.js

p5.jsやprocessingのドキュメントをよーく探せば、記載されているので、Web Editor等ではなく、手元で動かしたい場合はそちらを参考にするといいと思います。

公式のサンプル等をもとにちょっと毛をはやしたぐらいですが、シンプルにマイテンプレートを用意してみた次第です。

p5.jsは当たり判定ロジックとかをちょっと検証したいとかに使うと便利そーだなーと思いました。

他にもShaderをcanvasのWebGL経由で実行できるみたいなので、p5.jsをサードパーティーとしたテンプレートもあるとハンディではないかと思いました。

https://p5js.org/reference/#/p5.Shader

https://webglfundamentals.org/webgl/lessons/ja/webgl-shaders-and-glsl.html

WebGLのシェーダーとGLSL

簡単ですが、以上です。