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