Home

キーイベント、switch、マウスイベント

Filed in processing , 制作応用演習（グラフィカルプログラミング演習） 0 comments

キーイベント

いよいよインタラクションです。
インタラクションの代表的なものはマウスイベントなのですが、先にキーイベントをやってみましょう。
キーイベントとは、キーボードからの入力を受け取り、入力されたキーが何かを判断してプログラムが反応する物です。
キーイベントの受け取り方法は二種類あり、ひとつはif文を使い、もう一つはswitchを使うものです。
また、キーの判断には、a, b, cなどの文字などを直接読むkeyと、UP, DOWN, SPACEなどの特殊なキーを読むkeyCodeがあります。
それぞれ例文を見てみましょう。

if文とkeyCodeを使った例文

int x, y;    //x, y座標
int space = 10;    //動く幅
 
void setup() {
  size(200, 200);
  smooth();
  noStroke();
  fill(0);
  x = width/2;    //xとyは画面の中心
  y = height/2;
}
 
void draw() {
  background(255);
  ellipse(x, y, 10, 10);
}
 
void keyPressed() {
 
  //もし押されたキーがキーコードだったら処理を実行する。
  //http://processing.org/reference/keyCode.htmlを参照のこと
  if(key == CODED) {
    if(keyCode == UP) {  //上に動く
      y -= space;
    }else if (keyCode == DOWN) {    //下に動く
      y += space;
    }else if (keyCode == LEFT) {    //左に動く
      x -= space;
    }else if (keyCode == RIGHT) {    //右に動く
      x += space;
    }
  }
}

上の例文からも分かる通り、上下左右に動くスクリプトでは、UP, DOWN, LEFT, RIGHTというキーコードが使われています。他にも、ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC, DELETEがあります。詳しくは以下のサイトを参照して下さい。
http://processing.org/reference/keyCode.html

switch文とkeyを使った例文

次はswitchとkeyです。switch文はこのようなキーイベントでは非常によく使われる構文で、それぞれどのキーが押されたかを判断し、それぞれのキーに個別のイベントを付加することができます。この例題では、フォントの表示もプログラムされています。
以下のプログラムを再生させる場合には、processing用のフォントをOSに入っているフォントから生成しなくてはなりません。Toolsメニュー –> Create Font…でフォントを作成して下さい。

ver.1.1で動作確認済み

int x = 0;    //x座標
 
void setup() {
  size(200, 200);
  background(255);
  noStroke();
  textSize(20);     //フォントのサイズを指定
}
 
void draw() {
  fill(0);
  rect(x, height/2, 10, 10);
}
 
//何らかのキーが押された時に実行される
void keyPressed() {
  background(255);
  fill(255, 0, 0);
  text(key, width/2, height/2);    //押されたキーを表示
 
  switch(key) {
    case 'a':
      x += 5;    //xの値を増やす（円が右に移動する）
      println("a");
      break;
    case 'A':
      x -= 5;    //xの値を減らす（円が左に移動する）
      println("A");
      break;
  }
}

このプログラムは、前述のプログラムの中の円と同じ動きをしますが、それぞれaとAでは別々に書いているので、それぞれ違う結果を出すこともできます。

マウスイベント

次はマウスイベントです。マウスイベントでは、mouseX, mouseYを知らなければ始まりません。
例えば、マウスポインタにオブジェクトを沿わせたければ以下のプログラムになります。

int x, y;    //x, y座標
 
void setup() {
  size(200, 200);
  noStroke();
  smooth();
  fill(0);
}
 
void draw() {
  background(255);
  ellipse(mouseX, mouseY, 10, 10);
}

簡単ですよね。要は、mouseXとmouseYは現在のマウスのx, y座標を返してくれるのです。
では、次には少し複雑なマウスイベントを見てみましょう。インタラクションとしてはありがちなのですが、オブジェクトがマウスの位置に少し遅れてついてくるプログラムです。

ここでは、その追跡のアルゴリズムを以下のように考えます。分かりやすくするため、x座標だけを考えます。

1フレーム目ののdisX = 100、delay = 2.0だとするとdisX/delayは50になり、その値がobjXに加算されることによって2フレーム目にはオブジェクトが50ピクセル動きます。さらに、3フレーム目は、disXが50でdisX/delayは25になります。つまり、だんだん移動距離が少なくなっていくわけです。

よって、delayの値を大きくすればするほど、マウスに追随するスピードが遅くなります。

float objX, objY;    //オブジェクトのx, y座標
float disX, disY;    //mouse座標とオブジェクトの距離
float delay = 20.0;    //マウスに遅れる度合い（2.0だと速すぎて見えないので20.0にしておく）
 
void setup() {
  size(200, 200);
  noStroke();
  fill(0);
  objX = disX = mouseX;    //objX, disXを現在のマウスのx座標で初期化
  objY = disY = mouseY;    //objY, disYを現在のマウスのy座標で初期化
}
 
void draw() {
  background(255);
 
  disX = mouseX - objX;    //マウス座標とオブジェクトの距離をdisX, disYに入れる
  disY = mouseY - objY;
 
  objX = objX + disX/delay;    //距離（disX）をdelayで割った値を足す（オブジェクトが移動する）
  objY = objY + disY/delay;    //距離（disY）をdelayで割った値を足す（オブジェクトが移動する）
 
  ellipse(objX, objY, 10, 10);
}

これをまた少し変えてみましょう。今度はマウスをクリックしたらオブジェクトが後からついてくるプログラムです。

float objX, objY;    //オブジェクトのx, y座標
float disX, disY;    //mouse座標とオブジェクトの距離
float tempX, tempY;    //mouseが押されたときに、一時的にx, y座標を保存しておくための変数
float delay = 2.0;    //マウスに遅れる度合い
 
void setup() {
  size(200, 200);
  background(255);
  noStroke();
  objX = disX = mouseX;    //初期化
  objY = disY = mouseY;
  tempX = tempY = 0.0;
}
 
void draw() {
  background(255);
  fill(0);
  disX = tempX - objX;    //マウス座標とオブジェクトの距離をdisX, disYに入れる
  disY = tempY - objY;
 
  objX = objX + disX/delay;    //距離（disX）をdelayで割った値を足す（オブジェクトが移動する）
  objY = objY + disY/delay;    //距離（disY）をdelayで割った値を足す（オブジェクトが移動する）
 
  ellipse(objX, objY, 10, 10);
}
 
void mousePressed() {
  tempX = mouseX;
  tempY = mouseY;
}