マウスボタンを使う

マウスには左、右ボタンがあります。よほど古くないものでなければ真ん中にもありますね。 今回はこのボタンを押したときに反応させるプログラムを作成します。 マウスのボタンを押したときはmousePressedという関数が自動で呼び出されます。 呼び出した後に何らかの処理をさせたいときは、この関数を記述して中に処理を記述します。 この関数の中の処理はdrawと並行して実行されます。

mousePressed(){
if( mouseButton == LEFT ) {
   //左ボタンが押されたときの処理
} else if( mouseButton == CENTER ) {
   //中央ボタンが押されたときの処理
} else if( mouseButton == RIGHT ) {
   //右ボタンが押されたときの処理
  }
}

mouseButtonという変数は押されたボタンが何かという情報が入っています。 左ボタンならLEFTという情報が入っています。そこでif文を使い条件分岐しています。 同じように中央ボタンはCENTER、右ボタンならRIGHTになります。 また、単にボタンを押しただけで何らかの処理をさせたいなら、if以降のブロックは記述しなくても大丈夫です。 どのボタンが押されたかを判断させたいときのみ、上記のように分岐を作り処理を分けます。 それでは上記を使い、簡単なプログラムを作成してみました。実行してみてください。

//グローバル変数
int Z;

//初期化
void setup(){
   size(400,400);
   colorMode(HSB,100);
   background(99);
   noStroke();
   smooth();
   Z = 5;
   frameRate(15);
}


//メインの処理
void draw(){
   fade();
}


//マウスボタンが押されたら自動で呼ばれる関数
void mousePressed(){
   if(mouseButton == LEFT) {
      //マウスの左ボタンを押したときの処理
      fill(random(99),40,99);
      ellipse(mouseX, mouseY, Z, Z);

   } else if(mouseButton == CENTER) {
      //マウスの中央ボタンを押したときの処理
      Z = Z + 5;

   } else if(mouseButton == RIGHT) {
      //マウスの右ボタンを押したときの処理
      fill(random(90));
      rectMode(CENTER);
      rect(mouseX,mouseY, Z, Z);
   }
}


//画面をリセットしていく関数
void fade(){
   noStroke();
   fill(99,10);
   rectMode(CORNER);
   rect(0, 0, 400, 400);
}

結果

概要

左クリックで円を、右クリックで四角を描画。中央ボタンをクリックすればするだけ描く図形のサイズを大きくする機能も持っています。 また、いつものようにdrawでは画面をリセットする関数を呼び出して、時間経過とともに描いた図形をフェードアウトさせています。 以下に順番に説明します。

グローバル変数ではZのみ宣言。これが円と四角形の大きさを指定する変数でsetupでは初期値を5にしているので、 デフォルトの描画サイズは5×5の図形になります。setup、draw内はいつもと同じです。 次に1番の要であるmousePressedを説明します。

//マウスボタンが押されたら自動で呼ばれる関数
void mousePressed(){
   if(mouseButton == LEFT) {
      //マウスの左ボタンを押したときの処理
      fill(random(99),40,99);
      ellipse(mouseX, mouseY, Z, Z);

   } else if(mouseButton == CENTER) {
      //マウスの中央ボタンを押したときの処理
      Z = Z + 5;

   } else if(mouseButton == RIGHT) {
      //マウスの右ボタンを押したときの処理
      fill(random(90));
      rectMode(CENTER);
      rect(mouseX,mouseY, Z, Z);
   }
};

記述例に示した通り、左、右、中央を押したときの処理で条件を分岐させています。 左をクリックしたときは円、右だと四角形を描きます。位置はどちらもmouseXとmouseYを使い、クリックした位置に図形を描きます。 サイズは最初に宣言Zがここで使われます。デフォルトではZは5が入っていますが、 マウスの中央をクリックするたびZは+5され、描く図形のサイズを拡大することが可能となっています。

いかがでしたか?前回のマウスポインタの位置に円を描くという例を発展させ、クリックしたところに描くようにしただけです。 今回はmousePressedとmouseButtonを利用したマウスの説明でしたが、マウス操作には他にもマウスドラッグ時やマウスが離されたときに呼ばれる関数などもあります。 興味があればAPIリファレンスをご覧ください。基本的な使われ方は同じです。

広告