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

## はじめに

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

●Release v2.0.0 · processing/p5.js
　https://github.com/processing/p5.js/releases/tag/v2.0.0

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3b1e99b0-7a1d-446f-8457-dc4399bf5812.png)


### v2.0.0 のリリースに気がついたきっかけ

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/25f82065-5795-4cd8-b769-f3c09b974a53.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d41cd78c-3556-4684-8926-243b680e6ddf.png)


#### p5.js Web Editor での v2.0.0 の利用

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/34d7cfff-d207-4f8a-8912-d371e9db1b1f.png)


## p5.js v2.0.0 の情報

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5dbdd7fb-0a40-4272-9932-bc7f9e5a7f8b.png)


### p5.js v2.0.0 の公式ページ

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3a08b76b-66d8-4d13-8ca5-5010003f6b32.png)


### p5.js Web Editor での v2.x の扱い

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

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


### v1.x と v2.x の違いの例

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

例えば下記のページ内に、「[…loading images, sound, fonts, and other assets](https://github.com/processing/p5.js-compatibility?tab=readme-ov-file#loading-images-sound-fonts-and-other-assets)」「[…making shapes](https://github.com/processing/p5.js-compatibility?tab=readme-ov-file#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 を使った書き方になるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7f0bce4a-d916-48f1-9ac8-30b5dc278711.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b7775161-2b4b-4055-a9b8-69188f5d5599.png)


### 新バージョンのリリース情報のページも見ていく

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

●Release v2.0.0 · processing/p5.js
　https://github.com/processing/p5.js/releases/tag/v2.0.0

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


#### カラーモード関連

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ef7e693f-da4c-4d27-8a6f-507c10a81abb.png)


#### フォント・テキスト関連

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4eeeabd6-0350-4618-baee-bab621f7ce2c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2927b7bd-209c-433d-893a-5bc590050a2d.png)



## おわりに

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

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