この記事ではp5.jsの始め方について説明します。

notionを使ったブログを開設しました！

ページの管理が楽で記事も作成しやすい。これだけハイクオリティなのに無料 ☺️

easy-notion-blog素晴らしいです。

p5.jsは電子アート・ビジュアルデザインのためのJavaScriptライブラリです。「Processing」というjavaをベースにしたプログラミング言語のJavaScript バージョンです。

イラスト作成用の関数が豊富に用意されており、使い方は公式リファレンスに紹介されています。

また、OpenProcessingというサイトにp5.jsやProcessingで作成されたアート作品をコード付きで見ることができます。見るだけでも楽しいですし、作品のコードを参考にして自分でアート作品を作ることもできます。

p5.jsを始めるには主に以下の2パターンがあります。

• Webエディターを使う
• ローカルで実行する

それぞれの使い方について、公式HPのチュートリアルを基に説明していきます。

Webエディターは以下のような方におススメです。

• 簡単にp5.jsを体験してみたい
• 複数のパソコンでコーディングを行う

先ほど紹介したチュートリアルの「Your First Sketch」にある「p5.js web editor」をクリックします。

すると、以下のような画面が立ち上がります。以上で準備完了。

たったこれだけでp5.jsを始めることができます。

あとはコードを入力して左上の「▶」をクリックします。すると入力に応じたイラストが出力されます。

Webエディターではクラウド上にデータを保存できます。

データを保存する場合は登録が必要となるため、まずは「Sign up」で登録を行います。登録が完了している方は「Log in」をクリック。

ログインした状態であれば「File」→「Save」で保存することができます。

また、保存したコードは「File」→「Open」で再度編集することができます。

ローカルでp5.jsを実行する方法は以下のような方におススメです。私はこちらの方法でp5.jsを使用しています。

• p5.jsを本格的に始めたい
• JavaScriptのデバッグ環境がすでにある
• お気に入りのエディターがある

Webエディターでの始め方はとても簡単でしたが、こちらも簡単です。

まずは、index.htmlを作成してチュートリアルにある以下のコードをコピペします。

次に、index.htmlと同じディレクトリにsketch.jsを作成します。このsketch.js内にコードを入力することでイラストを出力することができます。非常に簡単です。

今回はp5.jsの始め方について説明しました。

簡単にp5.jsを始めてみたい方 → Webエディター

本格的にp5.jsを始めてみたい方 → ローカルで実行

OpenProcessingにあるアート作品を参考にして自分でコードを描いてみる。

関数の使い方は公式リファレンスを確認する。

※補足

私が使用しているVS Codeでのおススメ拡張機能

• Live Server

htmlをローカルホストで立ち上げて、コードを変更すれば自動でリロードしてくれる

• DevTools for Chrome

ChromeでJavaScriptのデバッグが行える

• p5js Snippets

p5.jsライブラリにある関数の入力をサポートしてくれる