Processing 入門 Lesson 12【インタラクション】

Processing 入門
Lesson 12
【マウス関連の変数と関数】

こんにちは、管理人のomoroyaです。

Lesson 11は【スケッチの基本関数】ということでsetup()関数、draw()関数について確認しました。

Lesson 12では、Processingのインタラクションについて学習します。

インタラクションとはマウスやキーボードの動作をプログラムに伝えることを意味します。

Lesson 12では、マウス関連の変数と関数について確認していきます。

遊んでみると意外と面白く、Arduinoとの連携で色々と使えそうな変数、関数となります。

Processing学習の最終目標は、「6軸モーションセンサ」との連携です。

もう少しだけ、地道に構文を理解していきます。

Processingを始めようと考えている方。

ネット情報のみでも十分に学習可能です。

手元に参考書がほしいと考えている場合は下記の2冊程度で十分と考えます。

Processingをはじめよう第2版 (Make: PROJECTS)

オライリージャパン

東京電機大学出版局

はじめに
mouseX　mouseY　変数
pmouseX　pmouseY　変数
mousePressed　変数
mouseButton　変数
mouseMoved()　関数
mouseDragged()　関数
mousePressed()　関数
mouseReleased()　関数
mouseClicked()　関数
まとめ
最後に
Amazonでお得に買う方法

はじめに

本LessonではProcessingのマウス関連の変数と関数を確認していきます。

本Lessonで確認する、変数、関数を表にしました。

変数と関数の違いに注意してください！

変数、関数	内容
mouseX	マウスカーソルの水平方向の座標を取得する変数
muuseY	マウスカーソルの垂直方向の座標を取得する変数
pmouseX	前のフレームでのマウスカーソルの水平方向の座標を取得する変数
pmouseY	前のフレームでのマウスカーソルの垂直方向の座標を取得する変数
mousePressed	マウスボタンを押す：true 押さない：false を取得する変数
mouseButton	押されているボタンの認識。 LEFT、RIGHT、CENTER を取得する変数
mouseDragged()	ボタンが押された状態でマウスが移動したときに呼び出される関数
mousePressed()	マウスボタンが押されたときに呼び出される関数
mouseReleased()	マウスボタンから指が離れたときに呼び出される関数
mouseClicked()	マウスボタンが押されてから離されたときに呼び出される関数

本Lessonでは上記の変数、関数をひとつづつ確認していきます。

mouseX　mouseY　変数

mouseX、mouseY変数はマウスカーソルの水平方向の座標、垂直方向の座標を取得する変数です。

このようにProcessingにはあらかじめ決められた変数名があり、それによってマウスの位置や押されているキーボードの文字などを取得することができます。

■mouseX、mouseY変数のサンプルスケッチ

図形描画する関数にmouseX、mouseYを使うことで簡単に遊ぶことができます。

下記はマウスの移動に合わせて四角形が動くサンプルスケッチとなります。

//Lesson 12-1 mouseX, mouseY 変数
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  background(200);                //背景を元に戻すための処理、前の図形を消す。
  rect(mouseX, mouseY, 50, 50);   //四角形描画
}

void draw()関数内に描いた「backgraound(200);」をコメントアウトすれば、奇跡を残すこともできます。

「backgraound(200);」をコメントアウトした場合の結果がこちら。

マウスを動かしたときに軌跡が残ります。

pmouseX　pmouseY　変数

pmouseX、pmouseY変数は前のフレームでのマウスカーソルの水平方向の座標、垂直方向の座標を取得する変数です。

■pmouseX、pmouseY変数のサンプルスケッチ

pmouseX、pmouseYを使うことで例えばマウスの移動に合わせた大きさの四角形を描画することができます。

下記はマウスの移動に合わせた大きさの四角形を描画するサンプルスケッチとなります。

//Lesson 12-2 pmouseX, pmouseY 変数
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  frameRate(2);         //2fpsに設定
  rectMode(CORNERS);    //左上座標と右下座標の2点で四角形を描画
}

