yoppa.org


前橋工科大学デザイン基礎演習 II 2021

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

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

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など様々なテキストエディターで同じように開発が可能です。

説明で使用している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の実行結果が表示されます。以下のようにブラウザに表示されれば開発環境の構築は完了です!