見出し画像

高校数学をプログラミングで解く（準備編）「4-2 マウス操作」

MK's papa

はじめに

キャンバスに描かれた図形やキャンバス上の設定など、マウスを利用して変形や変更を行うことができます。今回は、そのマウス操作について解説します。

マウス操作を行うために利用できる変数

まず、マウス操作を行うために利用できる変数について、その利用例を示しながら解説していきます。

mouseX, mouseY

変数 mouseX, mouseY はマウスカーソルの位置を表す変数です。マウスカーソルのキャンバス上での位置座標が mouseX, mouseY に自動で入るようになっています。宣言や初期化などの必要はありません。

では、これらの変数 mouseX, mouseY を利用したプログラムの例として、キャンバス上でマウスカーソルの位置に点を描くプログラムを作成します。これは point 関数の引数にカーソルの座標位置（mouseX, mouseY）を与えるだけで比較的簡単に作成できます。

// マウスカーソルの位置に点を描くプログラム
void setup(){
  size(400, 400);
}

void draw(){
  // 背景を更新
  background(204);
  
  strokeWeight(10);
  // マウスカーソルの位置に点を描く
  point(pmouseX, pmouseY);
}

ソースコード1　マウスカーソルの位置に点を描くプログラム

このソースコード1を、Processingの開発環境ウィンドウを開いて（スケッチ名を「useMousePos」としています）、テキストエディタ部分に書いて実行すると、何も描かれていない実行ウィンドウが立ち上がります。この実行ウィンドウのキャンバス上にマウスカーソルを乗せると、そのマウスカーソル位置に点（黒色）が描かれます。

図1　マウスカーソルの位置に点を描く

pmouseX, pmouseY

変数 pmouseX, pmouseY は前のフレームのマウスカーソルの位置を表す変数です。記事『高校数学をプログラミングで解く（準備編）「4-1 図形を動かす」』で、draw 関数が draw 関数内に記載した処理を1秒間に60回呼び出して実行することを解説しました。このとき、キャンバスが更新されたときのそれぞれのタイミングでの画像をフレームと呼びます。つまり、現在のフレームの１回前に呼び出されたフレームでのマウスカーソルの位置座標が pmouseX, pmouseY に自動で入るようになっています。

これらの変数 pmouseX, pmouseY を利用したプログラムの例として、キャンバス上でマウスカーソルの位置と一緒に前のフレームでのマウスカーソルの位置にも点を描くプログラムを作成します。これは、ソースコード1に1行付け加えるだけで作成することができます。

// マウスカーソルの位置と
// 前のフレームでのマウスカーソルの位置に点を描くプログラム
void setup(){
  size(400, 400);
}

void draw(){
  // 背景を更新
  background(204);
  
  strokeWeight(10);
  // マウスカーソルの位置に点を描く
  point(pmouseX, pmouseY);
  // 前のフレームのマウスカーソル位置に点を描く
  point(mouseX, mouseY);
}

ソースコード2　現在と前のフレームでのマウスカーソル位置に点を描く

スケッチ名「useMousePos」のテキストエディタ部分をソースコード1からソースコード2に書き換えて実行すると、何も描かれていない実行ウィンドウが立ち上がります。この実行ウィンドウのキャンバス上でマウスカーソルを動かすと、そのマウスカーソルの位置と１フレーム分遅れたマウスカーソルの位置に点（黒色）が２つ描かれます。なお、マウスカーソルを動かさないと２つの点がほぼ重なってみえますので、ある程度スピードをつけてマウスカーソルを動かしてみてください。

図2　現在と前のフレームのマウスカーソル位置に点が描かれる

mousePressed

変数 mousePressed はマウスボタンが押されていると true、そうでなければ false の値を持つ変数です。マウスボタンは左ボタン、右ボタン、中央ボタンの3つありますが、いずれのボタンが押されても true となります。

では、変数 mousePressed を利用したプログラムの例として、キャンバス上でマウスボタンが押されている間、背景色を赤色に変えるプログラムを作成します。

// マウスボタンが押されている間、背景色を変えるプログラム
void setup(){
  size(400, 400);
}

void draw(){
  if(mousePressed){
    // マウスボタンが押されていたら背景を赤色にする
    background(255,0,0);
  } else {
    // マウスボタンが押されていなかったら背景をグレーにする
    background(204);
  } 
}

ソースコード3　マウスボタンが押されている間、背景色を赤色に変える

このソースコード3を、Processingの開発環境ウィンドウを開いて（スケッチ名を「useMousePressed」としています）、テキストエディタ部分に書いて実行すると、何も描かれていない実行ウィンドウが立ち上がります。この実行ウィンドウのキャンバス上にマウスカーソルを合わせてマウスボタンを押すと、押している間背景色が赤色に変わります。

