初心者だけど、一歩ずつ IOT 電子工作: Processing ボタンをクリック 1

ProcessingとArduinoの連携を行う場合に必要になる、Processingでのボタンをクリックする動作を考えます。

Processing上のボタンをクリックし、その指令をArduinoへ伝え、Arduino上でLEDを点灯させる連携の例を考えると必要な要素は次の図のようになります。

Processing側の処理から順に作っていきます。

ボタン表示は、Processingでの画像表示で理解したとおり、ボタンの画像ファイルを表示することで可能です。
使用する画像は、下記の画像です。On　と　Off　を用意しました。

準備として画像を扱う場合には、スケッチと同じ階層にdataフォルダを用意し、その中に画像ファイルを配置するお約束でしたね。

スケッチは、次のように書きます。

PImage img;

void setup() {
size(200, 100);
img = loadImage("On.png");
image(img,50, 20);
}

void draw() {

}

復習として、念のため、各行を見ていきます。
PImage img;　・・・　画像ファイル情報を格納するための変数(変数名 : img)を宣言しています
void setup(){ }　・・・　初期設定用でした、初回に1度だけ実行されるんでしたね
size(200, 100);　・・・　画面表示範囲の指定です
img = loadImage("On.png");　・・・　画像ファイルを変数へ読み込みます。
　　　　　　　　　　　　　　　　　　　　ファイル名の指定には大文字小文字の区別があります
image(img,50, 20);　・・・　読み込んだimg変数の内容を表示します

　　　　　　　　　　　　　　　表示位置は、画面上の(50,20)の点を指定しています

次に表示したボタンのクリックをスケッチに組み込みます。
Processingにはボタンがクリックされた際にだけ実行されるvoid mouseClicked()関数が用意されています。

[構文]
void mouseClicked(){
//クリックすると、ここの処理が実行
//マウスの位置情報を取得　mouseX,mouseY

}

これを組み込みます。画像ファイルのサイズは、80×40で作成しています。
表示位置は、(50,20) なので、画像の範囲は、(50,20) と (130,60)　の四角い範囲となります。

クリックされた時に、マウスカーソルがこの範囲内にあれば、ボタンをクリックしたと判断できます。

PImage img;

void setup() {
size(200, 100);
img = loadImage("On.png");
image(img,50, 20);
}

void draw() {

}
void mouseClicked(){
//クリックすると、ここの処理が実行
//マウスの位置情報を取得　mouseX,mouseY
if(mouseX>=50 && mouseX<=130 && mouseY>=20 && mouseY<=60){
println ("Mouse Click");
}
}

void mouseClicked()　内のif文によって、マウスの範囲を読み取り判定しています。
AND条件は、&&で表します。なお、OR条件は||　で表します。
mouse　カーソルのX座標は、50以上130以下、カーソルのY座標は20以上60以下を判別しています。

判定した結果、ボタンの上と判断した場合には、println命令を使ってコンソールに Mouse Clickの文字を表示しています。

実行例

クリックした際に、コンソールにMouse Clickの文字が表示されているのがわかります。

今回はここまでです。次回は、マウスがクリックされたあとの処理として、OnボタンをOffボタンへの表示の書き換えを実装します。

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