2023年03月16日更新

p5.js Web Editorをつかってみよう

どうも、クラゲジュニアです。

今回は、p5.jsと呼ばれるアニメーションを簡単に作成できるフレームワークを触ってみようと思います。

p5.jsとは

p5.jsとは、processingライクにアニメーションを簡単に作成することができるライブラリです。また、p5.jsではp5.js Web Editorと呼ばれる開発環境も提供しており、アカウントを発行することですぐに使うことができます。

画像引用元: p5.js

まず、こちらにアクセスして、実行ボタンをクリックしてみてください。星が舞い落ちるアニメーションが開始されます。

(ちなみに、このプログラムはChatGPTに書いてもらったプログラムです！)

このようにp5.js Web Editorはアカウントが無くてもプログラムの閲覧、実行(停止)をすることができます。

まず、こちらのURLにアクセスしてアカウントを発行します。アカウントをすでに持っている方がアクセスした場合、Edit画面にリダイレクトされます。

画像引用元: p5.js

2023/3/14現在において、アカウントの作成は無料で行えます。メール認証の場合、アカウント発行後、追って認証のメールが届くためVerify Emailをクリックして認証します。

なお、場合によって認証メールがなかなか届かないことがありますが、アカウント作成当日に関しては認証せずにそのまま使用できます。

Sign Up画面上でのアカウントの作成が完了すると、このようなプログラム編集画面へジャンプします。ここに自分のプログラムを書いていくことができます。

これでプログラムを書くための準備ができました。次回は簡単なプログラムを書いてみます。

以上です。