SSAW08 後期第3回
Processingで
オブジェクト指向プログラミング
2008年9月30日
今日の課題
• Processingでオブジェクト指向プログラミング(OOP)について理解する
• オブジェクトの概念を理解する
• Processingでオブジェクト指向プログラミングをやってみる
OOP理解のポイント
• OOP = 難しい?
• OOPの難しげな用語たち
• オブジェクト
• メソッド
• メッセージ
• 継承
• 抽象化
• カプセル化
• ポリモーフィズム (多態性)
• クラス
• インスタンス化
• 言葉だけだ...
プログラミング・パラダイムの変遷
• OOP以前:その1
• 非構造化ログラミング
• 全てのコードが一つの連続したブロックに含まれている
• アセンブリ言語・COBOL・BASICなど
• goto文による制御
• デバッグが難しい
• 「ス...
プログラミング・パラダイムの変遷
実例:COBOLによるHello World
000100 IDENTIFICATION DIVISION.
000200 PROGRAM-ID. HELLOWORLD.
000300 DATE-WRITTEN...
プログラミング・パラダイムの変遷
• OOP以前:その2
• 手続型プログラミング
• 手続を呼び出す
• サブルーチン、関数
• C言語・FORTRAN・Pascal など
• 3つの基本制御パターン
• 逐次処理
• 分岐
• 繰り返し
プログラミング・パラダイムの変遷
• 手続型プログラミング、3つの基本制御パターン
判断
処理1 処理2
YesNo
処理1
処理2
判断
処理
Yes
No
判断
処理
Yes
No
逐次処理 分岐 反復
機能中心のソフトウェア開発の問題点
• 機能、手続きを中心に構成されたプログラムの問題点
• プログラムの規模が大きくなるにつれて全体像の把握が難しい
• 機能の追加・拡張・変更が難しい
• コードの再利用が難しい
• 規模が大きくなるにつれ、...
オブジェクト指向プログラミングの概念
• オブジェクト指向プログラムのポイント:その1
• 「もの (= オブジェクト)」という単位でプログラムを構成する
• オブジェクトは、属性(性質)とメソッド(動作・ふるまい)から構成
状態1
状態2
状...
• 例:「りんご」をオブジェクトとして考える
オブジェクト指向プログラミングの概念
赤
5.0
甘い
ふじ
実
が
な
る
成
長
す
る
落
ち
る
腐
る
青
4.0
すっぱい
青リンゴ
実
が
な
る
成
長
す
る
落
ち
る
腐
る
オブジェクト指向プログラミングの概念
• オブジェクト指向プログラムのポイント:その2
• オブジェクト同士がメッセージを送りあう
オブジェクト指向プログラミングの概念
• オブジェクト指向プログラムのポイント:その3
• オブジェクトはメッセージを受け取り、それに応じた処理を行う
• メッセージの処理方法は、オブジェクト自身が知っていて、その処
理はオブジェクトによって異...
• オブジェクト指向プログラムのポイント:その4
• 必要のない情報は隠す (カプセル化)
• プログラムの実装全てを知る必要はない
• 必要なインターフェイス(接点)だけ見せて、あとは隠す
オブジェクト指向プログラミングの概念
To inve...
オブジェクト指向プログラミングの概念
• オブジェクト指向プログラムのポイント:その5
• オブジェクトから新たなオブジェクトを派生させることができる (継承)
植物
生物
動物
果物 穀物
りんご
ふじ 紅玉 デリシャス
バナナ マンゴー
オブジェクト指向プログラミングの概念
• クラス
• クラスとは:オブジェクトの「型紙」
• クラスをインスタンス化 (実体化) することでインスタンスオブジェクト
となる
色
重さ(g)
味
リンゴ
(クラス)
実
が
な
る
成
長
す
る...
ProcessingでOOPを実践してみる!
• 簡単なクラスの作成から徐々に高度なアニメーションへ発展させてみる
• 丸い点を描くクラスを作ってみる
• クラスに必要となる属性
属性 (型 変数名) 内容
float x 丸のx座標の位置
flo...
丸を描く (クラスを使わない例)
• まずはクラスを使わないで、丸を描いてみる
• setup() - 初期化
• draw() - 画面の描画
• グローバル変数として丸のパラメータを定義
• float x; → x座標
• float y; ...
丸を描く (クラスを使わない例)
int x = 150;
int y = 200;
int diameter = 30;
void setup() {
size(400, 400);
smooth();
noStroke();
}
void ...
丸を描く (クラスを使わない例)
丸を描く
クラスを宣言、属性を定義
• 丸を生成するクラスを宣言する
• クラス名:Spot
• インスタンスオブジェクト:sp
• Spotクラスをインスタンス化して、spというインスタンスオブジェ
クトを生成
• クラスの属性
• float...
丸を描く
クラスを宣言、属性を定義
• 現在のクラスをクラス図で表現
x: float
y: float
diameter :float
Spot クラス名
属性
丸を描く
クラスを宣言、属性を定義
Spot sp; // クラスを宣言
void setup() {
size(400, 400);
smooth();
noStroke();
sp = new Spot(); // クラスの生成 (インスタ...
丸を描く
クラスを宣言、属性を定義
class Spot {
float x, y; // x座標とy座標の位置
float diameter; // 円の直径
}
丸を描く
メソッドを定義
• Spotクラスの「ふるまい (= メソッド)」を定義する
• メソッドはクラス内で関数として表現される
• 必要となるメソッド
• 円を描く
• メソッド名
• void display()
丸を描く
メソッドを定義
• 現在のクラスをクラス図で表現
display(): void
x: float
y: float
diameter :float
Spot クラス名
属性
メソッド
丸を描く
メソッドを定義
Spot sp;
void setup() {
size(100, 100);
smooth();
noStroke();
sp = new Spot();
sp.x = 33;
sp.y = 50;
sp.diame...
丸を描く
メソッドを定義
class Spot {
float x, y, diameter;
// display() メソッドを定義
void display() {
ellipse(x, y, diameter, diameter);
}...
丸を描く
コンストラクタを定義
• コンストラクタ (構築子、Constructor) とは
• オブジェクトをインスタンス化する際に呼び出されて、内容の初期化な
どを行う関数
• クラス名と同一の名前を持つメソッドとして定義される
• 戻り値...
丸を描く
コンストラクタを定義
• 現在のクラスをクラス図で表現
Spot(xpos: float, ypos: float, diameter: float)
display(): void
x: float
y: float
diameter: flo...
丸を描く
コンストラクタを定義
Spot sp; //オブジェクトの宣言
void setup() {
	 size(400, 400);
	 smooth();
	 noStroke();
	 sp = new Spot(150, 200, ...
丸を描く
コンストラクタを定義
class Spot {
	 float x, y, diameter;
	
	 Spot(float x, float y, float diameter) {
	 	 //クラスのインスタンス x(this....
丸を動かしてみる
• さらにクラスを拡張して、丸をアニメーションさせてみる
• 2つの属性と、1つのメソッドを追加する
• 追加する属性
• 移動スピード
• float speed
• 移動方向 (1を上向き、-1を下向きと解釈する)
• in...
丸を動かしてみる
• クラス図を更新
Spot(xpos: float, ypos: float, diameter: float, speed:float)
move(): void
display(): void
x: float
y: float
d...
丸を動かしてみる
Spot sp; //オブジェクトの宣言
void setup() {
size(400, 400);
smooth();
noStroke();
sp = new Spot(150, 200, 30, 5); //インスタン...
丸を動かしてみる
class Spot {
float x, y;
float diameter;
float speed; //移動スピード
int direction = 1; //移動の向き (1 下向き, -1 上向き)
Spot(fl...
丸を動かしてみる
複数のオブジェクトを配置する
• オブジェクトは、変数と同様に名前を変えて宣言することで複数宣言する
ことが可能
• インスタンス化の際の引数を変化させることで、様々なバリエーションの
Spotオブジェクトを同時に表示することができる
• Sp...
複数のオブジェクトを配置する
Spot sp1, sp2, sp3; //3つのオブジェクトを宣言
void setup() {
	 size(400, 400);
	 smooth();
	 noStroke();
	 sp1 = new S...
複数のオブジェクトを配置する
class Spot {
	 float x, y;
	 float diameter;
	 float speed;
	 int direction = 1;
	 Spot(float xpos, float y...
複数のオブジェクトを配置する
より複雑な動きを作成する
物理法則をシミュレート
• もっと複雑な動きに挑戦してみる
• よりリアルな動きを実現できないか?
• 簡単な物理法則をシミュレーションしてみる
• 重力
• 摩擦
• 反射
Particleクラス
• Particleクラス
• 重力の影響を受けながら運動する物体をシミュレート
• 必要となる属性
• x座標、y座標 → float x, y;
• x方向の速度、y方向の速度 → float vx, vy;
• 大きさ...
Particleクラス
• Particleクラス、クラス図を作成
Particle(x:float, y:float, vx:float, vy:float, radius: float, gravity:float)
update(): void
di...
Particleクラス
class Particle {
	 float x, y;
	 float vx, vy;
	 float radius;
	 float gravity = 0.1;
	 Particle(int x, int y,...
Particleを使用する
Particle p;
void setup() {
	 size(400, 400);
	 noStroke();
	 smooth();
	 p = new Particle(0, height, 2.5, -8...
Particleを表示する
クラスの継承
• Particleクラスを継承して、別の性質を付加する
• Particleクラス
• 画面からはみ出てもそのまま落下していく
• 画面の範囲でバウンドするように変更したい
• LimitedParticleクラス
• Part...
LimitedParticleクラスの実装
• クラス図
• Particleクラスと、それを継承するLimitedParticleクラス
Particle(x:float, y:float, vx:float, vy:float, radius: fl...
LimitedParticleクラス
class LimitedParticle extends Particle {
	 float friction = 0.99;
	 LimitedParticle(int x, int y, float...
LimitedParticleクラスを使用する
int num = 80;
LimitedParticle[] p = new LimitedParticle[num];
float radius = 1.2;
void setup() {
	...
LimitedParticleクラスを使用する
色の付加
• LimitedParticleクラスに色の属性を追加する
• 色の属性
• color col;
• 設定した色で塗るように、display() メソッドを拡張
• super.display() を実行
• スーパークラス (P...
色の付加
• クラス図追加
Particle(x:float, y:float, vx:float, vy:float, radius: float, gravity:float)
update(): void
display(): void
x: floa...
色の付加
class LimitedParticle extends Particle {
	 float friction = 0.99;
	 color col; //色の属性
	 LimitedParticle(int x, int y,...
色の付加
int num = 200;
LimitedParticle[] p = new LimitedParticle[num];
float radius = 1.2;
void setup() {
	 size(640, 480);
	...
色の付加
Upcoming SlideShare
Loading in...5
×

Ssaw08 0930

1,168
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,168
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ssaw08 0930

  1. 1. SSAW08 後期第3回 Processingで オブジェクト指向プログラミング 2008年9月30日
  2. 2. 今日の課題 • Processingでオブジェクト指向プログラミング(OOP)について理解する • オブジェクトの概念を理解する • Processingでオブジェクト指向プログラミングをやってみる
  3. 3. OOP理解のポイント • OOP = 難しい? • OOPの難しげな用語たち • オブジェクト • メソッド • メッセージ • 継承 • 抽象化 • カプセル化 • ポリモーフィズム (多態性) • クラス • インスタンス化 • 言葉だけだとかなり難しそう… • 本質を理解すると、実はやっていることは単純
  4. 4. プログラミング・パラダイムの変遷 • OOP以前:その1 • 非構造化ログラミング • 全てのコードが一つの連続したブロックに含まれている • アセンブリ言語・COBOL・BASICなど • goto文による制御 • デバッグが難しい • 「スパゲティプログラム」
  5. 5. プログラミング・パラダイムの変遷 実例:COBOLによるHello World 000100 IDENTIFICATION DIVISION. 000200 PROGRAM-ID. HELLOWORLD. 000300 DATE-WRITTEN. 02/05/96 21:04. 000400* AUTHOR BRIAN COLLINS 000500 ENVIRONMENT DIVISION. 000600 CONFIGURATION SECTION. 000700 SOURCE-COMPUTER. RM-COBOL. 000800 OBJECT-COMPUTER. RM-COBOL. 000900 001000 DATA DIVISION. 001100 FILE SECTION. 001200 100000 PROCEDURE DIVISION. 100100 100200 MAIN-LOGIC SECTION. 100300 BEGIN. 100400 DISPLAY " " LINE 1 POSITION 1 ERASE EOS. 100500 DISPLAY "HELLO, WORLD." LINE 15 POSITION 10. 100600 STOP RUN. 100700 MAIN-LOGIC-EXIT. 100800 EXIT.
  6. 6. プログラミング・パラダイムの変遷 • OOP以前:その2 • 手続型プログラミング • 手続を呼び出す • サブルーチン、関数 • C言語・FORTRAN・Pascal など • 3つの基本制御パターン • 逐次処理 • 分岐 • 繰り返し
  7. 7. プログラミング・パラダイムの変遷 • 手続型プログラミング、3つの基本制御パターン 判断 処理1 処理2 YesNo 処理1 処理2 判断 処理 Yes No 判断 処理 Yes No 逐次処理 分岐 反復
  8. 8. 機能中心のソフトウェア開発の問題点 • 機能、手続きを中心に構成されたプログラムの問題点 • プログラムの規模が大きくなるにつれて全体像の把握が難しい • 機能の追加・拡張・変更が難しい • コードの再利用が難しい • 規模が大きくなるにつれ、プログラミングにかかるコストが膨大に • これらの欠点を改良するため、新たなパラダイムが考案される • オブジェクト指向プログラミング (OOP) • Simula, Smalltalk, C++, Objective-C, Java, Python, Ruby, JavaScript, C# ... • 「もの ( = オブジェクト)」の集まりとしてプログラムを構成する
  9. 9. オブジェクト指向プログラミングの概念 • オブジェクト指向プログラムのポイント:その1 • 「もの (= オブジェクト)」という単位でプログラムを構成する • オブジェクトは、属性(性質)とメソッド(動作・ふるまい)から構成 状態1 状態2 状態3 オブジェクト メ ソ ッ ド 1 メ ソ ッ ド 2 メ ソ ッ ド 3 メ ソ ッ ド 4
  10. 10. • 例:「りんご」をオブジェクトとして考える オブジェクト指向プログラミングの概念 赤 5.0 甘い ふじ 実 が な る 成 長 す る 落 ち る 腐 る 青 4.0 すっぱい 青リンゴ 実 が な る 成 長 す る 落 ち る 腐 る
  11. 11. オブジェクト指向プログラミングの概念 • オブジェクト指向プログラムのポイント:その2 • オブジェクト同士がメッセージを送りあう
  12. 12. オブジェクト指向プログラミングの概念 • オブジェクト指向プログラムのポイント:その3 • オブジェクトはメッセージを受け取り、それに応じた処理を行う • メッセージの処理方法は、オブジェクト自身が知っていて、その処 理はオブジェクトによって異なる (ポリモーフィズム) getName() オブジェクトA:人間 「田所 淳」 getName() オブジェクトB:車 「トヨタカローラ」
  13. 13. • オブジェクト指向プログラムのポイント:その4 • 必要のない情報は隠す (カプセル化) • プログラムの実装全てを知る必要はない • 必要なインターフェイス(接点)だけ見せて、あとは隠す オブジェクト指向プログラミングの概念 To invent programs, you need to be able to capture abstractions and ex design. It’s the job of a programming language to help you do this. The process of invention and design by letting you encode abstractions tha It should let you make your ideas concrete in the code you write. Surf the architecture of your program. All programming languages provide devices that help express abstrac are ways of grouping implementation details, hiding them, and giving a common interface—much as a mechanical object separates its interfa illustrated in “Interface and Implementation” . Figure 2-1 Interface and Implementation 9 10 11 8 7 6 implementationinterface インターフェイス 実装
  14. 14. オブジェクト指向プログラミングの概念 • オブジェクト指向プログラムのポイント:その5 • オブジェクトから新たなオブジェクトを派生させることができる (継承) 植物 生物 動物 果物 穀物 りんご ふじ 紅玉 デリシャス バナナ マンゴー
  15. 15. オブジェクト指向プログラミングの概念 • クラス • クラスとは:オブジェクトの「型紙」 • クラスをインスタンス化 (実体化) することでインスタンスオブジェクト となる 色 重さ(g) 味 リンゴ (クラス) 実 が な る 成 長 す る 落 ち る 腐 る 赤 5.0 甘い ふじ (インスタンスオブジェクト) 実 が な る 成 長 す る 落 ち る 腐 る 青 4.0 すっぱい 青リンゴ (インスタンスオブジェクト) 実 が な る 成 長 す る 落 ち る 腐 る インスタンス化
  16. 16. ProcessingでOOPを実践してみる! • 簡単なクラスの作成から徐々に高度なアニメーションへ発展させてみる • 丸い点を描くクラスを作ってみる • クラスに必要となる属性 属性 (型 変数名) 内容 float x 丸のx座標の位置 float y 丸のy座標の位置 float diameter 丸の直径
  17. 17. 丸を描く (クラスを使わない例) • まずはクラスを使わないで、丸を描いてみる • setup() - 初期化 • draw() - 画面の描画 • グローバル変数として丸のパラメータを定義 • float x; → x座標 • float y; → y座標 • float diameter; → 直径
  18. 18. 丸を描く (クラスを使わない例) int x = 150; int y = 200; int diameter = 30; void setup() { size(400, 400); smooth(); noStroke(); } void draw() { background(0); ellipse(x, y, diameter, diameter); }
  19. 19. 丸を描く (クラスを使わない例)
  20. 20. 丸を描く クラスを宣言、属性を定義 • 丸を生成するクラスを宣言する • クラス名:Spot • インスタンスオブジェクト:sp • Spotクラスをインスタンス化して、spというインスタンスオブジェ クトを生成 • クラスの属性 • float x; → x座標 • float y; → y座標 • float diameter; → 直径
  21. 21. 丸を描く クラスを宣言、属性を定義 • 現在のクラスをクラス図で表現 x: float y: float diameter :float Spot クラス名 属性
  22. 22. 丸を描く クラスを宣言、属性を定義 Spot sp; // クラスを宣言 void setup() { size(400, 400); smooth(); noStroke(); sp = new Spot(); // クラスの生成 (インスタンス化) sp.x = 150; // クラスの属性「x」に150を代入 sp.y = 200; // クラスの属性「y」に200を代入 sp.diameter = 30; // クラスの属性「diameter」に30を代入 } void draw() { background(0); ellipse(sp.x, sp.y, sp.diameter, sp.diameter); }
  23. 23. 丸を描く クラスを宣言、属性を定義 class Spot { float x, y; // x座標とy座標の位置 float diameter; // 円の直径 }
  24. 24. 丸を描く メソッドを定義 • Spotクラスの「ふるまい (= メソッド)」を定義する • メソッドはクラス内で関数として表現される • 必要となるメソッド • 円を描く • メソッド名 • void display()
  25. 25. 丸を描く メソッドを定義 • 現在のクラスをクラス図で表現 display(): void x: float y: float diameter :float Spot クラス名 属性 メソッド
  26. 26. 丸を描く メソッドを定義 Spot sp; void setup() { size(100, 100); smooth(); noStroke(); sp = new Spot(); sp.x = 33; sp.y = 50; sp.diameter = 30; } void draw() { background(0); sp.display(); }
  27. 27. 丸を描く メソッドを定義 class Spot { float x, y, diameter; // display() メソッドを定義 void display() { ellipse(x, y, diameter, diameter); } }
  28. 28. 丸を描く コンストラクタを定義 • コンストラクタ (構築子、Constructor) とは • オブジェクトをインスタンス化する際に呼び出されて、内容の初期化な どを行う関数 • クラス名と同一の名前を持つメソッドとして定義される • 戻り値は持たない • コンストラクタに渡す引数により初期化のバリエーションが定義される • 例:Spotクラスのコンストラクタ • Spot( 引数1, 引数2, 引数3 ...) { } • Spotクラスの引数に以下の3つのパラメータを渡せるようにする • float x; • float y; • float diameter;
  29. 29. 丸を描く コンストラクタを定義 • 現在のクラスをクラス図で表現 Spot(xpos: float, ypos: float, diameter: float) display(): void x: float y: float diameter: float Spot
  30. 30. 丸を描く コンストラクタを定義 Spot sp; //オブジェクトの宣言 void setup() { size(400, 400); smooth(); noStroke(); sp = new Spot(150, 200, 30); //コンストラクタ } void draw() { background(0); sp.display(); }
  31. 31. 丸を描く コンストラクタを定義 class Spot { float x, y, diameter; Spot(float x, float y, float diameter) { //クラスのインスタンス x(this.x) に、引数の値xを代入 this.x = x; //クラスのインスタンス y(this.y) に、引数の値yを代入 this.y = y; //diameter(this.diameter) に、引数の値diameterを代入 this.diameter = diameter; } void display() { ellipse(x, y, diameter, diameter); } }
  32. 32. 丸を動かしてみる • さらにクラスを拡張して、丸をアニメーションさせてみる • 2つの属性と、1つのメソッドを追加する • 追加する属性 • 移動スピード • float speed • 移動方向 (1を上向き、-1を下向きと解釈する) • int speed • 追加するメソッド • 座標移動 • void move()
  33. 33. 丸を動かしてみる • クラス図を更新 Spot(xpos: float, ypos: float, diameter: float, speed:float) move(): void display(): void x: float y: float diameter: float speed: float direction: int Spot
  34. 34. 丸を動かしてみる Spot sp; //オブジェクトの宣言 void setup() { size(400, 400); smooth(); noStroke(); sp = new Spot(150, 200, 30, 5); //インスタンス化 } void draw() { fill(0, 15); rect(0, 0, width, height); fill(255); sp.move(); //丸の座標を更新 sp.display(); //丸を表示 }
  35. 35. 丸を動かしてみる class Spot { float x, y; float diameter; float speed; //移動スピード int direction = 1; //移動の向き (1 下向き, -1 上向き) Spot(float xpos, float ypos, float dia, float sp) { x = xpos; y = ypos; diameter = dia; speed = sp; } void move() { //上下の端に到達した際に向きが反転する y += (speed * direction); if ((y > (height - diameter / 2)) || (y < diameter / 2)) { direction *= -1; } } void display() { ellipse(x, y, diameter, diameter); } }
  36. 36. 丸を動かしてみる
  37. 37. 複数のオブジェクトを配置する • オブジェクトは、変数と同様に名前を変えて宣言することで複数宣言する ことが可能 • インスタンス化の際の引数を変化させることで、様々なバリエーションの Spotオブジェクトを同時に表示することができる • Spotクラスから3つのオブジェクトを生成 • sp1 • sp2 • sp3
  38. 38. 複数のオブジェクトを配置する Spot sp1, sp2, sp3; //3つのオブジェクトを宣言 void setup() { size(400, 400); smooth(); noStroke(); sp1 = new Spot(100, 200, 80, 2); //sp1を生成 sp2 = new Spot(200, 200, 20, 5); //sp2を生成 sp3 = new Spot(300, 50, 60, 3); //sp3を生成 } void draw() { fill(0, 15); rect(0, 0, width, height); fill(255); sp1.move(); sp2.move(); sp3.move(); sp1.display(); sp2.display(); sp3.display(); }
  39. 39. 複数のオブジェクトを配置する class Spot { float x, y; float diameter; float speed; int direction = 1; Spot(float xpos, float ypos, float dia, float sp) { x = xpos; y = ypos; diameter = dia; speed = sp; } void move() { y += (speed * direction); if ((y > (height - diameter / 2)) || (y < diameter / 2)) { direction *= -1; } } void display() { ellipse(x, y, diameter, diameter); } }
  40. 40. 複数のオブジェクトを配置する
  41. 41. より複雑な動きを作成する 物理法則をシミュレート • もっと複雑な動きに挑戦してみる • よりリアルな動きを実現できないか? • 簡単な物理法則をシミュレーションしてみる • 重力 • 摩擦 • 反射
  42. 42. Particleクラス • Particleクラス • 重力の影響を受けながら運動する物体をシミュレート • 必要となる属性 • x座標、y座標 → float x, y; • x方向の速度、y方向の速度 → float vx, vy; • 大きさ → float radius; • 重力の強さ → float grabity; • 必要となるメソッド • コンストラクタ → Particle • 座標の更新 → update • 画面に表示 → display
  43. 43. Particleクラス • Particleクラス、クラス図を作成 Particle(x:float, y:float, vx:float, vy:float, radius: float, gravity:float) update(): void display(): void x: float y: float vx: float vy: float radius: float gravity: float Particle
  44. 44. Particleクラス class Particle { float x, y; float vx, vy; float radius; float gravity = 0.1; Particle(int x, int y, float vx, float vy, float radius) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.radius = radius; } void update() { vy = vy + gravity; y += vy; x += vx; } void display() { ellipse(x, y, radius*2, radius*2); } }
  45. 45. Particleを使用する Particle p; void setup() { size(400, 400); noStroke(); smooth(); p = new Particle(0, height, 2.5, -8, 10.0); } void draw() { fill(0, 10); rect(0, 0, width, height); fill(255); p.update(); p.display(); }
  46. 46. Particleを表示する
  47. 47. クラスの継承 • Particleクラスを継承して、別の性質を付加する • Particleクラス • 画面からはみ出てもそのまま落下していく • 画面の範囲でバウンドするように変更したい • LimitedParticleクラス • Particleクラスを継承 • 画面の範囲内でバウンドする • 常に一定の割合で摩擦の影響を受ける
  48. 48. LimitedParticleクラスの実装 • クラス図 • Particleクラスと、それを継承するLimitedParticleクラス Particle(x:float, y:float, vx:float, vy:float, radius: float, gravity:float) update(): void display(): void x: float y: float vx: float vy: float radius: float gravity: float Particle LimitedParticle(x:float, y:float, vx:float, vy:float, radius: float, gravity:float, friction:float) update(): void limit(): void friction: float LimitedParticle
  49. 49. LimitedParticleクラス class LimitedParticle extends Particle { float friction = 0.99; LimitedParticle(int x, int y, float vx, float vy, float radius, float friction) { super(x, y, vx, vy, radius); //親クラスの引数を参照 this.friction = friction; //摩擦係数 } void update() { vy *= friction; vx *= friction; super.update(); // limit(); } void limit() { //表示範囲内でバウンドする if (y > height - radius) { vy = -vy; y = constrain(y, -height * height, height - radius); } if ((x < radius) || (x > width - radius)) { vx = -vx; x = constrain(x, radius, width - radius); } } }
  50. 50. LimitedParticleクラスを使用する int num = 80; LimitedParticle[] p = new LimitedParticle[num]; float radius = 1.2; void setup() { size(640, 480); noStroke(); smooth(); for (int i = 0; i < p.length; i++) { float velX = random(-4, 4); float velY = random(-10, 0); p[i] = new LimitedParticle(width/2, height/2, velX, velY, 2.2, 0.999); } } void draw() { fill(0, 24); rect(0, 0, width, height); fill(255); for (int i = 0; i < p.length; i++) { p[i].update(); p[i].display(); } }
  51. 51. LimitedParticleクラスを使用する
  52. 52. 色の付加 • LimitedParticleクラスに色の属性を追加する • 色の属性 • color col; • 設定した色で塗るように、display() メソッドを拡張 • super.display() を実行 • スーパークラス (Particle) の display() メソッドの呼びだし • 色の指定の付加
  53. 53. 色の付加 • クラス図追加 Particle(x:float, y:float, vx:float, vy:float, radius: float, gravity:float) update(): void display(): void x: float y: float vx: float vy: float radius: float gravity: float Particle LimitedParticle(x:float, y:float, vx:float, vy:float, radius: float, gravity:float, friction:float, col:color) update(): void limit(): void display(): void friction: float col: color LimitedParticle
  54. 54. 色の付加 class LimitedParticle extends Particle { float friction = 0.99; color col; //色の属性 LimitedParticle(int x, int y, float vx, float vy, float radius, float friction, color col) { super(x, y, vx, vy, radius); this.friction = friction; this.col = col; } void update() { vy *= friction; vx *= friction; super.update(); limit(); } void limit() { if (y > height - radius) { vy = -vy; y = constrain(y, -height * height, height - radius); } if ((x < radius) || (x > width - radius)) { vx = -vx; x = constrain(x, radius, width - radius); } } void display() { fill(col); super.display(); //スーパークラス (Particle) の display() を呼び出し } }
  55. 55. 色の付加 int num = 200; LimitedParticle[] p = new LimitedParticle[num]; float radius = 1.2; void setup() { size(640, 480); colorMode(HSB,360,100,100,100); //HSBで色を指定する noStroke(); smooth(); for (int i = 0; i < p.length; i++) { float velX = random(-4, 4); float velY = random(-10, 0); color col = color(random(180,240),random(50,100),50); //ランダムに色指定 p[i] = new LimitedParticle(width / 2, height / 2, velX, velY, 2.2, 0.9999, col); } } void draw() { fill(0, 10); rect(0, 0, width, height); fill(255); for (int i = 0; i < p.length; i++) { p[i].update(); p[i].display(); } }
  56. 56. 色の付加
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×