yoppa.org

SFC – デザインとプログラミング 2020

p5.js プログラミング環境の構築

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

1. p5.js Web Editorを使用する

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

2. openProcessingを使用する

Image result for 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サーバーが起動しスケッチが表示されます。

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