[Go to “teaching” in Morimoto Lab]

Game by ball 5

Here we study class.

1. Class, Instance, Method

You can create your own data type that includes variables and functions. This is class.

class is like a “cookie cutter” and then we have to make the “cookie” itself with the cutter. This “cookie” is an instance.

To create an instance (=cookie itself), we use new.

method is a function in class.

Alt text

★Let’s see the sample class on the official tutorial and class page.
With this tutorial, you can learn object including class, new, OOP(object-oriented programming), instance, etc.
I am sorry we skip them in this practice but this is an famous concept for programming.

1.1 Make Ball class.

By using our ball program (Ball Game 2), let’s implement Ball class.
The minimum Ball class is such as the below. 

Ball ball;//1. define



void setup(){

  size(500,500);

  ball = new Ball();//2. create an instance

}



void draw(){ 

  ball.display();  //3. access to member method

  println(ball.bx);//4. access to member variables

}



//5. ↓クラスを記述している部分です

class Ball{

  //6. ↓ member variables (メンバ変数)

  float bx=200;

  float by=100;

  float vx = 10;

  float vy = 0;

  float ballSize = 100;



  //7. ↓"constructor" (コンストラクタ)

  Ball(){}  



  //8. ↓member methods (メンバメソッド)

  void display(){

    ellipse(bx, by, ballSize, ballSize);

  }  

  void move(){

    //適宜記述してください

  }  

}

上記サンプルコードの1-6までの説明です。

Ex A. Implement display() and move() methods of Ball class.

前回またはgame by ball 1,2のように、ボールを動かし、描画しましょう。
ボールを描画する部分をdisplay()、動きを決める部分をmove()に記述してみてください
(サンプルコードのコメントアウトしてある部分です)。

動きの方はまずは簡単なものでも構いません。

Ex B. Implement constructor with parameters that can specify the position of the ball.

以下のように、クラスのインスタンスを生成するとき、newのあとに呼び出されているのがコンストラクタです。

Ball ball = new Ball();//define

コンストラクタは同じ名前でも引数を変えることで、複数定義できます（関数のオーバーロード(多重定義)と同じです）。
以下はその例になります。

Ball(float bx0, float by0){

    bx = bx0;

    ...

}

この課題では、コンストラクタに引数を持たせて、位置を指定できるようにしましょう。
余裕がある人はボールの速度やサイズなども指定してみましょう。

Ex C. Define an array of Ball class and draw all balls.

Ex Bを活かして、少しずつ違う場所にボールを描画してみましょう。

Note:
You need “new” twice when you use class with array.
One for “new” to create an array and another for “new” to create each instance of class.

//newを2回使ったクラスの配列の生成

//PVectorクラスによる例だが、Ballクラスなどもこれと同様



//1

PVector [] pos = new PVector[10];



//2

for(int i=0 ; i < 10; i++){

  pos[i] = new PVector();

}

Ex D. 少し横道：blendModeを使ってみよう。

blendMode(**)は色が重なった時にどう見えるかを指定することができ、簡単に様々な表現ができます。
**には以下のようなパラメータを指定します。

BLEND：単純に重ねて表示するもの（デフォルト）
ADD：加算合成

などなど。

図解でわかりやすく説明したページはこちら。

詳細はofficial processing of blendMode()。

↓↓↓少し発光したようなblendの仕方

blendModeを使って、少し発光したような表現をしてみましょう。

  1. 以下をsetupに記載し、drawから消します。

background(0);

  1. drawの最初に下記を追記します。

blendMode(BLEND);

fill(0,0,0,10);

rect(0,0,width,height);

  1. draw内でボールを描画する前に、下記を追記します。

blendMode(ADD);

fill(31, 127, 255, 127);

Alt text

blendMode()を使ったボールの表現。

↓参考にしたサイト。継承など、クラスについてより詳しい解説などもあります。
https://yoppa.org/teu_media18/8936.html

Ex E. Ball classに寿命、死亡フラグ、などを追加し、それらの変化によってボールの動きや見かけが変わるように変更しなさい。

生き物（動植物）の生と死や成長、
などがわかりやすいと思いますが、
アイデア次第で何でもOK。

死ぬ前にどんどん透明にしてフェードで消えるなどもよいですし、
光ったり消えたりするような発光を表現するのもよいです。
インタラクションでパーティクルのようなエフェクトがでるなどもよい。

ボールじゃなくてもいいし、描画などと組み合わせてもOK。

そういえば大阪万博のロゴマーク、「いのちの輝きくん」がTwitterで色々とアレンジされていました。
今回の課題の参考に下記のURLでぜひ遊んでみてください！

Particle and particle system class:
Now you can understand the particle class in the sample code on the website.
https://processing.org/examples/simpleparticlesystem.html

Multiple Particle Systems:
More difficult one in the sample code on the website.
https://processing.org/examples/multipleparticlesystems.html

一言:
余裕のある人は講義で教えていない技術やアイデアを自分で調べてどんどん実装してみてください。