新しいライブラリP5.jsが登場したため,Web基礎の方へページを移動しました.このページの内容は古いものです.
導入
Processing.jsというライブラリを使う事により、ProcessingのコードをJavaScriptとして実行する方法について述べる.
Processing.js
Processing.jsは,ProcessingのコードをJavaScriptとして実行するための,JavaScriptライブラリである.
Processing.jsのサイトからダウンロード可能である.
以下のxhtmlコードは,xhtml内に直接Processingのコードを記述して,ProcessingのマウスイベントからJavaScriptの関数を呼び出している.
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Processing Sample</title>
<script type="text/javascript" src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js"></script>
<script type="text/javascript">
window.onload = function(){
//HTMLが開かれた時に呼ばれる初期設定の関数.
//canvasをロードして,Processingのコードを適用する.
var canvas = document.getElementsByTagName('canvas')[0];
var codeElm = document.getElementById('processing-code');
var code = codeElm.textContent || codeElm.innerText;
Processing(canvas, code);
};
</script>
<script type="text/processing" data-processing-target="processing_canvas">
//ここにProcessingのコードをそのまま貼付ける
//ただし色モードはRGB限定
void setup(){
size(400, 400);
colorMode(RGB, 255);
background(255,255,255,0);
noStroke();
frameRate(10);
}
void draw(){
fadeToWhite();
noStroke();
fill(random(255), random(255), random(255), 40);
rect(random(width), random(height), 20, 20);
}
void fadeToWhite(){
noStroke();
fill(255,255,255,30);
rectMode(CORNER);
rect(0, 0, width, height);
}
</script>
</head>
<body>
<h1>Processing Sample 1</h1>
<div>
<canvas id="processing_canvas" width="400" height="400"></canvas>
</div>
</body>
</html>
xhtmlのbody部では,canvasタグを書いておく.
ヘッダ部の最初のscriptタグはJavaScriptの部分には,window.onload()というHTMLファイルが呼ばれた時に実行されるJavaScriptの関数を用意しておき,その中でbody内のcanvasタグを読み込んでProcessingのコードを適用する初期設定(これは定型文なのでそのままコピペする)や,Processingのコードから呼び出したい関数を記述しておく.
次のscriptタグには,Processingのコードをそのまま貼付ける.