はじめに

前回Processing実行環境上で動かしたプログラムを、今回はProcessing.jsを使用してブラウザ上で動作させたいと思います。

Processing.jsの使い方

Processing.jsの公式サイトのlearningページによると実装方法として二つの方法があるようです。

Processingのみを使う方法
JavaScriptと共にProcessingを使う方法

1. Processingのみを使う方法

Processing言語のみで実装することが出来ます。
既存のProcessing言語で作成したプログラムをブラウザ上で動作させることが出来ます。

ファイル構成

ファイル名	内容
processing.js	processing.jsライブラリ
anything.html	htmlファイル
anything.pde	processing言語で記述されている。canvasのdata属性に設定することでこのファイルを読み込ませる。
※anything.pdeを読み込ませないで、anything.htmlに直接processing言語を記述する方法もあります。

2. JavaScriptと共にProcessingを使う方法

JavaScriptでProcessingのオブジェクトを生成するときに引数に描画用関数を渡すことで描画します。

Processing.jsを使ってみる

1. Processingのみを使う方法

はじめに「Processingのみを使う方法」を試してみたいと思います。

ファイル構成は以下の通りです。

ファイル名	内容
processing.js	processing.jsライブラリ
index.html	anything.htmlの役割
processing.pde	processing言語で記述されている。描画処理は基本的にこのファイルに記述する。

index.html

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

processing.pde
※前回Processing実行環境上で動かしたプログラムと同じものです。

void setup() {
  size(200, 200);
  background(125);
  fill(255);
  noLoop();
}

void draw() {  
  text("Hello World!", 20, 20);
}

動作結果

ブラウザでindex.htmlを開くとprocessing.pdeに記述した内容が表示されます。

2. JavaScriptと共にProcessingを使う方法

次は、「JavaScriptと共にProcessingを使う方法」を試してみたいと思います。
ファイル構成は以下の通りです。

ファイル名	内容
processing.js	processing.jsライブラリ
index.html	今回は、このファイルにProcessingオブジェクトを使うJavascriptを記述する

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Processing Demo</title>
  <script src="./processing.js"></script>
</head>
<body>
  <canvas id="canvas" width="200" height="200"></canvas>

  <script>
  function sketchProc(processing) {
    processing.setup = function() {
      processing.size(200, 200);
      processing.background(125);
      processing.fill(255);
      processing.noLoop();
    }

    processing.draw = function() {
      processing.text("Hello World!", 20, 20);
    }
  }

  var canvas = document.getElementById("canvas");
  var p = new Processing(canvas, sketchProc);
  </script>
</body>
</html>

動作結果

ブラウザでindex.htmlを開くとindex.htmlのscriptタグに記述した内容が表示されます。

おわりに

Processing.jsを使用することにより、ブラウザ上で前回試したProcessingの開発環境と同等のことが実現できることが分かりました。次回は、Firefox OSを搭載したFx0で、Processing.jsを使ってみたいと思います。

Processing.jsを使ってみる
 Processing.jsを使ってみる（３）
Processing.jsを使ってみる（４）