前橋工科大学デザイン基礎演習 II 2021
p5.js プログラミング環境の構築
p5.jsはJavaScriptのライブラリーで、Webブラウザ上で動作します。p5.jsでプログラミングを始めるためにはいくつかの方法が存在します。難易度が簡単なものから3通りの方法を紹介します。
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など様々なテキストエディターで同じように開発が可能です。
説明で使用しているHTMLとp5.jsのコードは下記からダウンロードできます。
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.4.0/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);
circle(width / 2, height / 2, height / 2);
}
3.5 Live Previewの起動
p5.jsのスケッチを起動するには、PC内でローカルなWebサーバーを起動する必要があります。ここでは、Visual Studio Codeの拡張機能のLive Previewを利用します。index.htmlとsketch.jsが格納されたフォルダをVisual Studio Codeで開きます。その状態で
- Windows / Linux : [Control] + [Shift] + [p] キー
- macOS : [Command] + [Shift] + [p]キー
を入力します。すると画面丈夫にVSCodeのコマンドパレットが表示されます。ここに以下のコマンドを入力します。
Live Preview : Start Server
すると、画面の右側にp5.jsの実行結果が表示されます。以下のようにブラウザに表示されれば開発環境の構築は完了です!
