こーひーをぶんなぐれ！ - アート系学生のためのJAVA with Processing - その2-4 Processingのマウスイベント

導入

本記事では，Processingのマウスイベントについて述べる．

マウスの座標に追随して描画する

mouseMovedというブロックを用意すると，マウスがキャンバス上を動くたびに内容が自動的に実行される．
mouseXとmouseYという最初から用意されている変数は，現在のマウスのキャンバス上の位置が格納されている．
したがって，mouseMovedブロックの中でmouseXとmouseYの中身を，描画に使う変数に代入しておくと，drawブロックの中でそれが反映され，マウスの動きに追随して動くオブジェクトを描画する事が出来る．

以下のコードを実行すると，マウスの動きに追随して円が描画される．

int x=0; //描画する円の座標を格納する変数xとyを用意しておく．
int y=0;

void setup(){
  size(640, 480);
  colorMode(RGB, 255);
  background(255,255,255);
  frameRate(10);
}

void draw(){
  //リフレッシュするための四角の描画
  fill(255,255,255); //四角の色をbackgroundと同じにする．
  noStroke(); //描画する四角の枠線を書かないように指定する．
  rect(0, 0, width, height); //画面全体に四角を描画する．
  //widthとheightは最初から用意されている変数で，size();で指定した値が入っている．
  
  stroke(0, 0, 0); //これから描画する円に黒の枠線を付ける．
  fill(100, 100, 100); //これから描画する円の色を灰色にする．
  ellipse(x, y, 40, 40); //円を描画する．
}

void mouseMoved(){ //マウスがキャンバス上を移動するごとに自動的に実行されるブロック．
  x = mouseX; //描画する円のx座標の値は，現在のマウスのx座標
  y = mouseY; //描画する円のy座標の値は，現在のマウスのy座標
}

マウスクリックの検出

mousePressedというブロックを用意すると，マウスで左クリックを行った時に，自動的に中身が実行される．
以下のコードは，マウスの左クリックが行われた時に円を描画し，透過度を使った画面のリフレッシュにより段々その円が薄れていくというアニメーションである．

int x=0; //座標と色を格納する変数を用意しておく
int y=0;

int r=0;
int g=0;
int b=0;

void setup(){
  size(640, 480);
  colorMode(RGB, 255);
  background(255,255,255);
  frameRate(10);
}

void draw(){
  //リフレッシュするための四角の描画
  fill(255, 255, 255, 60); //透過度を60にすることで，描画された円は徐々に消えていく．
  noStroke(); //描画する四角の枠線を書かないように指定する．
  rect(0, 0, width, height); //画面全体に四角を描画する．
}

void mousePressed(){ //左クリックが起きた時に自動的に実行されるブロック
  x = mouseX; //左クリックが起きた時のマウスのx, y座標
  y = mouseY; 
  r = (int)random(155) + 100; //色はランダムに決める．パステル調にするために100~255．
  g = (int)random(155) + 100;
  b = (int)random(155) + 100;
  
  stroke(0, 0, 0);
  fill(r, g, b); 
  ellipse(x, y, 40, 40); //左クリックが起きた座標に，ランダムな色で円を描く．
}

mousePressedとif文による切り替えボタン

用意しておいた変数に，mousePressedを押した時に値を入力し，それをif文により判別する事で，画面全体の描画を切り替える事が出来る．
下記のコードでは，赤いボタンを押した時に黒でリフレッシュされ，青いボタンを押した時に白で背景がリフレッシュされる．
mousePressedブロックの中で，左クリックが起きたときのマウス座標がボタンの上に乗っているかどうかをif文で判別し，結果をmodeという変数に格納する．
drawブロックの中で，変数modeの中身によって，背景色を決めるfillの色を決めている．
この変数modeのような役割をする変数を「フラグ」と呼び，フラグ変数の中身を変更して特定の条件を成立させる事を「フラグを立てる」という言い方をする．

mousePressedブロックの中の「else if」は，最初のif文がelseになった時，更にもう一つのifの条件文を判定したい場合に用いる．

int mode=0; //フラグとなる変数

void setup(){
  size(640, 480);
  colorMode(RGB, 255);
  background(255,255,255);
  frameRate(10);
}

void draw(){
  //リフレッシュするための四角の描画
  if(mode == 0){
    fill(255, 255, 255, 60); //もしフラグ変数modeの中身が0だったら白でリフレッシュする．
  }
  else{
    fill(0, 0, 0, 60); //もしフラグ変数modeの中身が0以外だったら黒でリフレッシュする
  }
  noStroke(); 
  rect(0, 0, width, height); 


  //赤いボタンと青いボタンの描画．
  //この二つはフラグの状態関わらず常に描画されるため，drawブロックの最後に持ってくる．

  //赤いボタンを描画する
  stroke(0, 0, 0);
  fill(255, 0, 0);
  rect(100, 100, 100, 100);
  
  //青いボタンを描画する
  stroke(0, 0, 0);
  fill(0, 0, 255);
  rect(300, 100, 100, 100);
}

void mousePressed(){ //左クリックのとき自動的に実行される．
  if(mouseX >= 100 && mouseX <= 200 && mouseY >= 100 && mouseY <= 200){
    //マウスが「左上が(100,100)，幅100，高さ100」の四角(赤いボタンの領域)に入っていたら
    // &&でifの条件文をつなげて書いている
    mode = 1; //フラグ変数modeを1にする．
  }
  else if(mouseX >= 300 && mouseX <= 400 && mouseY >= 100 && mouseY <= 200){
    //もしマウスが青いボタンの中に入っていたら
    mode = 0;  //フラグ変数modeを0にする
  }
}