p5.js の新バージョン v2.0.0 のメモ（1.x から 2.x へのアップデート）

Posted at 2025-04-19

はじめに

p5.js の新バージョン v2.0.0 がリリースされていたようなので、情報を見ていきつつメモとしての記事を残します。

今回の新バージョン v2.0.0 のリリースに気がついたのは、p5.js Web Editor で下記の見慣れない部分が出ていたことがきっかけです。

その部分を押すと、「There's a new 2.0 release of p5.js available!」 という文章が出ていて、それで気がつきました。

p5.js Web Editor でも、以下から切り替えの操作をすると v2.0.0 を使えるようです。

GitHubリポジトリの Release v2.0.0 のページの説明を見ていきます。

現状、p5.js 2.x の公式ドキュメントは https://beta.p5js.org/ に置かれているようです。

また新バージョンリリースに気がつくきっかけとなった p5.js Web Editor に関して、デフォルトで使われるライブラリのバージョンに関する記載もあります。

具体的には「p5.js Editor: the default will continue to be 1.x until at least August 2026」という部分です。少なくとも 2026年8月までは 1.x がデフォルトで設定された状態になるようです。

p5.js の v1.x と v2.x の違いについて書かれたページもあるようなので、それを少し見てみます。

例えば下記のページ内に、「…loading images, sound, fonts, and other assets」「…making shapes」という部分があります。

●processing/p5.js-compatibility: Add-on libraries that add p5.js 1.x features to p5.js 2.x for backwards compatibility
　https://github.com/processing/p5.js-compatibility

そこには以下の記載があります。

preload() に関して、async/await を使った書き方になるようです。

また以下を見ると、図形描画関連の変更もあるようです。

上で掲載していた、以下の新バージョンのリリース情報ページも見ていきます。

ここもいくつか見てみます。

以下では、カラーモード関連の記載があります。
扱える色空間が増えるようで、個人的には嬉しいポイントの 1つです。

以下では、フォント・テキスト関連の話が書かれています。

2D・3D描画のそれぞれで、テキストを扱う表現の幅が増えそうで嬉しいです。

p5.js のメジャーバージョンが 1.x から 2.x へアップデートされました。
その新バージョンに関する情報を、ざっと見てみつつ、見た内容を記事にメモしてみました。

今回、全ての記載を見られたわけではないので、追いきれてないものも今後見ていければと思います。
また今回書いた新機能に、追いきれてない新機能も含め、実際に試していければと思います。