Programming3 – Week5

継承について学ぶ

継承とは?

まずは、次の指示に従ってクラスを2つ作ってみましょう。

クラス名:Square

インスタンス変数:浮動小数点数型 x, y, size

コンストラクタ:Square(float _x, float _y, float _r)

メソッド : display() → 正方形を表示する、位置(x, y), 幅 r, 高さ r

shake()   →   random関数で-1から1のランダムを xとyに加算することで正方形が振動する

 

クラス名:Circle

インスタンス変数:浮動小数点数型 x, y, size, c

コンストラクタ:Circle(float _x, float _y, float _r, color c)

メソッド : display() → 円をcの塗りつぶしで表示する、位置(x, y), 幅 size, 高さ r

shake()   →   random関数で-1から1のランダムを xとyに加算することで円の位置と大きさが振動する

changeColor() → 色をランダムに変化させる

 

これらをsetup(), draw()でこれらを一つづつインスタンス化して、メソッドを呼び出す。

これら2つのクラスを観察してください。

 

共通部分

 


class Shape{

int x;

int y;

int size;

    Shape(float _x, float _y, float _r){
        x = _x;
        y = _y;
        r = _r;
    }

    void display(){
        
    }

void shake(){
        x += random(-1, 1);
        y += random(-1, 1);
    }
} 

この共通部分を組み合わせると。

class Square extends Shape{
    Square(float _x, float _y, float _r){
        super(_x, _y, _r);
    }
    void display(){
         rect(x, y, r, r);
    }

    void shake(){
        x += random(-1, 1);
        y += random(-1, 1);
    }  
}

演習問題
Shapeを拡張し、正三角形が表示されるクラスを書きなさい。なお、Processingでは、三角形を描画するために、3点の座標が必要だが、このクラスでは三角形の重心(x, y)とそこからの距離r、もしくは辺の長さrで正三角形をかけるものとする。そしてその三点が独立して振動するようにする。

用語

親クラス(スーパークラス)

子クラス(サブクラス)

オーバーライド

新しいメソッド

super()

 

もう一つの例

UIのボタン

ボタンの働きを考えてみる。

  1. ボタンの上にマウスカーソルがあるか?
  2. ボタンの上でマウスが押されたかどうか?
  3. どのボタンが押されたか?

上記が必要最低限な機能、ということはこれらを実装したクラスを作り、使うときにそれを継承すると良さそう。

機能なのでメソッドで実装することになる。

  1.  ボタンの上でマウスが押されたかどうか? → mousePressed() これはProcessing組み込み関数
    1. その時、ボタンの上にマウスカーソルがあるか?
  2. どのボタンが押されたか? → int getID() , boolean getState()

属性は?

  1. ボタンの位置  → float x,y
  2. ボタンの大きさ → float r
  3. ボタンのID → int id
  4. ボタンの状態 → boolean buttonState

まず上のメソッド、属性(インスタンス変数)を含むクラスを作る。


class Button {
float x;
float y;
float r;
int id;
boolean buttonState;

Button(float _x, float _y, float _r, int _id) {
     //変数宣言
     //変数宣言
     //変数宣言
     //変数宣言
 }

void display() { 
// オーバーライドする 
// ボタンを表示するため 
} 
int getID() {
 return id;
 } 
boolean getState() {
 return buttonState;
 } 
}
 
SquareButton button;

void setup(){
 size(800, 600);
 button = new SquareButton(float(width/2), float(height/2), 200.0, 1, color(255, 255, 0));
}

void draw(){
 button.display();
 button.changeColor();
 boolean state = button.getState();
 println(state);
}

void mousePressed(){
 button.buttonPressed(mouseX, mouseY);
}


class SquareButton extends Button{
 color c;
 
 SquareButton(float _x, float _y, float _r, int _id, color _c){
 super(_x, _y, _r, 1); 
 c = _c;
 }
 
 void display(){
 fill(c);
 rect(x, y, r, r);
 }
 
 void changeColor(){
 if(buttonState){
 c = color(255, 0, 0);
 }else{
 c = color(0, 0, 255);
 }
 }
 
}

課題1
Buttonクラスを継承しCircleButtonを作りなさい。
注意:当たり判定の考え方が矩形とは異なる。

課題2
3つのButtonクラスを継承した子クラスから作成したオブジェクトを画面上に配置し、それぞれのボタンで背景色が切り替わるようにしなさい。(色はR, G, Bで切り替わるようにする)

課題3
Buttonクラスを継承しSliderクラスを作成しなさい。
Sliderオブジェクト上で、マウスボタンを押すと移動できるようになり、水平方向(左右)に動かせるようにする。
背景色が、グラデーションで変化する。
細かい動作の指定はしない
colorMode(HSB);とし、色表記にHSB系を使うと色を変更することができる。