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

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

マウスに応答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() {
  ellipse(mouseX, mouseY, 10, 10); //直径10の円をマウスの位置に描く
  return false;
}


マウスクリックで表示切り替え

リストT2-2-2は、3秒ごとに表示するデータの年を切り替えていました。これをマウスクリックが起こった時に次の年のデータを表示するように変更します。
経過時間を数えて処理している部分を削除し、mouseClicked関数の定義を追加します。 
【リストT2-4-2】
function mouseClicked() {
   n++;
   if(n >= dataName.length ){ 
      n = 0; 
   }
   return false;
}

演習問題

【問題T2-4-1】
リストT2-4-2はキャンバス上どこでクリックしても応答します。赤い円の上でクリックされた場合だけ、次の年の表示に移るようにするには、マウス位置の判定が必要です。そのように、リストT2-4-2を変更してみよう。
copyright © info