図3　マウスボタンが押されているとき背景色が赤色に変わる

mouseButton

変数 mouseButton はマウスの左ボタンがおされていれば「LEFT」、右ボタンが押されていれば「RIGHT」、中央ボタンが押されていれば「CENTER」の値を持つ変数です。
変数 mouseButton を利用したプログラムの例として、キャンバス上でマウスの左ボタンが押されている間は背景色を赤色に、右ボタンが押されている間は背景色を緑色に、中央ボタンが押されている間は背景色を青色に変えるプログラムを作成します。

// マウスボタンが押されたときに
// ボタンの種類（左、右、中央）によって背景色を変えるプログラム
void setup(){
  size(400, 400);
}

void draw(){

  if(mousePressed){
    // マウスボタンが押された場合
    if(mouseButton == LEFT){
      // 押されたマウスボタンが左ボタン（左クリック）であれば背景を赤色にする
      background(255,0,0);
    } else if(mouseButton == RIGHT){
      // 押されたマウスボタンが右ボタン（右クリック）であれば背景を緑色にする
      background(0,255,0);
    } else {
      // 押されたマウスボタンが中央ボタンであれば背景を青色にする
      background(0,0,255);
    }   
  } else {
    // マウスボタンが押されていなかったら背景をグレーにする
    background(204);
  } 
  
}

ソースコード4　押されたボタンの種類（左、右、中央）で背景色を変える

このソースコード4を、Processingの開発環境ウィンドウを開いて（スケッチ名を「useMouseButton」としています）、テキストエディタ部分に書いて実行すると、何も描かれていない実行ウィンドウが立ち上がります。この実行ウィンドウのキャンバス上にマウスカーソルを合わせてマウスの左ボタンを押している間は背景色が赤色に、右ボタンを押している間は背景色が緑色に、中央ボタンを押している間は背景色が青色に変わります。

図4　マウスの右ボタンが押されたとき

マウス操作を行うために利用できる関数

次に、マウス操作を行うために利用できる関数について、その利用例を示しながら解説していきます。

mouseMoved関数

mouseMoved 関数はマウスボタンを押さずにキャンバス上でマウスカーソルを動かしている間呼び出される関数です。
この mouseMoved 関数を利用したプログラムの例として、キャンバス上でマウスカーソルを動かしている間だけ背景色が赤色に変わるプログラムを作成します。これは新たに mouseMoved 関数の中身を背景色が赤色に変わる処理を入れて定義するだけで作成することができます。

// マウスボタンが押されていない状態で
// マウスが動いているときに背景色を変えるプログラム
void setup(){
  size(400, 400);
}

void draw(){
    // マウスが動いていなかったら背景をグレーにする
    background(204);
}

// マウスの移動時に呼び出される関数（ボタンは押されていない状態）
void mouseMoved(){
  // マウスが動いていたら背景を赤色にする
  background(255,0,0);
}

ソースコード5　マウスカーソルを動かしている間背景色が赤色に変わる

このソースコード5を、Processingの開発環境ウィンドウを開いて（スケッチ名を「useMouseMoved」としています）、テキストエディタ部分に書いて実行すると、何も描かれていない実行ウィンドウが立ち上がります。この実行ウィンドウのキャンバス上でマウスカーソルを動かすと、その動かしている間だけ背景色が赤色に変わります。

図5　マウスボダンを押さずにマウスカーソルを動かしているとき

mouseDragged関数

mouseDragged関数はマウスボタンを押しながらキャンバス上でマウスカーソルを動かしている間呼び出される関数です。
このmouseDragged関数を利用したプログラムの例として、キャンバス上でマウスボタンを押しながらマウスカーソルを動かしている間だけ背景色が青色に変わるプログラムを作成します。

// マウスボタンが押された状態で
// マウスが動いているときに背景色を変えるプログラム
void setup(){
  size(400, 400);
}

void draw(){
    // マウスボタンが押されていないか、
    // マウスが動いていなかったら背景をグレーにする
    background(204);
}

// マウスボタンが押された状態でマウスが移動したときに呼び出される関数
void mouseDragged(){
  // マウスボタンが押された状態でマウスが動いていたら背景を青色にする
  background(0,0,255);
}

ソースコード6　マウスボタンを押しながらマウスカーソルを動かしている間、背景色が青色に変わる

このソースコード6を、Processingの開発環境ウィンドウを開いて（スケッチ名を「useMouseDragged」としています）、テキストエディタ部分に書いて実行すると、何も描かれていない実行ウィンドウが立ち上がります。この実行ウィンドウのキャンバス上でマウスボタンを押しながらマウスカーソルを動かすと、その動かしている間だけ背景色が青色に変わります。

図6　マウスボダンを押してマウスカーソルを動かしているとき

mousePressed関数

