Processing.jsによるHTML5 Canvasグラフィック (5/5)
作成:2010-04-26 20:55
更新:2010-12-12 21:36
更新:2010-12-12 21:36
■JavaScriptとの連携とマウスイベント処理
Processingは、独自の言語ですが、JavaScript上で動いていますので、JavaScriptのスクリプトと比較的簡単に連携処理が行えます。あらかじめJavaScript側に関数を定義しておき、それをProcessingのスクリプト内から呼び出すことで、値を受渡したり処理を呼び出したりすることができるのです。
これも実例を見たほうが早いでしょう。下のリストは、JavaScriptと連携しながら動く簡単なサンプルです。ページにアクセスすると、Canvas内を白い円がゆっくり拡大縮小を繰り返して表示されます。マウスで適当な場所をクリックすると、ゆっくりとその方向へと動いていきます。このとき、Canvasの上部には、現在の円の位置がリアルタイムに表示されるはずです。
また、３つの入力フィールドに、それぞれRGBの各輝度を入力し、「set」ボタンを押すと、円の色が変わります。このように、「Processing内からJavaScriptにアクセスする」「JavaScriptからProcessing内にアクセスする」ということが行えることがよくわかるでしょう。
今回のスクリプトでは、Canvas上をマウスでクリックすると処理を行う、といったイベント処理が使われています。Processingのイベント処理は非常にシンプルです。イベントに対応した関数を定義しておくだけなのです。Processingには、あらかじめ各種のイベントに対応して呼び出される関数が定義されています。この関数を用意すれば、自動的にイベントに応じてそれが呼び出されるのです。マウス関連の主なイベント用関数は以下のようになります。
mouseClicked――マウスボタンをクリックしたとき
mouseDragged――マウスをドラッグしたとき（ドラッグ中、連続して呼ばれる）
mouseMoved――マウスポインタが領域内を動いているとき（連続して呼ばれる）
mousePressed――マウスボタンを押し下げたとき
mouseReleased――マウスボタンを離したとき
これらは、引数も何もない関数です。なにしろ、マウスポインタの位置やマウスボタンの状態は、すべてProcessingの変数を参照すればわかるのですから。とりたててイベントのオブジェクトを引き渡す必要などないでしょう。
これも実例を見たほうが早いでしょう。下のリストは、JavaScriptと連携しながら動く簡単なサンプルです。ページにアクセスすると、Canvas内を白い円がゆっくり拡大縮小を繰り返して表示されます。マウスで適当な場所をクリックすると、ゆっくりとその方向へと動いていきます。このとき、Canvasの上部には、現在の円の位置がリアルタイムに表示されるはずです。
また、３つの入力フィールドに、それぞれRGBの各輝度を入力し、「set」ボタンを押すと、円の色が変わります。このように、「Processing内からJavaScriptにアクセスする」「JavaScriptからProcessing内にアクセスする」ということが行えることがよくわかるでしょう。
※マウスクリック時の処理
今回のスクリプトでは、Canvas上をマウスでクリックすると処理を行う、といったイベント処理が使われています。Processingのイベント処理は非常にシンプルです。イベントに対応した関数を定義しておくだけなのです。Processingには、あらかじめ各種のイベントに対応して呼び出される関数が定義されています。この関数を用意すれば、自動的にイベントに応じてそれが呼び出されるのです。マウス関連の主なイベント用関数は以下のようになります。
mouseClicked――マウスボタンをクリックしたとき
mouseDragged――マウスをドラッグしたとき（ドラッグ中、連続して呼ばれる）
mouseMoved――マウスポインタが領域内を動いているとき（連続して呼ばれる）
mousePressed――マウスボタンを押し下げたとき
mouseReleased――マウスボタンを離したとき
これらは、引数も何もない関数です。なにしろ、マウスポインタの位置やマウスボタンの状態は、すべてProcessingの変数を参照すればわかるのですから。とりたててイベントのオブジェクトを引き渡す必要などないでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※HTMLファイルのソースコード
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Sample Page</title>
<script type="text/javascript" src="./processing-1.0.0.min.js"></script>
<script type="text/javascript">
<!--
var r = 0;
var g = 0;
var b = 0;
function getR(){
return r;
}
function getG(){
return g;
}
function getB(){
return b;
}
function setRGB(){
r = document.getElementById("r").value;
g = document.getElementById("g").value;
b = document.getElementById("b").value;
}
function setXY(val){
document.getElementById("xy").innerHTML = val;
}
//-->
</script>
</head>
<body onload="init();">
<h1>サンプル</h1>
<input type="text" id="r" size="5" value="255" />
<input type="text" id="g" size="5" value="0" />
<input type="text" id="b" size="5" value="0" />
<input type="button" value="set" onclick="setRGB();" />
<div id="xy"></div>
<canvas data-src="./sample.pjs"></canvas>
</body>
</html>
※sample.psjのスクリプト
float w = 125;
float h = 125;
float nw = 125;
float nh = 125;
float r = 10;
float dr = 1;
void setup(){
size(250,250);
frameRate(20);
noStroke();
}
void draw() {
if (w < nw) w++;
if (w > nw) w--;
if (h < nh) h++;
if (h > nh) h--;
r += dr;
if (r > 50) dr = -1;
if (r < 10) dr = 1;
background(225);
setXY("x: " + w + ", y: " + h);
fill(getR(),getG(),getB(),100);
point(nw,nh);
ellipse(w,h,r,r);
}
void mouseClicked(){
nw = mouseX;
nh = mouseY;
}
※関連コンテンツ