Processingでつくった作品をWebブラウザで表示する

パソコン画面上で図形をアニメーション表示するために「Processing」というプログラム開発環境をつかってみました（記事はこちら）。

さて、私は最終的には「Processing」でつくったものをWebブラウザで表示させたいと思っています。
調べたところ、「Processing」でつくった作品をWebブラウザで表示するには、いくつかの方法があるようです。

processing.js
p5.js
p5.js Web Editor

processing.js

ProcessingでつくったプログラムをWebブラウザで表示してくれるライブラリです。

以下の3ファイルをWebサーバの同一フォルダに設置します。

processing.js：こちらからダウンロードします。
XXX.pde：Processingで作成したプログラムです。今回はProcessingのサンプルプログラム「Mouse2D」をそのまま使います。内容は以下のとおりです。

void setup() {
  size(640, 360); 
  noStroke();
  rectMode(CENTER);
}

void draw() {
  background(51);
  fill(255, 204);
  rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
  fill(255, 204);
  int inverseX = width-mouseX;
  int inverseY = height-mouseY;
  rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}

XXX.html：内容は以下のとおりです。scriptタグで「processing.js」を、canvasタグで「XXX.pde」を指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>processing.js demo</title>
<script src="processing.js"></script>
</head>
<body>
<canvas data-processing-sources="Mouse2D.pde"></canvas>
</body>
</html>

Webブラウザで「XXX.html」を開くと、「Processing」でつくった作品がWebブラウザで表示されます。マウスを動かすと、きちんと正方形が移動します。

とても簡単に、「Processing」でつくった作品をWebブラウザで表示することができました。
ただし、「processing.js」は既にメンテナンスモードになっており、今後更新されないようです。

p5.js

ProcessingをJavaScriptに移植したライブラリです。
Processingで作成したプログラムそのものを使うことはできず、JavaScriptでプログラムをつくり直す必要がありますが、JavaScriptはそもそもWebブラウザ用の言語ですので、最初からp5.jsでプログラムをつくっておけば、後々いろいろと応用がききそうです。

以下の2ファイルをWebサーバの同一フォルダに設置します。

XXX.js：ProcessingのプログラムをJavaScriptでつくり直したものです。今回はProcessingのサンプルプログラム「Mouse2D」をJavaScriptでつくり直してみました。内容は以下のとおりです（Processingプログラムからの変更点は赤字の箇所です）。

function setup() {
  createCanvas(640, 360);
  noStroke();
  rectMode(CENTER);
}

function draw() {
  background(51);
  fill(255, 204);
  rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
  fill(255, 204);
  let inverseX = width-mouseX;
  let inverseY = height-mouseY;
  rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}

XXX.html：内容は以下のとおりです。scriptタグでCDNに保存されている「p5.js」と、上記の「XXX.js」を指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>p5.js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
</head>
<body>
<script src="Mouse2D.js"></script>
</body>
</html>

Webブラウザで「XXX.html」を開くと、「p5.js」でつくった作品がWebブラウザで表示されます。こちらもマウスを動作に応じて正方形が移動します

どちらの方法でも、非常に簡単に作品をWebブラウザで表示することができました。

「processing.js」のメリットは、Processingでつくったプログラムを修正することなくそのまま利用できる点ですが、私のようにこれまで全くProcessingの利用経験がない者にとっては、作成済みのプログラムを活用する必要はありません。
どうせ新規にプログラムをつくるなら、最初からWebブラウザに適した「p5.js」を使う方が良さそうです。
そんな訳で、今後は「p5.js」を利用することにします。