トレイルトップに戻る    印刷する

マウスの動きに応答する

次に、描いた図形をマウスの動きに応じて、変化させてみます。動きのあるプログラムとなるので、Activeモードでプログラムを書きます。

マウスの位置

マウスの位置は、processingがあらかじめ定義している変数(システム変数)に格納されています。
mouseX   現在のマウスの水平方向の座標
mouseY   現在のマウスの垂直方向の座標
マウスの位置に円を描いてみましょう。setup()関数内に画面の大きさ設定など1度だけ実行する処理を書き、draw()関数内に応答させる処理を書きます。

Your browser does not support the canvas tag.

【リスト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()を使います。マウスが早く動けば、距離は大きくなります。次の例では、距離を円の直径として使っているので、マウスを早く動かすと大きな円が描かれます。

Your browser does not support the canvas tag.

【リスト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割ずつ近づきます。だんだん近づくので、進む距離も小さくなり、目的地に近づくとゆっくり動きます。

Your browser does not support the canvas tag.

【リスト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の条件文を使って、マウスボタンが押されていたら赤で、そうでないなら黒で、円を描きます。

Your browser does not support the canvas tag.

【リスト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);
}

演習問題


Your browser does not support the canvas tag.

【問題3-1】練習問題1-3の放射線の中央が、マウスについて動くようにしてみましょう。
放射線がゴムひものように伸び縮みする感覚が楽しめます。左図では、背景色を白にしています。


Your browser does not support the canvas tag.

【問題3-2】円がマウスにゆっくり近づくイージングの例のリスト3_3を次のように修正してください。
・250X250の白い画面上を、黒の円がマウスへ向かって動く。
・マウスが押されているときは、円は動かない。


Your browser does not support the canvas tag.

【問題3-3】練習問題3-1では、放射線の中央が、マウスに一致して動きましたが、マウスの位置に放射線の集まる点が徐々に近づくように変更してください。イージングの係数は例えば0.08のようにします。


arigat アットマーク acm.org / copyright © info