39時間のビックセール!Amazonタイムセール祭り ~6/28(日)23:59

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

Processing-lesson12-00Processing入門編
スポンサーリンク
Processing 入門
Lesson 12
【マウス関連の変数と関数】

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

 

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

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

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

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

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

 

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

 

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

 

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

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

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

 

スポンサーリンク

はじめに

本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);」をコメントアウトした場合の結果がこちら。

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

Processing-lesson12-01

 

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に設定してます。

Processing-lesson12-02

 

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);               //背景を元に戻すための処理、前の図形を消す
}

 

まとめ

Lesson 12 【マウス関連の変数と関数】はここまで。

本Lessonではマウスのインタラクションを学習しました。

このLessonは面白かったと管理人は思います。

Arduinoとパソコンの連携で色々使えそうな変数、関数です。

 

次回Lesson 13は【キーボード関連の変数と関数】を予定しています。

Lesson 13でProcessingの基本的なことを終了し、Lesson 14からArduinoとProcessingを連携するための学習に移っていきます。

 

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

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

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

 

最後に

疑問点、質問などありましたら気軽にコメントください。

この電子部品の解説をしてほしい!などなどなんでもOKです。

リンク切れ、間違いなどあればコメントいただけると助かります。

 

Arduino入門編、番外編、お役立ち情報などなどサイトマップで記事一覧をぜひご確認ください。

 

Arduino入門編で使用しているUNOはAmazonにて購入可能です。

互換品とは言え、Arduinoはオープンソース。

複製して販売するのもライセンス的に問題なし。

 

そのため互換品の品質も悪くなく、それでいて値段は安いです。

正規品本体の値段程度で豊富な部品が多数ついています。

 

学習用、遊び用、お試し用には安価な互換品がおすすめです。

 

 

上記のものでも十分に多数の部品が入っていますが、最初からもっと多数の部品が入っているこちらもお勧めです。

 

Amazonでお得に買う方法

Amazonでお得に購入するなら、Amazonギフト券がおすすめです。

現金でチャージするたびに、チャージ額に応じたポイントが付与されます。

最大2.5%!!!(Amazonプライム会員ならさらにお得)

チャージ額(一回分)一般プライム会員
5,000円~19,999円0.5%1.0%
2,0000円~39,999円1.0%1.5%
40,000円~89,999円1.5%2.0%
90,000円~2.0%2.5%

さらに、初回チャージで1000ポイントもらえるキャンペーンも実施中!

\Amazonギフト券 1000ポイントキャンペーン/
Amazonチャージ 初回購入で1000ポイントキャンペーン

 

補足情報
コンビニ・ATM・ネットバンクが対象
購入は1円単位で可能

コメント

タイトルとURLをコピーしました