Processing.jsによるHTML5 Canvasグラフィック (4/5)

アニメーションでは、ユーザーの操作に応じた変化を与えたいこともあります。マウスによる変化は、draw関数内で、マウスポインタの位置などをチェックすることで作成することができます。

これは、実際にサンプルを動かしてみた方がわかりやすいでしょう。下に、「マウスポインタの後をついてくるグラフィック」をあげておきます。マウスポインタがCanvasのエリア内にあると、そのマウスポインタに向かって赤い円が追いかけてきます。円は50個あり、それらが残像を残すようにゆっくりと尾を引いて追いかけてきます。

ここでは、各円の描画位置を配列として用意しています。そして、drawが呼び出されたとき、「配列の一番最初の値を、マウスポインタの方向に少しだけ動かす」「２番目以降は、１つ前の円の位置に移動する」というようにして描画する位置を変えています。最初の「マウスポインタの方に少し動かす」というのは、描画する位置を以下のようにして設定しています。

w[0] += (mouseX -w[0]) / 10;
h[0] += (mouseY - h[0]) / 10;

「mouseX」「mouseY」というのは、現在のマウスポインタの位置が収められている変数なのです。これらで位置を調べ、現在の描画位置との差の10分の１だけ、現在の位置に加算しています。これで、「ちょっとだけマウスポインタの方に移動する」ことができたわけですね。

mouseX/mouseYの他、マウスボタンを示す変数として、以下のようなものも用意されています。

mousePressed――マウスボタンが押されているかどうかを示す変数です。真偽値になっており、trueならばマウスボタンが押されています。
mouseButton――押されたボタンを示す変数です。これは「LEFT」「RIGHT」「CENTER」のいずれかになります。

これらを使うことで、マウスの状態を知ることができます。draw関数内でこれらの値をチェックし処理することで、マウスを使ったインタラクティブなアニメーションが作成出来るようになります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※sample.pjsのスクリプト

float[] w = new float[50];
float[] h = new float[50];

void setup(){
	size(250,250);
	frameRate(20);
	noStroke();
	for(int i = 0;i < 50;i++){
		w[i] = 125;
		h[i] = 125;
	}
}

void draw() {
	background(255);
	for(int i = 49;i > 0;i--){
		w[i] = w[i - 1];
		h[i] = h[i - 1];
		fill(255,5 * i,5 * i);
		ellipse(w[i],h[i],25,25);
	}
	w[0] += (mouseX -w[0]) / 10;
	h[0] += (mouseY - h[0]) / 10;
	fill(255,0,0);
	ellipse(w[0],h[0],25,25);
}