Processing入門講座の第５弾は、Processingのクラスについて学習します。クラスは簡単にいうとひな型（テンプレート）です。クラスには属性と動作（メソッド）が書かれています。最初からたくさんのクラスが用意されていますが、自分でもクラスは作ることができます。
Processing入門講座 第５弾 クラスについて学習しよう
このProcessing入門講座の第５弾は、クラスについて学習していきます。少しだけわかりずらいと思いますが、実際のクラスというものを見ながら学習していきましょう。早速、Processingを起動しましょう。
クラスとは
クラスは属性と動作（メソッド）を持ったひな型（テンプレート）だと思ってください。
Processingは、最初から多くのクラスを持っています。Stringクラス、PImageクラスやPFontクラスなどがあります。どれもクラス名の最初の文字は大文字なのがわかると思います。
クラス名は大文字から始めるように決められていて、他の種類の変数から区別されています。
クラスはひな型といいましたが、実際に利用する時にはそのままでは利用できません。
- オブジェクトを作る。（インスタンス）
- オブジェクトにデータを入れる。
- オブジェクトを変数として利用する。
// ひな型 String からオブジェクト str1 を作る
String str1;
// オブジェクト str1 にデータを入れる
str1 = "data";
// オブジェクト str1 を変数として利用する
println(str1);
println(str1.equals("data"));
println(str1.length());
新しくクラスを作る
クラスの学習として、いろいろと見ていくのですが、話だけでは分かりずらい所があると思います。そこで、実際のプログラムを通して、学ぶのが一番わかりやすいと考えました。
今回は、そこで前回の講座で作ったプッシュボタンをクラス化していきたいと思います。クラス化することによって、何個かプッシュボタンを置きたいときに、一つずつ、プログラムを書かなくてもよくなります。
座標、幅や高さといった条件だけを指定すると、いろいろなバリエーションのプッシュボタンを簡単に置くことができるようにしていきたいと思います。
クラスの宣言と属性の設定
class PBtn { // クラス名
int x, y, w, h; // フィールド名
PBtn (int xpos,int ypos,int wb,int hb) { // コンストラクタはクラス名と同じにする
x = xpos; // コンストラクタの引数をクラスのフィールドに代入する
y = ypos;
w = wb;
h = hb;
} まずは、クラスの宣言をします。PBtnクラスというプッシュボタンのクラスを宣言します。引数に整数で座標ｘと座標ｙ、横幅と高さを取るようにします。ボタンの厚さなども引数にすれば、できると思いますが、今回はこの４つだけにします。
クラス名は大文字で始まるので間違えないようにしてください。
クラスの宣言の後にコンストラクタと呼ばれる特別なメソッドを記入します。
コンストラクタとはオブジェクトをインスタンス化する時に呼び出されて、初期化などを行う関数で、クラス名と同じ名前を持つメソッドとして定義されます。戻り値はありません。
void display(int stat){ // PBtnクラスのプッシュボタンを表示するメソッド
プッシュボタンを表示するためのプログラム
｝
int areachk(){ // PBtnクラスのマウスがボタンの上で押されたかをチェックするメソッド
ボタンの上でマウスが押されたか判断するプログラム
｝クラスには、コンストラクタという特別なメソッドとは別に、クラス用のメソッドを定義することができます。
PBtnクラスのメソッドとして、プッシュボタンの表示とマウスがボタンの上で押されたかをチェックするメソッドを定義する。
ボタン動作をクラスを利用してプログラムする。
// プッシュボタンを２つ表示する
PBtn pbtn1 = new PBtn(50,50,100,50);
PBtn pbtn2 = new PBtn(250,150,100,50);
void setup(){
background(204);
size(400, 400);
noStroke();
smooth();
pbtn1.display(0);
pbtn2.display(0);
}
void draw(){
}
void mousePressed(){
if(pbtn1.areachk() == 1)
pbtn1.display(1);
if(pbtn2.areachk() == 1)
pbtn2.display(1);
}
void mouseReleased(){
if(pbtn1.areachk() == 1)
pbtn1.display(0);
if(pbtn2.areachk() == 1)
pbtn2.display(0);
}
class PBtn {
int x, y, w, h;
PBtn (int xpos,int ypos,int wb,int hb) {
x = xpos;
y = ypos;
w = wb;
h = hb;
}
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
rect(x,y,w,h);
fill(col_top);
quad(x-10, y-10, x+w+10, y-10, x+w, y, x, y); // top
fill(col_right);
quad(x+w, y, x+w+10, y-10, x+w+10, y+h+10, x+w, y+h); // right
fill(col_bottom);
quad(x, y+h, x+w, y+h, x+w+10, y+h+10, x-10, y+h+10); // bottom
fill(col_left);
quad(x-10, y-10, x, y, x, y+h, x-10, y+h+10); // left
textSize(24);
fill(0);
text("Push Button",x-20, y+h+60);
}
int areachk(){
if(mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) return 1;
else return 0;
}
}
// プッシュボタンを２つ表示する
PBtn pbtn1 = new PBtn(50,50,100,50);
PBtn pbtn2 = new PBtn(250,150,100,50);
今回は上記の二つですが、引数を変えていくつも表示することができる。本当はボタンなので、重ならないようなチェックが必要になると思います。今回はプログラムをしていません。文字として「Push Button」と表示していますが、これも、変更できるように出来たらもっといいものになると思います。
fill(col_top);
quad(x-10, y-10, x+w+10, y-10, x+w, y, x, y); // top
fill(col_right);
quad(x+w, y, x+w+10, y-10, x+w+10, y+h+10, x+w, y+h); // right
fill(col_bottom);
quad(x, y+h, x+w, y+h, x+w+10, y+h+10, x-10, y+h+10); // bottom
fill(col_left);
quad(x-10, y-10, x, y, x, y+h, x-10, y+h+10); // left
int areachk(){
if(mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) return 1;
else return 0;
}
座標x、座標y、横幅、高さを直接数値で書いていたところを引数を利用して、計算するようにした。
クラスについて学習しました。オブジェクトやコンストラクタ、メソッドなど難しい用語もでてきました。簡単なクラスを作って、実際に練習してみると理解が深まるかと思います。それでは、また、次の講座で。
コメント