マウスの動きに応答する
次に、描いた図形をマウスの動きに応じて、変化させてみます。動きのあるプログラムとなるので、Activeモードでプログラムを書きます。マウスの位置
マウスの位置は、processingがあらかじめ定義している変数(システム変数)に格納されています。mouseX 現在のマウスの水平方向の座標 mouseY 現在のマウスの垂直方向の座標マウスの位置に円を描いてみましょう。setup()関数内に画面の大きさ設定など1度だけ実行する処理を書き、draw()関数内に応答させる処理を書きます。
【リスト3-1】
void setup() {
size(250, 125);
}
void draw() {
ellipse(mouseX, mouseY, 10, 10);
}
右側の灰色の画面(灰色は描画ウィンドウのデフォルトの背景色)の上でマウスを動かしてください。円が重なって、描かれます(最初,座標の原点(0,0)である左上角に円があります)。 draw()関数は、指定されたフレームレート(デフォルトで60回/秒)で、 繰返し実行されます。それにより、 ellipse()関数が繰返し実行され、その結果として円が描かれます。 重なって描かれるのは、同じ画用紙である画面上に描画しているからです。 1つ円を描くごとに、新しい画用紙を使えば、1つの円が動いているように見えます。円を描く前に、画面を背景色で塗れば(background())、それが実現できます。白く塗るには、 backrgound(255);と書きます。
前のフレームでのマウスの位置、つまり前のdraw()の実行時のマウスの位置も保存されています。上の例で、mouseXをpmouseXに、mouseYをpmouseYにしてみましょう。マウスを早く動かすと円がマウスについてくるようすがわかります。
pmouseX 前のdraw()の実行時のマウスの水平方向の座標 pmouseY 前のdraw()の実行時のマウスの垂直方向の座標
マウスのスピード
前のフレームのマウスの位置と現在のマウスの位置の差から、マウスの移動スピードを計算できます。2つの位置の距離を計算するには、dist()を使います。マウスが早く動けば、距離は大きくなります。次の例では、距離を円の直径として使っているので、マウスを早く動かすと大きな円が描かれます。
【リスト3-2】
void setup() {
size(250, 125);
}
void draw() {
float r = dist(mouseX, mouseY, pmouseX, pmouseY);
ellipse(mouseX, mouseY, r, r);
}
マウスへゆっくり近づく(イージング)
リスト3-1はマウスの位置に円が描かれますが、マウスが動いたら、その位置にゆっくり円が近づいてくるようにすると、流れるような効果をもった動きを実現できます。これをイージング(easing)と呼びます。目的地に近づくスピードを変えていきます。そのスピードは目的地と現在地との差の何割にするかで計算します。割合easingは0と1の間の数字で、easingが1なら、差の分だけ一気に近づくので、リスト3-1と同じでマウスの位置に直接円が描かれます。0.1なら1割ずつ近づきます。だんだん近づくので、進む距離も小さくなり、目的地に近づくとゆっくり動きます。
【リスト3-3】
float easing = 0.05;
float x, y;
void setup() {
size(250, 125);
}
void draw() {
float targetX = mouseX;
float targetY = mouseY;
x = x + (targetX - x) * easing; //差の0.05分だけ近づく
y = y + (targetY - y) * easing;
ellipse(x, y, 10, 10);
}
マウスボタン・キーの状態
マウスボタンが押されているかどうかの状態、いずれかのキーが押されているかどうかの状態が、processingのシステム変数に格納されています。mousePressed 値がtrueならボタンが押されている、falseなら押されていない。 keyPressed 値がtrueならどれかのキーが押されている、falseなら押されていない。次の例では、リスト3-3に対して変更を加え、if-elseの条件文を使って、マウスボタンが押されていたら赤で、そうでないなら黒で、円を描きます。
【リスト3-4】
float easing = 0.05;
float x, y;
void setup() {
size(250, 125);
noStroke(); // 円の枠線を描かない
}
void draw() {
float targetX = mouseX;
float targetY = mouseY;
x = x + (targetX - x) * easing;
y = y + (targetY - y) * easing;
if(mousePressed){ // mousePressedの値がtrueなら赤
fill(255,0,0);
}else{ // falseなら黒
fill(0,0,0);
}
ellipse(x, y, 10, 10);
}
演習問題
放射線がゴムひものように伸び縮みする感覚が楽しめます。左図では、背景色を白にしています。
・250Ｘ250の白い画面上を、黒の円がマウスへ向かって動く。
・マウスが押されているときは、円は動かない。