openframeworks – 関数・クラス、オブジェクト指向プログラミング導入 -...

Media Art II 2011 第3回:openFrameworks、関数とクラス

2011年9月20日多摩美術大学情報デザイン学科情報芸術コース田所淳

今日の内容‣ サブルーチン (関数) を理解する

‣ さらに高度なプログラム構造へ‣ クラスを使用する (オブジェクト指向プログラミング)

処理をまとめるサブルーチン ( = 関数)

先週の復習‣ プログラムの構造を生みだす4つのパターン

‣ 継続‣ 選択‣ くりかえし‣ サブルーチン

‣ 今日の前半は「サブルーチン」について

サブルーチン (= 関数) とは‣ プログラム中で意味や内容がまとまっている作業をひとつの手続きとしたもの

‣ openFrameworks (つまり C++) では、サブルーチンのことを「関数 (function)」と呼ぶのが一般的

‣ サブルーチンを使用する利点‣ 繰り返し現れる作業をまとめることができる‣ プログラムの可読性の向上‣ 保守性を高く保つ

関数：引数と戻り値‣ 関数への入出力‣ 引数 (ひきすう, argument) - 関数に渡す値‣ 戻り値 (return value) - 関数が返す値

関数

引数1 引数2 引数3

戻り値

C++ での関数の書きかた‣ C++での関数の書き方

‣ 例えば、int型の数の二乗を計算する関数

‣ もし戻り値がない関数の場合、戻り値の型は「void」にする

戻り値の型名前空間::関数名(引数1, 引数2, 引数3...){ 関数の処理の内容}

int testApp::poweroftwo(int a){! return a * a;}

関数によるアニメーション：補完‣ 関数をつかって、アニメーションを作成してみる‣ 例えば、2つの地点を定義したら、自動的に補完して動く関数を定義する

‣ 関数名は、interpolateByPct‣ 2点間の移動を、パーセント(%)で指定する

‣ 引数 float pct : 現在の二点間を補完する際の%‣ 戻り値 ofPoint pos : %から算出された座標

ofPoint interpolateByPct(float pct);

関数によるアニメーション：補完‣ testApp.h - 全体で使用する変数と、新規に追加した関数interpolateByPctを定義する

#pragma once#include "ofMain.h"

class testApp : public ofBaseApp{!public:! void setup();! void update();! void draw();! void keyPressed (int key);! void keyReleased(int key);! void mouseMoved(int x, int y );! void mouseDragged(int x, int y, int button);! void mousePressed(int x, int y, int button);! void mouseReleased(int x, int y, int button);! void windowResized(int w, int h);! void dragEvent(ofDragInfo dragInfo);! void gotMessage(ofMessage msg);!! float pct;! ofPoint currentPos, startPos, endPos;! ofPoint interpolateByPct(float pct);};

関数によるアニメーション：補完‣ testApp.cpp - パーセントを指定して、動きを生みだす#include "testApp.h"

void testApp::setup(){! ofBackground(0, 0, 0);! ofSetFrameRate(60);! ofSetRectMode(OF_RECTMODE_CENTER);! startPos.set(10, 400);! endPos.set(1000, 300);! pct = 0;}

void testApp::update(){! pct += 0.01f;! if (pct > 1) {! ! pct = 0;! }!! currentPos = interpolateByPct(pct);}

void testApp::draw(){! ofSetColor(31, 127, 255);! ofRect(currentPos.x, currentPos.y, 20, 20);}

ofPoint testApp::interpolateByPct(float pct){! ofPoint pos;! pos.x = (1-pct) * startPos.x + (pct) * endPos.x;! pos.y = (1-pct) * startPos.y + (pct) * endPos.y;! return pos;}

関数によるアニメーション：補完 + フェード‣ 動きの軌跡が見えるように、フェードする関数をつくってみる‣ くりかえしフェードするので関数にしてしまうと便利‣ 関数名：fadeToBlack‣ 引数：なし‣ 戻り値：なし

関数によるアニメーション：補完 + フェード‣ testApp.h - フェードする関数を追加#pragma once#include "ofMain.h"