mousePressed 関数はマウスボタンが押されると呼び出される関数です（変数 mousePressed と同じ名前ですが、変数と関数で利用方法が違いますので、区別は簡単にできます）。
この mousePressed 関数を利用したプログラムの例として、キャンバス上でマウスボタンを押すと背景色が緑色に変わり、もう一度押すと元の背景色に戻るという処理を繰り返すプログラムを作成します。

// マウスボタンが押されたときに背景色を変えるプログラム
boolean flag = true;

void setup(){
  size(400, 400);
}

void draw(){
  if(flag){
    // flagがtrueの場合、背景はグレー
    background(204);
  } else {
    // flagがfalseの場合、背景は緑色
    background(0,255,0);
  }
}

// マウスが押されると呼び出される関数
void mousePressed(){
  // マウスボタンが押されたら背景色を変える
  flag = !flag;
}

ソースコード7　マウスボタンを押すと背景色が変わる

このソースコード7を、Processingの開発環境ウィンドウを開いて（スケッチ名を「useMousePressedFunc」としています）、テキストエディタ部分に書いて実行すると、何も描かれていない実行ウィンドウが立ち上がります。この実行ウィンドウのキャンバス上でマウスボタンを押すと、背景色が緑色に変わり、もう一度押すと背景色が元のグレーに戻ります。

図7　マウスボタンを１回押すと背景色が変わる

mouseReleased関数

mouseReleased 関数はマウスボタンから指が離れたときに呼び出される関数です。
この mouseReleased 関数を利用したプログラムの例として、キャンバス上でマウスボタンを押した後指を離したときに背景色が赤色に変わり、もう一度同じことをすると元の背景色に戻るという処理を繰り返すプログラムを作成します。

// マウスボタンから指が離れたときに背景色を変えるプログラム
boolean flag = true;

void setup(){
  size(400, 400);
}

void draw(){
  if(flag){
    // flagがtrueの場合、背景はグレー
    background(204);
  } else {
    // flagがfalseの場合、背景は赤色
    background(255,0,0);
  }
}

// マウスボタンから指から離れたときに呼び出される関数
void mouseReleased(){
  // マウスボタンから指から離れたときに背景を赤色にする
  flag = !flag;
}

ソースコード8　マウスボタンを押した後離した時に背景色が変わる

このソースコード8を、Processingの開発環境ウィンドウを開いて（スケッチ名を「useMouseReleased」としています）、テキストエディタ部分に書いて実行すると、何も描かれていない実行ウィンドウが立ち上がります。この実行ウィンドウのキャンバス上でマウスボタンを押して離したときに、背景色が赤色に変わり、もう一度同じことをすると背景色が元のグレーに戻ります（これを実感するために、マウスボタンを押した後しばらく経ってから指を離すようにしてみてください）。

図8　マウスボタンを１回押してから指を離すと背景色が変わる

mouseClicked関数

mouseClicked 関数はマウスボタンが押されてから離されたときに呼び出される関数です。
この mouseClicked 関数を利用したプログラムの例として、キャンバス上でマウスボタンを押してから離したときに背景色が青色に変わり、もう一度同じことをすると元の背景色に戻るという処理を繰り返すプログラムを作成します。

// マウスボタンが押されて離されたときに背景色を変えるプログラム
boolean flag = true;

void setup(){
  size(400, 400);
}

void draw(){
  if(flag){
    // flagがtrueの場合、背景はグレー
    background(204);
  } else {
    // flagがfalseの場合、背景は青色
    background(0,0,255);
  }
}

// マウスボタンが押されて離されたときに呼び出される関数
void mouseClicked(){
  //  マウスボタンが押されて離されたときに背景を青色にする
  flag = !flag;
}

ソースコード9　マウスボタンを押して離したときに背景色が変わる

このソースコード9を、Processingの開発環境ウィンドウを開いて（スケッチ名を「useMouseClicked」としています）、テキストエディタ部分に書いて実行すると、何も描かれていない実行ウィンドウが立ち上がります。この実行ウィンドウのキャンバス上でマウスボタンを押して離したときに、背景色が青色に変わり、もう一度同じことをすると背景色が元のグレーに戻ります（これを実感するために、マウスボタンを押した後しばらく経ってから指を離すようにしてみてください）。

図9　マウスボタンを押して離すと背景色が変わる

まとめ

今回は、そのマウス操作について解説しました。
マウス操作はマウスカーソルを動かしているときやマウスボタンを押したり離したりするタイミングで何らかの処理を行うことができます。マウス操作を行うための変数や関数をうまく利用することで、簡単なお絵かきソフトなどを作ることができます。せっかくなので、お絵かきソフトの作成にも挑戦してみてください。

参考文献

Processingをはじめよう 第２版（オライリー・ジャパン、オーム社、ISBN9784873117737）

この記事が気に入ったらサポートをしてみませんか？