Processing.jsを使ってみる (2)

More than 3 years have passed since last update.


はじめに

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


Processing.jsの使い方

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


  1. Processingのみを使う方法

  2. 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に記述した内容が表示されます。

running_on_pc_env.png


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タグに記述した内容が表示されます。

running_on_pc_env_with_js.png


おわりに

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

Processing.jsを使ってみる

Processing.jsを使ってみる (3)

Processing.jsを使ってみる (4)