スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Processingのボタンのサンプルコード

2種類のボタンを作ってみました。
ひとつは押すとへこみ、押し続けて離したときに処理が行われるボタンです。
押したままボタン以外のところにカーソルを持っていって離すと処理はキャンセルされます。
もう一つは押しボタンです。一回クリックするとボタンがへこみ、もう一度クリックすると戻ります。
手を離してもボタンはへこんだままです。

画像には以下のものを用いています。
画像はdataというフォルダをつくって入れてやりましょう。


※ファイル名:button1_1.png



※ファイル名:button1_2.png



※ファイル名:button2_1.png



※ファイル名:button2_2.png


以下のサンプルを作ってみました。

実行してみるとこんな感じになります。








実際に触ってみると、二つのボタンの違いがわかると思います。

PImage button1_1,button1_2;
PImage button2_1,button2_2;

boolean flag1 = false;
boolean flag2 = false;

void setup(){
size(400,450);
button1_1 = loadImage("button1_1.png");
button1_2 = loadImage("button1_2.png");
button2_1 = loadImage("button2_1.png");
button2_2 = loadImage("button2_2.png");

image(button1_1,50,50);
image(button2_1,50,250);
}

void draw(){}

void mousePressed(){
if(mouseX >= 50 && mouseX <= 350 && mouseY >= 50 && mouseY <= 150){
flag1 = true;
println("Button1 Pressed!");
image(button1_2,50,50);
}
}

void mouseReleased(){
if(flag1 == true && mouseX >= 50 && mouseX <= 350 && mouseY >= 50 && mouseY <= 150){
println("Button1 Released!");
}
flag1 = false;
image(button1_1,50,50);
}

void mouseClicked(){
if(mouseX >= 50 && mouseX <= 350 && mouseY >= 250 && mouseY <= 400){
if(flag2 == false){
println("Button2 pushed!");
fill(get(0,0));
noStroke();
rect(50,250,300,150);
image(button2_2,50,250);
flag2 = true;
}else{
println("Button2 unpushed!");
fill(get(0,0));
noStroke();
rect(50,250,300,150);
image(button2_1,50,250);
flag2 = false;
}
}
}


Procesingは、画面に上書きしていくかのように描画を行っています。
そこで入れ替える画像のサイズが違う場合は、mouseClicked()の中の処理のように、一度背景色で画像を塗りつぶしてやってから新しい画像を描画する必要があります。

また時間がありましたら詳しく追記します。

2015/07/08 各関数についてメモ程度に追記しておきます。


1,2行目
PImage

Processingの中で画像を扱うためのクラスです。


9~12行目
loadImage("ファイル名")

PImageクラスの変数に外部から画像を読み込んでいます。
読み込む画像はあらかじめdataファイルの中に置いておきましょう。参考


14,15行目
image(PImage,int,int)

画像を描画します。引数は読み込むPImage、X座標、Y座標です。


40行目
fill(color)

次に描画する図形や文字の色を指定します。引数はグレースケール、RGBなどです。


40行目
get(int,int)

ウィンドウの指定したピクセルの色を取得します。引数はX座標、Y座標です。


41行目
noStroke()

次に描画する図形の枠線を描画しないように設定します。


42行目
rect(int,int,int,int)

矩形を描画します。引数は、矩形の左上の点のX座標、Y座標、矩形の幅、矩形の高さです。




それでは、今日はこの辺りで。
関連記事

コメント

非公開コメント
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。