Processing入門講座の第４弾は、Processingのプログラムで関数の作り方について学習します。関数は簡単にいうと小さなプログラムの塊を呼び名をつけているものです。呼び名を付けることで何度でも簡単に呼び出せます。毎回、同じことを書かなくても良いので利用しましょう。
Processing入門講座 第４弾 プログラムで関数を作ろう
このProcessing入門講座の第４弾は、プログラムで関数の作り方を学習していきます。あなただけの関数を作って、どんどん使っていきましょう。早速、Processingを起動しましょう。
関数の書き方について
引数がない関数
void setup(){
関数A();
}
void draw(){
関数A();
}
void 関数A(){
関数の処理の部分
}setup() と draw() どちらにも書くことができる。引数がない関数は void と宣言して書くようにする。
引数がある関数
void setup(){
関数B(引数);
}
void draw(){
関数B(引数);
}
void 関数B(引数){
関数の処理の部分
}setup() と draw() どちらにも書くことができる。引数がある関数でも値を返さない関数については、 void と宣言して書くようにする。
変数を返す関数
void setup(){
型 a = 型 関数C(型 引数);
}
void draw(){
型 a = 型 関数C(型 引数);
}
型 関数c(型 引数)｛
関数の処理の部分
return 型の引数
｝setup() と draw() どちらにも書くことができる。引数があり、値を返す関数については、返す関数の値の型を宣言し、その型と同じ戻り値を返すようにする。
型としては、以下のようなものを指定する。[ ] は配列を意味しています。
boolean, byte, char, int, float, String, boolean[ ], byte[ ], char[ ], int[ ], float[ ], or String[ ]
ボタンを描写する関数を作る
void setup(){
background(204); // 背景を灰色にしている
size(200, 200); // 実行画面を200×200にしている
noStroke(); // 輪郭を表示しないように設定している
smooth(); // 実行時の表示をスムースにする設定をしている
display(); // 今回新しく作った関数を呼び出している
}
void draw(){
}
void display(){ // 新しい関数 display() ボタンの絵を描く
// ここから最後までが新しい関数になります
int col_top; // 変数の定義
int col_right;
int col_bottom;
int col_left;
col_top = 230; // 傾斜の色に対応する数字をそれぞれ設定している
col_right = 100;
col_bottom = 80;
col_left = 210;
// 黄色の四角形を描く
fill(255, 255, 0);
rect(50, 50, 100, 50);
// 上の傾斜を描く
fill(col_top);
quad(40, 40, 160, 40, 150, 50, 50, 50);
// 右の傾斜を描く
fill(col_right);
quad(150, 50, 160, 40, 160, 110, 150, 100);
// 下の傾斜を描く
fill(col_bottom);
quad(50, 100, 150, 100, 160, 110, 40, 110);
// 左の傾斜を描く
fill(col_left);
quad(40, 40, 50, 50, 50, 100, 40, 110);
// ボタンの文字表示
textSize(24);
fill(0);
text("Push Button",30, 160);
}
直接fill関数に数字を入れてもいいのですが、後でまた同じようなプログラムを作成する予定ですので、一度変数にして、まとめて設定しています。
display関数を作ってボタンを描写するプログラムを作りました。引数はありません。関数の引数というのは、呼び出すときに何か一緒に情報や命令も送る時に引数という形で渡します。
今回は、関数からも特別に情報が戻ってくるという事がありませんでした。関数の中でボタンを描いただけです。なので、戻ってくる値もありません。
そのような時に、関数の定義をする際、void を最初に書くようにします。
引数：０～２５５の値をとります。前回も出てきたfill関数ですが、引数が一つの場合には灰色の明るさを調整します。もちろん、色は灰色になります。関数は、引数の数も注意が必要ですね。
復習：
fill(255,0,0); 引数が３つあります。RGBで赤色、緑色、青色の色調をそれぞれ指定することによって、色を指定する。その色で塗りつぶす。
押された時のボタンを描写する関数を作る
void setup(){
background(204); // 背景を灰色にしている
size(200, 200); // 実行画面を200×200にしている
noStroke(); // 輪郭を表示しないように設定している
smooth(); // 実行時の表示をスムースにする設定をしている
display(); // 今回新しく作った関数を呼び出している
}
void draw(){
}
void display(){ // 新しい関数 display() ボタンの絵を描く
int col_top; // 変数の定義
int col_right;
int col_bottom;
int col_left;
col_top = 80; // 傾斜の色に対応する数字をそれぞれ設定している
col_right = 210;
col_bottom = 230;
col_left = 100;
// 黄色の四角形を描く
fill(255, 255, 0);
rect(50, 50, 100, 50);
// 上の傾斜を描く
fill(col_top);
quad(40, 40, 160, 40, 150, 50, 50, 50);
// 右の傾斜を描く
fill(col_right);
quad(150, 50, 160, 40, 160, 110, 150, 100);
// 下の傾斜を描く
fill(col_bottom);
quad(50, 100, 150, 100, 160, 110, 40, 110);
// 左の傾斜を描く
fill(col_left);
quad(40, 40, 50, 50, 50, 100, 40, 110);
textSize(24);
fill(0);
text("Push Button",30, 160); // ボタンの文字表示
}違っているのは、ボタンの塗りつぶしに利用している色の部分だけである。色の上下左右を入れ替えて押しているように見せています。
マウスで押した時に色が変わるようにする関数を作る
void setup(){
background(204);
size(200, 200);
noStroke();
smooth();
// ボタンを配置する
display(0);
}
void draw(){
}
// マウスが押された時の処理
void mousePressed(){
display(1);
}
// マウスが離された時の処理
void mouseReleased(){
display(0);
}
// ボタンの表示を処理する
void display(int stat){
int col_top;
int col_right;
int col_bottom;
int col_left;
// マウスが押されたか、離されたかを判断し色の指定を変える処理
if(stat == 0){ // 初期状態、または、マウスが押されていない時の色指定
col_top = 230;
col_right = 100;
col_bottom = 80;
col_left = 210;
}
else { // マウスが押された時の色の指定
col_top = 80;
col_right = 210;
col_bottom = 230;
col_left = 100;
}
// ボタンの表示をする
fill(255, 255, 0);
rect(50, 50, 100, 50); // center
fill(col_top);
quad(40, 40, 160, 40, 150, 50, 50, 50); // top
fill(col_right);
quad(150, 50, 160, 40, 160, 110, 150, 100); // right
fill(col_bottom);
quad(50, 100, 150, 100, 160, 110, 40, 110); // bottom
fill(col_left);
quad(40, 40, 50, 50, 50, 100, 40, 110); // left
textSize(24);
fill(0);
text("Push Button",30, 160);
}前回のマウスを押した時の処理で学習したmousePressed()、たぶん、学習していなくても察しが付くマウスを離した時に呼び出され処理をするmouseReleased()で、マウスの状態を判断している。
マウスの状態によって、色の指定が変わっている。上の２つのプログラムを重複部分をまとめたものになる。長いプログラムに見えるがボタンの表示が大半でよく見ると短いのがわかると思う。
最初にボタンを配置して、マウスが押されたか判断して、色を上下左右入れ替えているだけである。
関数も型の宣言を行えば、ただ呼び出すだけである。戻り値があるものだけ、return文を気にすればいい。
ボタンの上を押された時だけ押された動作をするようにする関数
int areachk(){
if(mouseX > 50 && mouseX < 150 && mouseY > 50 && mouseY < 100) return 1;
else return 0;
}新しい関数 areachk()を作りました。引数はありませんがint型の数字を返します。
現在は実行画面のどこを押しても、色が変わる。それでは、本来のボタンを押したことにはならないので、黄色のボタンの所だけを判断処理する関数です。
マウスのX座標と、Y座標についてそれぞれ四角形に入っていれば、１を返し、入っていなければ、０を返すものにする。
ボタンを再表示する時に１であれば、ボタンの上という事で表示を行うが、０であれば、ボタンの上ではないという事で、再表示をしないようにする。
void setup(){
background(204);
size(200, 200);
noStroke();
smooth();
// ボタンを配置する
display(0);
}
void draw(){
}
// マウスが押された時の処理
void mousePressed(){
if(areachk() == 1)
display(1);
}
// マウスが離された時の処理
void mouseReleased(){
if(areachk() == 1)
display(0);
}
// ボタンの表示を処理する
void display(int stat){
int col_top;
int col_right;
int col_bottom;
int col_left;
// マウスが押されたか、離されたかを判断し色の指定を変える処理
if(stat == 0){ // 初期状態、または、マウスが押されていない時の色指定
col_top = 230;
col_right = 100;
col_bottom = 80;
col_left = 210;
}
else { // マウスが押された時の色の指定
col_top = 80;
col_right = 210;
col_bottom = 230;
col_left = 100;
}
// ボタンの表示をする
fill(255, 255, 0);
rect(50, 50, 100, 50); // center
fill(col_top);
quad(40, 40, 160, 40, 150, 50, 50, 50); // top
fill(col_right);
quad(150, 50, 160, 40, 160, 110, 150, 100); // right
fill(col_bottom);
quad(50, 100, 150, 100, 160, 110, 40, 110); // bottom
fill(col_left);
quad(40, 40, 50, 50, 50, 100, 40, 110); // left
textSize(24);
fill(0);
text("Push Button",30, 160);
}
int areachk(){
if(mouseX > 50 && mouseX < 150 && mouseY > 50 && mouseY < 100) return 1;
else return 0;
}今回は、Processingの関数について学習しました。プログラム自体は長いですが、あまり難しいものではないと思います。
タドポライズメディア．ブログさんの3Dボタンを作ってみたを参考にさせていただきました。
コメント