class testApp : public ofBaseApp{!public:! void setup();! void update();! void draw();!! void keyPressed (int key);! void keyReleased(int key);! void mouseMoved(int x, int y );! void mouseDragged(int x, int y, int button);! void mousePressed(int x, int y, int button);! void mouseReleased(int x, int y, int button);! void windowResized(int w, int h);! void dragEvent(ofDragInfo dragInfo);! void gotMessage(ofMessage msg);!! float pct;! ofPoint currentPos, startPos, endPos;! ofPoint interpolateByPct(float pct);! void fadeToBlack();};

関数によるアニメーション：補完 + フェード‣ testApp.cpp - フェードする関数を追加#include "testApp.h"

void testApp::setup(){! ofSetBackgroundAuto(false);! ofSetVerticalSync(true);! ofEnableAlphaBlending();! ofSetFrameRate(60);! ofBackground(0, 0, 0);! startPos.set(10, 400);! endPos.set(1000, 300);! pct = 0;}

void testApp::update(){! pct += 0.01f;! if (pct > 1) {! ! pct = 0;! }!! currentPos = interpolateByPct(pct);}

void testApp::draw(){! fadeToBlack();! ofSetRectMode(OF_RECTMODE_CENTER);! ofSetColor(31, 127, 255);! ofRect(currentPos.x, currentPos.y, 20, 20);}

関数によるアニメーション：補完 + フェード‣ testApp.cpp - フェードする関数を追加ofPoint testApp::interpolateByPct(float _pct){! float pct = _pct;! ofPoint pos;! pos.x = (1-pct) * startPos.x + (pct) * endPos.x;! pos.y = (1-pct) * startPos.y + (pct) * endPos.y;! return pos;}

void testApp::fadeToBlack() {! ofSetRectMode(OF_RECTMODE_CORNER);! ofSetColor(0, 0, 0, 10);! ofRect(0, 0, ofGetWidth(), ofGetHeight());}

関数によるアニメーション：補完 + フェード‣ 実行結果

高度な補完：加速と減速‣ 補完の動きに、表情をつける‣ %による補完を、単純な加算ではなく、指数で指定してみる‣ C++で指数計算をするには、powerf() 関数を使用する‣ 例：powerf(10, 2) → 10の2乗

‣ interpolateByPct 関数に、引数 shaper を追加‣ pctを、shaperで指定した指数で乗算していく

‣ shaper の値によって動きはどのように変化するだろうか?

高度な補完：加速と減速‣ testApp.h#pragma once#include "ofMain.h"

class testApp : public ofBaseApp{!public:! void setup();! void update();! void draw();! void keyPressed (int key);! void keyReleased(int key);! void mouseMoved(int x, int y );! void mouseDragged(int x, int y, int button);! void mousePressed(int x, int y, int button);! void mouseReleased(int x, int y, int button);! void windowResized(int w, int h);! void dragEvent(ofDragInfo dragInfo);! void gotMessage(ofMessage msg);!! float pct;! float shaper;! ofPoint currentPos, startPos, endPos;! ofPoint interpolateByPct(float pct, float shaper);! void fadeToBlack();};

高度な補完：加速と減速‣ testApp.cpp#include "testApp.h"

void testApp::setup(){! ofSetBackgroundAuto(false);! ofSetVerticalSync(true);! ofEnableAlphaBlending();! ofSetFrameRate(60);! ofBackground(0, 0, 0);

! startPos.set(10, 400);! endPos.set(1000, 300);! pct = 0.0;! shaper = 4.0;}

void testApp::update(){! pct += 0.01f;! if (pct > 1) {! ! pct = 0;! }!! currentPos = interpolateByPct(pct, shaper);}

高度な補完：加速と減速‣ testApp.cppvoid testApp::draw(){! fadeToBlack();! ofSetRectMode(OF_RECTMODE_CENTER);! ofSetColor(31, 127, 255);! ofRect(currentPos.x, currentPos.y, 20, 20);}

ofPoint testApp::interpolateByPct(float _pct, float _shaper){! float pct = powf(_pct, _shaper);! ofPoint pos;! pos.x = (1-pct) * startPos.x + (pct) * endPos.x;! pos.y = (1-pct) * startPos.y + (pct) * endPos.y;! return pos;}

