p5jsトップに戻る    印刷する

イベント処理

マウスに応答のセクションでは、p5.jsがあらかじめ用意している、マウスの位置(mouseXとmouseY)やボタンの状態(mouseIsPressed)を保存した変数をdraw()関数の中で使って、マウスに応答する方法を説明しました。p5.jsは、それとは別に、マウス操作やキー入力といったイベントを処理する仕組みを備えています。
マウスが動いたりキーが押されると、イベントと呼ばれる情報が発生します。p5.jsはそれに応じたイベント関数を呼出すことで、応答します。実行したいイベント関数を定義しておけば、イベントが起きた時に自動的に呼び出してくれます。関数を定義することは関数を作るセクションで説明しました。

細かく言うと、draw()関数の実行が1回終わるのを待って、イベント関数が呼出されます。draw()関数は繰返し実行されて描画を行ってますが、その途中でイベントが起きたことで(例えばマウスが動いたことで)、描画をじゃましないように、draw()が終わるまで待ってから、イベント処理を実行します。

マウスイベント

マウス操作に応じて呼出される関数には次のものがあります。マウス操作に応じたイベント処理をさせたい場合は、そのマウス操作で実行される関数をプログラム内で定義し、ブロックの中(中括弧｛と｝の間)に書いておきます。 いずれの関数も、戻り値はありません。

mousePressed()   マウスボタンが押された時、ブロックの中のコードが1回実行される。
mouseReleased()   マウスボタンが離された時、ブロックの中のコードが1回実行される。
mouseMoved()   マウスが動いた時、ブロックの中のコードが1回実行される。
mouseDragged()   マウスがドラッグした時、ブロックの中のコードが1回実行される。

リスト3-1と同じ動きをするプログラムをmouseMoved()を使って書くと次のようになります。 draw()関数の中でする処理はありませんが、プログラムを動かし続けるために、ブロック内が空のdraw()関数は必須です。

【リスト5-1】
function setup() {
  createCanvas(250, 125);
  background(200);
}

function draw() {    }

function mouseMoved(){
  ellipse(mouseX, mouseY, 10, 10);
}

この例はリスト3-1のように書くのが普通で、イベント処理関数を使う必要はありません。 次に必要のある例を見てみましょう。 マウスをドラッグすると、それに応じて四角形が描かれます。

【リスト5-2】
var x = 0;
var y = 0;
function setup() {
  createCanvas(250, 250);
  background(200);
  fill(255,0,0);      //赤で塗る
  noStroke();         //枠線なし
  rectMode(CORNERS);  //rect()関数の引数の意味の指定
}

function draw() {    }

function mousePressed(){
    x = mouseX;
    y = mouseY;
}
function mouseDragged(){
    background(200);
    rect(x, y, mouseX, mouseY); //引数は対角線上で向い合う角の座標
}

マウスボタンを押したときの位置をx、yに覚えておき、マウスがドラッグされたら
最初の位置と、新しいマウスの位置とを、四角形の対角線上で向き合う2点として、四角形を描いています。 rectMode()関数にCORNERSを指定することで、rect()関数の引数の意味を、デフォルト(左上角の座標と幅と高さ)から、対角線上で向かい合う2つ角の座標に変更しています。
どちら方向にドラッグしても、正しく四角形が描けることを確認してください。

キーイベント

キーボードが操作されると、次の関数が呼び出されます。

keyPressed()   いずれかのキーが押された時、ブロックの中のコードが1回実行される。
keyReleased()   いずれかのキーが離された時、ブロックの中のコードが1回実行される。

操作された(押した、または離した)キーを、変数keyに覚えています。
変数keyには、英数字や記号など文字として表示できるキーの場合はその文字が値として格納されます。それ以外のキー(shiftキーやファンクションキー)の場合は、変数keyCodeにそのキーを識別する整数が保管されます。 keyCodeに保管される値については、p5.jsのリファレンスkeyCodeを参照してください。

リスト3-4を少し変え、rキーを押すと赤で、yキーを押すと黄色で、gキーを押すと緑で円が描かれるようにしたのが、次のリスト5-3です。keyPressed()関数を定義し、その中で、if-else文を使って、条件を分け、塗る色を変えています。

【リスト5-3】
var x = 0;
var y = 0;
var easing = 0.05; //マウスにゆっくり近づく度合
function setup() {
  createCanvas(250, 125);
  background(200);
  fill(0);            //最初は黒
  noStroke();         //枠線なし
}

function draw() {
  var targetX = mouseX;
  var targetY = mouseY;
  x = x + (targetX - x) * easing;
  y = y + (targetY - y) * easing;
  ellipse(x, y, 10, 10);
}

function keyPressed(){
  if(key == 'r'){  //キー入力がrなら
    fill(255,0,0);
  }else if(key == 'y'){  //キー入力がyなら
    fill(255,255,0);
  }else if(key == 'g'){  //キー入力がgなら
    fill(0,255,0);
  }
}

演習問題

【問題5-1】リスト5-2の機能を次のように拡張してください。
・図形を描く前に、キーボードからr、e、lのいずれかを入力すると、それに応じて描かれる図形の種類が変わる。
キー入力の意味
r: 四角
e: 円
l: 線

【問題5-2】問題5-1に修正を加え、線画を重ねて描けるような機能のプログラムにしてみよう。
キー入力の意味
r: 四角
e: 円
l: 線
c: クリア