void draw() {
  //background(200);                       //背景を元に戻すための処理、前の図形を消す。
  rect(pmouseX, pmouseY, mouseX, mouseY);  //前の座標と今の座標で四角形描画
}

スケッチ内のframeRateは適当に変えてかまいません。

サンプルスケッチはわかりやすいように2fpsに設定してます。

mousePressed　変数

mousePressed変数はマウスボタンが押されているかどうかで「trueとfalse」を取得する変数です。

■mousePressed変数のサンプルスケッチ

mousePressed変数はマウスが押されているかどうかで「true、false」の判定ができます。

if文などに使用すれば、マウスを押した時だけ描画するといったことができます。

下記はマウスが押された時だけマウスの移動に合わせて四角形が動くサンプルスケッチとなります。

//Lesson 12-3 mousePressed 変数
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  if(mousePressed){
    background(200);                //背景を元に戻すための処理、前の図形を消す。
    rect(mouseX, mouseY, 50, 50);   //四角形描画
  }
}

mouseButton　変数

mouseButton変数はマウスボタンの押されているボタンがどこかを取得する変数です。

変数の中身は、「LEFT」「RIGHT」「CENTER」のいずれかが入っています。

■mouseButton変数のサンプルスケッチ

mouseButton変数はマウスの右ボタン、中央ボタン、左ボタンがおされているかどうかを取得できます。

取得できる変数の中身は「LEFT」「RIGHT」「CENTER」のいずれかです。

if文などに使用すれば、マウスの各ボタンに実行させたいことを割り付けることができます。

下記はマウスの右ボタンで四角形描画、中央ボタンで円を描画、右ボタンでウィンドウの中心から線を描画するサンプルスケッチとなります。

//Lesson 12-4 mouseButton 変数
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
  ellipseMode(CENTER);  //描画座標をセンターに変更
}

void draw() {
  if(mouseButton == LEFT){           //マウス左ボタン
    background(200);                 //背景を元に戻すための処理、前の図形を消す。
    rect(mouseX, mouseY, 50, 50);    //四角形描画
  }
  else if(mouseButton == CENTER){    //マウス中央ボタン
    background(200);                 //背景を元に戻すための処理、前の図形を消す。
    ellipse(mouseX, mouseY, 50, 50); //円を描画
  }
  else if(mouseButton == RIGHT){     //マウス右ボタン
    background(200);                 //背景を元に戻すための処理、前の図形を消す。
    line(250, 150, mouseX, mouseY);  //ウィンドウの中心から線を描画
  }
}

※draw()関数内のbackground()関数をコメントアウトして実行も試してみてください。

mouseMoved()　関数

mouseMoved()関数はマウスが移動したときに呼び出される関数です。

このような関数を使うことで、マウスが移動したときの処理をdraw()関数から切り離すことができます。

マウス、キーボードに関する関数は、値を返さない関数でsetup()、draw()関数と同じくProcessingの標準関数となっています。

■mouseMoved()関数のサンプルスケッチ

マウスが移動したことを検出して何かをさせたい時に使います。

下記のサンプルスケッチはマウスを動かしていないときは四角形を描画、マウスを動かしている間は円を描画するサンプルスケッチです。

//Lesson 12-5 mouseButton() 関数
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
  ellipseMode(CENTER);  //描画座標をセンターに変更
}

void draw() {
  background(200);                 //背景を元に戻すための処理、前の図形を消す。
  rect(mouseX, mouseY, 50, 50);    //四角形描画
}

void mouseMoved() {                //マウスが動いているときに呼び出される関数
  background(200);                 //背景を元に戻すための処理、前の図形を消す。
  ellipse(mouseX, mouseY, 50, 50); //円を描画
}

mouseDragged()　関数

mouseDragged()関数はマウスボタンが押された状態でマウスが移動したときに呼び出される関数です。

