SFC – デザインとプログラミング 2020
p5.js プログラミング環境の構築
p5.jsはJavaScriptのライブラリーで、Webブラウザ上で動作します。p5.jsでプログラミングを始めるためにはいくつかの方法が存在します。難易度が簡単なものから4通りの方法を紹介します。
1. p5.js Web Editorを使用する

一番簡単な方法です。以下のリンクのサイトにアクセスするとp5.jsのオンラインの開発環境が起動します。ユーザー登録することでコードを保存することも可能です。
2. openProcessingを使用する

openProcessingはp5.js Web Editorと同様に、p5.jsをオンラインで開発可能なWebサービスです。p5.jsだけでなく各種のJavaScirptのライブラリーに対応しています。ユーザー登録することで使用可能になります。
3. Visual Studio Code + CDNの利用

Webサイト上の開発環境ではなく、PCにインストールしたテキストエディターを使用してp5.jsを使用する方法です。ここでは、Visual Studio Codeを使用しますが、Atomやvim、emacsなど様々なテキストエディターで同じように開発が可能です。
3.1 Visual Studio Codeのインストール
Visual Sutudio Codeのサイトにアクセスします。トップページにアクセスしたOSにあわせてダウンロードのボタンが表示されます。macOS、Windows、Linuxに対応しています。
3.2 Extension (拡張機能) のインストール
Visual Studio Codeに以下の2つの拡張機能をインストールします。それぞれのサイトの「Install」ボタンを押すとVisual Studio Codeが起動し自動的にインストールされます。
3.3 HTMLファイルの作成
p5.jsのプログラムを表示する土台となるHTMLファイルを作成します。以下のコードをVisual Studio Codeで入力し任意の場所に「index.html」という名前で保存します。
<html> <head> <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script> <script src="sketch.js"></script> </head> <body style="margin: 0;"> <main> </main> </body> </html>
3.4 スケッチの作成
index.htmlと同じ階層のフォルダにp5.jsのスケッチを作成します。ファイル名は「sketch.js」で保存します。例えば以下のようなプログラムを作成します。
function setup(){ createCanvas(windowWidth, windowHeight); background(31, 127, 255); } function draw(){ noStroke(); fill(255, 255, 0); ellipse(width/2, height/2, height/2); }
3.5 Live Serverの起動
p5.jsのスケッチを起動するには、PC内でローカルなWebサーバーを起動する必要があります。ここでは、Visual Studio Codeの拡張機能のLive Serverを利用します。index.htmlとsketch.jsが格納されたフォルダをVisual Studio Codeで開くと画面の右下に以下のようなLive Serverへの接続ボタンが表示されます。このボタンを押すと、Webブラウザ上でローカルなWebサーバーが起動しスケッチが表示されます。

以下のようにブラウザに表示されれば開発環境の構築は完了です!