void testApp::fadeToBlack() {! ofSetRectMode(OF_RECTMODE_CORNER);! ofSetColor(0, 0, 0, 10);! ofRect(0, 0, ofGetWidth(), ofGetHeight());}

高度な補完：加速と減速‣ 実行結果

高度な補完：加速と減速‣ shaperの値をいろいろ変化させて、動きを観察してみる

shaper = 4.0 shaper = 0.5

クラスを作成するオブジェクト指向プログラミング導入

‣ オブジェクト指向プログラミング‣ Object Oriented Programming (OOP)‣ オブジェクト指向でProcessingのプログラムを作る‣ そもそもオブジェクト指向とは?

‣ 簡単なプログラムを、オブジェクト指向で書いてみる‣ クラスの定義‣ クラスの呼びだし

オブジェクト指向プログラミングとは?

‣ OOP = 難しい?‣ OOPの難しげな用語たち‣ オブジェクト‣ メソッド‣ メッセージ‣ 継承‣ 抽象化‣ カプセル化‣ ポリモーフィズム (多態性)‣ クラス‣ インスタンス化

‣ 言葉だけだとかなり難しそう…‣ 本質を理解すると、実はやっていることは単純

OOP理解のポイント

‣ OOP以前：その1

‣ 非構造化ログラミング‣ 全てのコードが一つの連続したブロックに含まれている‣ アセンブリ言語・COBOL・BASICなど‣ goto文による制御‣ デバッグが難しい‣ 「スパゲティプログラム」

プログラミング・パラダイムの変遷

‣ 非構造化プログラミング、イメージ


手続き手続き手続き手続き手続き手続き手続き手続き手続き

GOTO

‣ 実例：COBOLによるHello World


000100 IDENTIFICATION DIVISION.000200 PROGRAM-ID. HELLOWORLD.000300 DATE-WRITTEN. 02/05/96 21:04.000400*AUTHOR BRIAN COLLINS000500 ENVIRONMENT DIVISION.000600 CONFIGURATION SECTION.000700 SOURCE-COMPUTER. RM-COBOL.000800 OBJECT-COMPUTER. RM-COBOL.000900001000 DATA DIVISION.001100 FILE SECTION.001200100000 PROCEDURE DIVISION.100100100200 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.

‣ OOP以前：その2

‣ 手続型プログラミング‣ 手続を呼び出す‣ サブルーチン、関数‣ C言語・FORTRAN・Pascal など


‣ 手続型プログラミング、イメージ


メインルーチンサブルーチンA

引数

戻り値

サブルーチンB引数

戻り値

‣ 非構造化プログラミング、手続型プログラムの問題点‣ プログラム規模が大きくなるにつれ全体像の把握が困難‣ 機能の追加・拡張・変更が難しい‣ コードの再利用が難しい‣ プログラミングにかかるコストが膨大に


‣ これらの欠点を改良するため、新たなパラダイムが考案される

‣ オブジェクト指向プログラミング‣ Object Oriented Programming (OOP)

‣ 「もの ( = オブジェクト)」の集まりとしてプログラムを構成‣ 現在のプログラミング言語の主流‣ C++, Objective-C, C#, Java, Python, Ruby, JavaScript, ActionScript, Simula, Smalltalk,...


‣ オブジェクト指向プログラミング言語のイメージ


オブジェクト

オブジェクト

オブジェクト

オブジェクト

‣ OOPの特徴‣ 相互にメッセージを送り合う「オブジェクト」の集まりとしてプログラムを構成

‣ オブジェクトは、プロパティとメソッドから構成される‣ カプセル化 - 必要のない情報は隠す‣ インヘリタンス(継承) - あるオブジェクトが他のオブジェクトの特性を引き継ぐ

‣ ポリモーフィズム(多態性・多様性) - プログラミング言語の各要素が複数の型に属することを許す

オブジェクト指向プログラミングの概念

‣ オブジェクト指向プログラムのポイント：その1‣ オブジェクトの集まりとしてプログラムを構成‣ オブジェクト同士がメッセージを送りあう