■mouseDragged()関数のサンプルスケッチ

マウスボタンが押された状態でマウスが移動したことを検出して何かをさせたい時に使います。

下記のサンプルスケッチはマウスを動かしていないときは四角形を描画、マウスボタンを押しながらマウスを動かしている間は円を描画するサンプルスケッチです。

mouseMoved()関数のサンプルスケッチと同じ結果が得られます。

違いは、マウスボタンを押しながら動かすかどうかだけです。

//Lesson 12-6 mouseDragged() 関数
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
  ellipseMode(CENTER);  //描画座標をセンターに変更
}

void draw() {
  background(200);                 //背景を元に戻すための処理、前の図形を消す。
  rect(mouseX, mouseY, 50, 50);    //四角形描画
}

void mouseDragged() {              //マウスボタンを押したながらが動いているときに呼びだされる関数
  background(200);                 //背景を元に戻すための処理、前の図形を消す。
  ellipse(mouseX, mouseY, 50, 50); //円を描画
}

mousePressed()　関数

mousePressed()関数はマウスボタンが押されたときに呼び出される関数です。

■mousePressed()関数のサンプルスケッチ

マウスボタンを押したときに何かをさせたい時に使います。

下記のサンプルスケッチはマウスを動かした場所に四角形が描画され、動かした場所に四角形の軌跡が残ります。

マウスを押すとと背景を元に戻します。（軌跡が消えるということ）

マウスボタンを押すと画面がクリアされるサンプルスケッチとなります。

//Lesson 12-7 mousePressed() 関数
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  rect(mouseX, mouseY, 50, 50);  //四角形描画
}

void mousePressed() {            //マウスが押されたときに実行される関数
  background(200);               //背景を元に戻すための処理、前の図形を消す
}

mouseReleased()　関数

mouseReleased()関数はマウスボタンから指が離れたときに呼び出される関数です。

■mouseReleased()関数のサンプルスケッチ

マウスボタンから指を話した時に何かをさせたい時に使います。

下記のサンプルスケッチはマウスボタンを押しながらマウスを動かした場所に四角形が描画され四角形の軌跡が残ります。

マウスから指を離すと背景を元に戻します。

マウスボタンから指を離すと画面がクリアされるサンプルスケッチとなります。

//Lesson 12-8 mouseReleased() 関数
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  if(mousePressed){
    rect(mouseX, mouseY, 50, 50); //四角形描画
  }
}

void mouseReleased() {            //マウスボタンから指が離れたときに呼び出される関数
  background(200);                //背景を元に戻すための処理、図形を消す
}

mouseClicked()　関数

mouseClicked()関数はマウスボタンが押されてから指が離れたときに呼び出される関数です。

■mouseClicked()関数のサンプルスケッチ

マウスボタンを押して指が離れたこと（クリック）を認識したい時に使います。

下記は「mousePressed()関数」のサンプルスケッチをmouseClicked()関数に変更しただけのサンプルスケッチです。

マウスを動かした場所に四角形が描画され、動かした場所に四角形の軌跡が残ります。

その後、マウスボタンを押して指を離すと背景を元に戻します。

マウスボタンをクリックすると画面がクリアされるサンプルスケッチです。

mousePressed()関数を使ったサンプルスケッチは押した瞬間にクリアされます。

mousePressed()関数はマウスボタンを押す。

mouseClicked()関数はマウスボタンをクリック。

ということです。

//Lesson 12-8 mouseReleased() 関数
//https://omoroya.com

void setup() {
  size(500, 300);       //ウィンドウサイズ
  background(200);      //背景の色
  rectMode(CENTER);     //描画座標をセンターに変更
}

void draw() {
  rect(mouseX, mouseY, 50, 50);  //四角形描画
}

void mouseReleased() {           //マウスがを押されたときに実行される関数
  background(200);               //背景を元に戻すための処理、前の図形を消す
}