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

マウスイベントに応答する

マウスに応答1のセクションでは、マウスの位置(mouseXとmouseY)やボタンの状態(mouseIsPressed)を保存したシステム変数をdraw()関数の中で使って、マウスに応答する方法を説明しました。Webブラウザ上で、マウスが操作されると、マウスイベントと呼ばれる情報が発生します。マウスイベントの種類ごとに、呼出される関数(イベント関数)が決まっていて、その中に自分のスケッチで実行したい処理を記述しておきます。
マウスイベントが発生すると、draw()関数の実行が1回終わるのを待って、対応するイベント関数が呼出されます。draw()関数は繰返し実行されて描画を行ってますが、その途中でイベントが起きたことで(例えばマウスが動いたことで)、描画をじゃましないように、draw()が終わるまで待ってから、イベント処理を実行します。

マウスイベント

マウス操作に応じて呼出される関数には次のものがあります。マウス操作に応じたイベント処理をさせたい場合は、そのマウス操作で実行される関数をプログラム内で定義し、ブロックの中(中括弧｛と｝の間)に書いておきます。 いずれの関数も、引数ありません(オプションでmouseEventを引数にとることもできます)。 
mousePressed( [event] )   マウスボタンが押された時、ブロックの中のコードが1回実行される。
mouseReleased()   マウスボタンが離された時、ブロックの中のコードが1回実行される。
mouseMoved()   マウスが動いた時、ブロックの中のコードが1回実行される。
mouseDragged()   マウスがドラッグした時、ブロックの中のコードが1回実行される。
mouseClicked()   マウスボタンが一度押され、話された時、
Webブラウザが独自にマウスイベントに対するデフォルトの処理を設定している場合もあり、そのデフォルト処理を避けるために、これらのマウスイベント関数を定義する場合は、処理の最後で必ず、return false;を入れてください。 
function mouseMoved() {
   //自分の処理
   return false;
}
リストT2-3-1と同じ動きをするスケッチをmouseMoved()を使って書くと次のようになります。 draw()関数の中でする処理はありませんが、プログラムを動かし続けるために、ブロック内が空のdraw()関数は必須です。 
【リストT2-4-1】
function setup() {
  createCanvas(250, 125);
  stroke(200, 0, 0);
  background(240);
}
function draw() {
}
function mouseMoved() {
  circle(mouseX, mouseY, 10);  //マウスの位置の円を描く
  return false;                //予期しないデフォルト処理を防ぐため、これを入れる
}


マウスクリックで処理を再開

矩形を成長させるのプログラムは、 矩形が成長し終わった後、マウスを押下するとまたゼロから描画するようになっています。

クリックで再度成長

この処理のために、リストT2-2-3には載せていませんが、下のようにmousePressed()関数を定義しています。 
【リストT2-2-3に追加】
function mousePressed() {
  for (let i=0; i<currentH.length; i++) {
    currentH[i] = 0.0;  //矩形の高さを初期化
  }
  return false;
}

演習問題

【問題T2-4-1】
矩形を成長させるの【リストT2-2-3】を円が大きくなる形に書き直してみよう。そして、キャンバス上でマウスを押下すると、ゼロから円が大きくなるようにしてみよう。
copyright © info