‣ オブジェクト指向プログラムのポイント：その2‣ オブジェクトは、プロパティ(性質、状態)と、メソッド(動作、ふるまい) から構成される

状態1状態2状態3

オブジェクト

メソッド1 メソッド2

メソッド3メソッド4


‣ 例：「りんご」をオブジェクトとして考える

赤5.0甘い

ふじ

実がなる

成長する

落ちる腐る

青4.0

すっぱい

青リンゴ実がなる

成長する

落ちる腐る


‣ オブジェクト指向プログラムのポイント：その3‣ 必要のない情報は隠す (カプセル化)‣ プログラムの実装全てを知る必要はない‣ 必要なインターフェイス(接点)だけ見せて、あとは隠す

It’s this resemblance to real things that gives objects much of their power and appeal. They can notonly model components of real systems, but equally as well fulfill assigned roles as components insoftware systems.

Interface and Implementation

To invent programs, you need to be able to capture abstractions and express them in the programdesign. It’s the job of a programming language to help you do this. The language should facilitate theprocess of invention and design by letting you encode abstractions that reveal the way things work.It should let you make your ideas concrete in the code you write. Surface details shouldn’t obscurethe architecture of your program.

All programming languages provide devices that help express abstractions. In essence, these devicesare ways of grouping implementation details, hiding them, and giving them, at least to some extent,a common interface—much as a mechanical object separates its interface from its implementation, asillustrated in “Interface and Implementation” .

Figure 2-1 Inte rfa ce a nd Im ple m e nta tion

910

11

87 6

implementationinterface

Looking at such a unit from the inside, as the implementor, you’d be concerned with what it’scomposed of and how it works. Looking at it from the outside, as the user, you’re concerned onlywith what it is and what it does. You can look past the details and think solely in terms of the rolethat the unit plays at a higher level.

The principal units of abstraction in the C language are structures and functions . Both, in differentways, hide elements of the implementation:

� On the data side of the world, C structures group data elements into larger units which can thenbe handled as single entities. While some code must delve inside the structure and manipulatethe fields separately, much of the program can regard it as a single thing—not as a collection ofelements, but as what those elements taken together represent. One structure can include others,so a complex arrangement of information can be built from simpler layers.

14 Inte rfa ce a nd Im ple m e nta tion2007-12-11 | © 2007 Apple Inc. All Rights Reserved.

C H A P T E R 2

O bje ct-O rie nte d P rogra m m ing

インターフェイス実装


‣ オブジェクト指向プログラムのポイント：その4‣ インヘリタンス(継承)‣ オブジェクトから新たなオブジェクトを派生させる

植物

生物

動物

果物穀物

りんご

ふじ紅玉デリシャス

バナナマンゴー


‣ オブジェクト指向プログラムのポイント：その5‣ ポリモーイズム(多態性、多様性)‣ オブジェクトはメッセージを受け取りそれに応じた処理を行う‣ メッセージの処理方法は、オブジェクト自身が知っていて、その処理はオブジェクトによって異なる

getName()

オブジェクトA：人間

「田所淳」

getName()

オブジェクトB：車

「トヨタカローラ」


‣ クラス‣ クラスとは：オブジェクトの「型紙」‣ クラスをインスタンス化 (実体化) することでインスタンス(オブジェクト)となる

色重さ(g)味

リンゴ(クラス)

実がなる

成長する

落ちる腐る

赤5.0甘い

ふじ(インスタンスオブジェクト)

実がなる

成長する

落ちる腐る

青4.0

すっぱい

青リンゴ(インスタンスオブジェクト)

実がなる

成長する

落ちる腐る

インスタンス化

クラス

‣ いままで扱ってきた、testApp も一つのクラス‣ メソッド - setup(), update(), draw() ...etc.‣ プロパティ - testApp全体で使用する変数

testAppもクラス

クラス変数

setup() update()

draw()exit()

testApp

‣ これまでのようにtestAppにどんどん機能を追加すると、様々な弊害が

‣ 可読性の低下、機能ごとに再利用できない、拡張が困難 ..etc.

testApp単体の限界

testApp testApp肥大化

testApp単体の限界‣ testAppを中心として、オブジェクトごとに役割を分担させたい

