Processing.jsをJavaScriptから使う

PS4を買った勢いで色々ゲームを購入したのですが、全然プレイできていません。机に積んであるアサシンクリードIVがプレイできるのは大分先になってしまいそうです。

さて、ここのところJavaを書くことが多く、JavaScriptが懐かしくなって来たので、今回はJavaScriptからProcessing.jsを使ってみたいと思います。

Processing.jsで使えるプログラム言語

Processing.jsは内部でProcessing言語をJavaScriptに変換して実行するため、次の3通りの方法でコードを書くことができます。

  1. Processing言語(文法に一部変更を加えたJava
  2. Processing言語+JavaScript
  3. JavaScript

3つ目の方法では、他のJavaScriptライブラリを使う場合と同じ感覚でコードを書くことができます。

Processing.jsをJavaScriptから使う

JavaScriptでProcessing.jsを使う方法は、公式サイトのチュートリアルで説明されているのですが、せっかくなので一通り実践してみます。

Processing.jsの読み込み

まずProcessing.jsを読み込みます。以前と同じくcdnjsを利用します。

<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>

描画先canvasの準備

次に描画先canvasを用意します。divで中央寄せしつつ、JavaScriptから参照できるようにcanvasにid(この例では"processing")を指定します。

<div style="text-align:center">
  <canvas id="processing"></canvas>
</div>

スケッチの作成

最後にJavaScriptでスケッチ(Processingのコード)を書きます。

スケッチ全体を以下のように一つの関数にします。Processingの命令や変数はすべて関数の引数(この例ではp5)経由で呼び出すことと、setup関数とdraw関数のオーバーライド方法がいつもと異なる点に注意してください。

var sketch = function(p5) {
  p5.setup = function() {
    p5.size(300, 300);
    p5.background(0);
  };

  p5.draw = function() {
    p5.stroke(255, 0, 0);
    p5.line(0, 0, p5.width, p5.height);
  };
};

var canvas = document.getElementById("processing");
var processing = new Processing(canvas, sketch);

作成した関数と描画先のcanvasを渡して、ProcessingクラスのインスタンスをnewするとProcessing.jsの描画が開始されます。

動作を確認する

実際にJavaScriptで書いた以下のサンプルを動かしてみます。見栄え重視で最初のscriptタグとdivタグの順序は逆転させてあります。

<div style="text-align:center">
  <canvas id="processing"></canvas>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>
<script>
var sketch = function(p5) {
  p5.setup = function() {
    p5.size(300, 300);
  };

  p5.draw = function() {
    p5.background(0);

    p5.stroke(0, 255, 0);
    p5.fill(0);
    for (var i = 0; i < p5.width; i += 3) {
      p5.rect(i, p5.noise(i / 50, p5.frameCount / 50) * p5.height, 10, 10);
    }
  };
};

var canvas = document.getElementById("processing");
var processing = new Processing(canvas, sketch);
</script>

無事、JavaScriptからProcessing.jsを動かすことができました。

終わりに

Processingのお手軽さは、JavaScriptの言語的な緩さととても相性がいい気がします。JavaScriptを使うと起動処理やクラスの記述などが若干煩雑になってしまうのですが、その辺りを補う補助ライブラリなんかを作ってみるのもいいかもしれません。