新しいライブラリP5.jsが登場したため，Web基礎の方へページを移動しました．このページの内容は古いものです．
導入
Processing.jsからは，JavaScriptの関数を呼び出す事ができる．本気時ではその方法について述べる．
Processing.jsからJavaScriptの関数を使い方の基礎
以下の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 2</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);
};
//Processingから呼び出す関数を記述しておく---------------------
function printMousePosition(msg){
document.getElementById('message').innerHTML = msg;
}
//Processingから呼び出す関数ここまで--------------------------
</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);
//ここで上に書いておいたJavaScriptの関数を呼び出す----------
printMousePosition("MousePosition:" + mouseX + "," + mouseY);
}
void fadeToWhite(){
noStroke();
fill(255,255,255,30);
rectMode(CORNER);
rect(0, 0, width, height);
}
</script>
</head>
<body>
<h1>Processing Sample 2</h1>
<div>
<canvas id="processing_canvas" width="400" height="400"></canvas>
</div>
<div id="message">Sample</div>
</body>
</html>
最初の初期設定の<script />セクションに，JavaScriptで，呼び出したい関数を記述しておく．
Processingの中で呼び出したいコードをJavaScriptの関数呼び出し書法に従って書けば，その関数が実行される．
上記のコードでは，HTML内のcanvasの下にid=messageというdivを作り，それをgetElementsByIdを使って取得し，innerHTMLを使って，マウスのcanvas上のポジションを書き込んでいる．
変数の連携
初期設定の<script />セクションに，JavaScriptの形式(var宣言)で変数を宣言しておけば，Processingの中のコードからも扱う事ができる．
<!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 3</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);
};
//Processingからアクセスする変数を宣言しておく
var mousePosX = 0;
var mousePosY = 0;
//Processingから呼び出す関数を記述しておく---------------------
function printMousePosition(){
if(mousePosX < 200){
if(mousePosY < 200){
document.getElementById('message').innerHTML =
"今は左上にいますよ";
}
else{
document.getElementById('message').innerHTML =
"今は左下にいますよ";
}
}
else{
if(mousePosY < 200){
document.getElementById('message').innerHTML =
"今は右上にいますよ";
}
else{
document.getElementById('message').innerHTML =
"今は右下にいますよ";
}
}
}
//Processingから呼び出す関数ここまで--------------------------
</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(mouseX, mouseY, 20, 20);
//JavaScript側で宣言しておいた変数にProcessingの変数の値を代入
mousePosX = mouseX;
mousePosY = mouseY;
//JavaScriptの関数を呼び出す
printMousePosition();
}
void fadeToWhite(){
noStroke();
fill(255,255,255,30);
rectMode(CORNER);
rect(0, 0, width, height);
}
</script>
</head>
<body>
<h1>Processing Sample 3</h1>
<div>
<canvas id="processing_canvas" width="400" height="400"></canvas>
</div>
<div id="message">
</div>
</body>
</html>
このコードでは，JavaScript側で宣言した変数mousePosXとmousePosYにProcessing側から値を代入して，if文で判定を行い，id=messageのdivに表示させている． JavaScript側で変数を宣言すれば，JavaScript，Processingの両方からアクセスできる．