クラスの実装‣ 前半にやった、アニメーションする長方形をクラス化してみる

‣ クラス名：Rectangle‣ プロパティ：‣ ofPoint startPos - 開始位置‣ ofPoint endPos - 終了位置‣ ofPoint currentPos - 現在位置‣ float pct - 現在の位置の割合(%)‣ float shaper - 加速・減速の加減

‣ メソッド‣ void draw(); - 四角形の描画‣ void interpolateByPct(float myPct); - 位置の計算

クラスの実装‣ 前半にやった、アニメーションする長方形をクラス化してみる‣ まずは、四角形を表示するところまで

‣ クラス名‣ Rectangle

‣ プロパティ (状態、変数)‣ ofPoint pos - 四角形の中心位置

‣ メソッド (動作、関数)‣ void draw() - 四角形を描画

XCodeプロジェクトにクラスを追加する‣ 追加するファイルは2つ、ヘッダーファイル、実装ファイル‣ ヘッダーファイル - クラス名.h‣ 実装ファイル - クラス名.cpp

‣ 例：Rectangleクラス → Rectangle.h と Rectangle.cpp‣ XCode上で操作して、プロジェクトにファイルを追加する

XCodeプロジェクトにクラスを追加する‣ ファイルのリストの「src」フォルダを右クリック‣ リストから「New File (新規ファイル)」を選択

XCodeプロジェクトにクラスを追加する‣ Mac OS X > C and C++ > C++ File を選択

XCodeプロジェクトにクラスを追加する‣ 名前をつけて、「src」フォルダに保存

XCodeプロジェクトにクラスを追加する‣ 再度、リストから「New File (新規ファイル)」を選択

XCodeプロジェクトにクラスを追加する‣ 名前をつけて、「src」フォルダに保存

XCodeプロジェクトにクラスを追加する‣ Mac OS X > C and C++ > Header File を選択

XCodeプロジェクトにクラスを追加する‣ ファイルリストは以下のようになるはず‣ あとは、それぞれのファイルにコーディングしていく

クラスの実装‣ testApp.h - クラスRectangleをインスタンス化している#pragma once

#include "ofMain.h"#include "Rectangle.h"

class testApp : public ofBaseApp{!public:! void setup();! void update();! void draw();!! void keyPressed (int key);! void keyReleased(int key);! void mouseMoved(int x, int y );! void mouseDragged(int x, int y, int button);! void mousePressed(int x, int y, int button);! void mouseReleased(int x, int y, int button);! void windowResized(int w, int h);! void dragEvent(ofDragInfo dragInfo);! void gotMessage(ofMessage msg);!! Rectangle myRectangle;};

クラスの実装‣ testApp.cpp - インスタンスmyRectangleを表示#include "testApp.h"

void testApp::setup(){! ofSetBackgroundAuto(false);! ofSetVerticalSync(true);! ofEnableAlphaBlending();! ofSetFrameRate(60);! ofBackground(0, 0, 0);!! myRectangle.pos.x = ofGetWidth()/2;! myRectangle.pos.y = ofGetHeight()/2;}

void testApp::update(){

}

void testApp::draw(){! myRectangle.draw();}

クラスの実装‣ Rectangle.h - 四角形を描画するクラスのヘッダー部#pragma once#include "ofMain.h"

class Rectangle { public:! void draw();! ofPoint pos;};

クラスの実装‣ Rectangle.h - 四角形を描画するクラスの実装#include "rectangle.h"

void Rectangle::draw() {! ofFill();! ofSetRectMode(OF_RECTMODE_CENTER);! ofSetColor(31,127,255);! ofRect(pos.x, pos.y, 20,20);}

クラスの実装‣ 実行結果 - 四角形が画面に表示される

クイズ!!‣ 前半の関数を利用したプログラムを参考に、Rectangleクラスを改造して、%指定をすると2点間をアニメーションするようにする

‣ メソッドを追加‣ interpolateByPct

‣ プロパティーを追加‣ 現在位置：pos‣ 開始位置：startPos‣ 終了位置：endPos‣ パーセント：pct‣ 加速・減速：shaper

openframeworks – 関数・クラス、オブジェクト指向プログラミング導入 -...

Education