Contenu connexe Similaire à メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF Similaire à メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF (20) Plus de Atsushi Tadokoro (20) メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF5. ‣ オブジェクト指向プログラミング
‣ Object Oriented Programming (OOP)
‣ オブジェクト指向でProcessingのプログラムを作る
‣ そもそもオブジェクト指向とは?
‣ 簡単なプログラムを、オブジェクト指向で書いてみる
‣ クラスの定義
‣ クラスの呼びだし
オブジェクト指向プログラミングとは?
12. ‣ オブジェクト指向プログラムのポイント:その3
‣ 必要のない情報は隠す (カプセル化)
‣ プログラムの実装全てを知る必要はない
‣ 必要なインターフェイス(接点)だけ見せて、あとは隠す
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
インターフェイス 実装
OOP:ポイントその3
15. ‣ クラス
‣ クラスとは:オブジェクトの「型紙」
‣ クラスをインスタンス化 (実体化) することでインスタンス
(オブジェクト)となる
色
重さ(g)
味
リンゴ
(クラス)
実
が
な
る
成
長
す
る
落
ち
る
腐
る
赤
5.0
甘い
ふじ
(インスタンスオブジェクト)
実
が
な
る
成
長
す
る
落
ち
る
腐
る
青
4.0
すっぱい
青リンゴ
(インスタンスオブジェクト)
実
が
な
る
成
長
す
る
落
ち
る
腐
る
インスタンス化
クラス
16. ‣ いままで扱ってきた、testApp も一つのクラス
‣ メソッド - setup(), update(), draw() ...etc.
‣ プロパティ - testApp全体で使用する変数
testAppもクラス
クラス変数
setup()
update()
draw
()
exit()
testApp
21. OOP実践編 - クラスを作る
‣ ランダムな場所に、1つ静止したパーティクルを描く
‣ https://gist.github.com/tado/6709701
22. #include "testApp.h"
void testApp::setup(){
// 画面基本設定
ofSetFrameRate(60);
ofBackground(63);
ofSetCircleResolution(32);
// 画面内のランダムな場所を指定
position.x = ofRandom(ofGetWidth());
position.y = ofRandom(ofGetHeight());
}
...
void testApp::draw(){
// 設定した場所に円を描く
ofSetHexColor(0x3399cc);
ofCircle(position, 10);
}
OOP実践編 - クラスを作る
‣ testApp.cpp - コード抜粋
23. OOP実践編 - クラスを作る
‣ このプログラムをクラス化してみる
‣ クラス名:Particle
‣ プロパティ (状態、変数):
‣ ofVec2f position : 初期位置
‣ メソッド (ふるまい、関数):
‣ draw( ) : パーティクルを描く
24. OOP実践編 - クラスを作る
‣ こんな風に図示します (UMLクラス図)
Particle
+ position:ofVec2f
+ draw():void
←クラス名
←プロパティ
←メソッド
31. クラスの記述
‣ まずはヘッダーファイル (Particle.h) から
‣ レシピの材料と手順の一覧!
‣ 材料 → 状態、性質 → つまり、プロパティ(変数)
‣ 手順 → ふるまい、動作 → つまり、メソッド(関数)
‣ そのクラスのプロパティとメソッドを記述
‣ 外部から参照するものは、public: 以下に書く
39. #pragma once
#include "ofMain.h"
class Particle {
public:
void draw();
ofVec2f position;
};
クラスの記述
‣ Particle.h
‣ https://gist.github.com/tado/6710045#file-oneparticleclass01-particle-h
最後に必ずセミコロンをつける
45. クラスの記述
‣ 最後に作成したクラスを、testAppから呼び出します
‣ ヘッダーファイル testApp.h で MoveCircle を宣言
‣ これだけで、クラスが実体化(インスタンス化)される
‣ クラス名:Particle
‣ インスタンス:particle
‣ testApp.h
‣ https://gist.github.com/tado/6710045#file-oneparticleclass01-testapp-h
Particle particle;
46. クラスの記述
‣ メインの実装ファイル、testApp.cpp で作成したインスタンス
を使用して円を描かせる
‣ https://gist.github.com/tado/6710045#file-oneparticleclass01-testapp-cpp
‣ testApp::setup( ) で円の初期位置を指定
‣ testApp::draw( ) でParticleのdraw( )メソッドを呼びだし
particle.position.x = ofRandom(ofGetWidth());
particle.position.y = ofRandom(ofGetHeight());
particle.draw();
51. クラスの配列
‣ あとは for文を使用して反復して処理していく
‣ testApp::setup() で初期化
‣ testApp::draw() で描画
‣
for(int i = 0; i < NUM; i++){
float posX = ofRandom(ofGetWidth());
float posY = ofRandom(ofGetHeight());
particle[i].setup(ofVec2f(posX, posY));
}
for(int i = 0; i < NUM; i++){
particle[i].draw();
}
56. パーティクルシステムを作る!
‣ UMLクラス図で表現
Particle
+ position:ofVec2f
+ velocity:ofVec2f
+ force:ofVec2f
+ friction:float
+ radius:float
+ setup(ofVec2f position, ofVec2f velocity):void
+ resetForce():void
+ addForce(ofVec2f force):void
+ updateForce():void
+ updatePos():void
+ checkBounds(float xmin, float ymin, float xmax, float ymax):void
+ draw():void
62. vector (動的配列) の活用
‣ Particleクラス、さらに応用
‣ 次のようなインタラクションを実現したい:
‣ マウスをドラッグしている間、パーティクルがマウスの場所か
ら生成され続ける
‣ 生成されたパーティクルは、そのまま画面に残る
‣ キーボードで「c」のキーを押すとクリア
‣ Particleの配列は、いくつ確保すれば良いのか?
‣ 1000? 10000? 1000000?
‣ 無限大のArrayを作成することはできない…
63. vector (動的配列) の活用
‣ Arrayの数が確定しない
particle[0]
particle[1]
particle[2]
.
.
.
Particle particle[NUM]
NUM個
particle[NUM]
→ 不明
→ 不明
→ 不明
64. vector (動的配列) の活用
‣ 配列の上限の数がわからない場合
‣ Array (静的配列) ではなく、要素数を自由に変更できる動的な
配列を使用すると便利
‣ C++ では 「vector」 が比較的扱いやすい
‣ 「vector<型の種類> 配列名」となる
‣ 例: Particleクラスの動的配列、particleを宣言
vector<Particle> particle;
65. vector (動的配列) の活用
‣ vector (動的配列) のイメージ
particle[0]
particle[1]
particle[2]
.
.
.
vector<Particle> particle
数は可変
66. vector (動的配列) の活用
‣ Vectorの配列要素の操作
‣ 配列の末尾に要素を追加 → push_back()
‣ 例:Particleのオブジェクトpを、particleに追加
‣ 配列の末尾に要素を削除 → pop_back()
‣ 配列の全ての要素をクリア → clear()
particle.push_back(p);
particle.clear();
particle.pop_back();
67. vector (動的配列) の活用
‣ 実装例
‣ こちらもGistを参照 (ParticleクラスはそのままでOK!)
‣ testApp.h
‣ https://gist.github.com/tado/6712412#file-particlevector-
testapp-h
‣ testApp.cpp
‣ https://gist.github.com/tado/6712412#file-particlevector-
testapp-cpp