初心者だけど、一歩ずつ IOT 電子工作: Processing マウスの動きを読み取る

少しずつProcessingのスケッチに慣れてきたところで、マウスの動きを読み取るスケッチを取り上げたいと思います。

Processingでは、表示するだけでなく、マウスカーソルの座標やクリック状態を読み取ることが可能です。

まずは、スケッチ例を見てみましょう。

void setup(){
size(480,120);
fill(0,102);
noStroke();
}
void draw(){
background(204);
ellipse(mouseX,mouseY,9,9);
}

実行例

void setup()　内は、画面サイズの指定と塗りつぶし方法を指定をしています。

今回のテーマ、マウスカーソルの座標の読み取りは、円を描く命令のellipseのx座標とy座標を指定する際に使用しています。

mouseX　は、マウスカーソルのx座標(横方向)を返す命令です
mouseY　は、マウスカーソルのy座標(縦方向)を返す命令です。

mouseXとmouseYを呼び出すと、現在のマウスカーソルのx座標とy座標が返されます。

void draw()は、何度も繰り返されるので、その中で　backgroud命令を実行しているため、画面がクリアーされ、毎回、マウスカーソルの座標に円を描いているので、マウスカーソルで円を動かしているように見えます。

マウスのボタン情報を取得するには、mousePressed、もしくはmouseButton命令を使って取得します。

mousePressedは、右ボタン、左ボタンを問わず、クリックされていることを検出します。
mouseButtonは、クリックされたボタンの種類(右ボタン、左ボタン、センターボタン)を検出します。

実行例(画面ショットでは違いが・・・・)

スケッチ例
void setup(){
size(480,120);
fill(0,102);
noStroke();
}
void draw(){
background(204);

if(mousePressed==true){
if(mouseButton==LEFT){
//マウス左ボタン　クリック
    fill(0,202);
ellipse(mouseX,mouseY,9,9);
}
if(mouseButton==RIGHT){
//マウス右ボタン　クリック
    fill(0,102);
ellipse(mouseX,mouseY,9,9);
}
}else{
    fill(0,52);
    ellipse(mouseX,mouseY,9,9);
}

}

mousePressed命令は、マウスのボタンがクリックされているときは、Trueを返します。
クリックされていない場合には、Falseを返します。

mouseButton命令は、右クリックされているときはRIGHT、左ボタンをクリックされている時にはLEFT、真ん中のボタンがあればCENTERというのありです。それぞれの値を返します。

ひとつ、注意点があります。
if文のなかで、mouseButton==RIGHT　としています。
つい、 mouseButton=RIGHT　と書いてしまいがちですが、=　だけでは間違いです。
Proseccingでは、条件の一致を示すときには、== と書きます。
=　は、値を代入するときに使います。

今日は、ここまでです。ぜひ、実際に上のスケッチを試してみて下さい。

・Processingをはじめよう
・Processing アニメーション
・楽しく学ぶコンピュテーショナルデザイン