openFrameworks入門（OS X用）

openFrameworksとは

openFrameworksは、C++で書かれたライブラリ群です。
ですがProcessingと同じように、簡単なコードのみで様々なグラフィックスやインタラクションをデザインすることができます。C++を知らなくてもプログラミングが可能になっています。
その範囲も、グラフィック、インタラクティブ表現、ネットワーク、サウンド、画像処理、フィジカルコンピューティングなど多岐にわたっています。
表現できる内容はかなりProcessingと重なりますが、C++で書かれているため、実行速度は非常に速いというのが特徴です。

この実習では、openFrameworksを使用して、実際の作品制作を体験してみます。
Processingでプログラミングをした経験がある人にとっては非常に学習しやすいです。
まずは、習うより慣れろです。さっそく始めましょう。この実習は以下の環境で行います。

OS：MacOS 10.6.4
開発環境：Xcode 7.3.1

参考サイト、参考図書

openFrameworks関連の情報を入手することができるサイトや図書は以下の通りです。

公式サイト（英語）
http://www.openframeworks.cc/

openFrameworks日本語サイト
http://openframeworks.jp/

公式サイトの関数リスト（英語）
http://www.openframeworks.cc/documentation

関数リストの日本語訳（pre-release 0.03。少し古い）
http://sites.google.com/site/ofdocjp/

Beyond Interaction ―メディアアートのためのopenFrameworksプログラミング入門

上記書籍サンプルコードのダウンロードサイト
慣れている人はサンプルをダウンロードすれば、書籍がどのような内容なのか大体分かると思います。

openFrameworksのインストール

まずは、公式ページのダウンロードサイトから、必要なパッケージをダウンロードしましょう。Mac、Windows、Linux、iPhone用パッケージが用意されています。FATパッケージは様々な拡張機能があらかじめ追加されているので、こちらの方をダウンロードし、解凍します。
http://www.openframeworks.cc/download

ディレクトリは以下の形になっています。

まずは、基本的な描画サンプルである、「graphicsExample」を再生してみましょう。開発環境であるXcodeがインストールされていれば、「graphicsExample」フィルダ内の「graphicsExample.xcodeproj」は開きます。
もし、Xcodeをインストールしていない場合には、パソコン付属のDVDからDeveloper Toolsをインストールしてください。
Xcodeは以下のディレクトリにあります。

画面上方にある、「ビルドと実行」ボタンをクリックしてください。自動的にソフトが実行されます。

このサンプルの中に描画機能の大半のコードが書かれています。
他のサンプルも実行してみましょう。

プロジェクトファイルの構成

上記のexampleフォルダの中にある「emptyExample」というプロジェクトを例にすると、「src」フォルダの中には以下のファイルが入っています。

main.cpp
アプリケーションを実行するためのファイル。このファイル内でウィンドウのサイズを設定する。

ofApp.cpp
実際の描画やインタラクションなどの実行ファイル。この実習では、このファイルにほとんどのコードを書くことになります。名前は任意なので、自分の好きな名前を使っていい。

ofApp.h
ofApp.cppのヘッダファイル。このファイルにofApp.cpp上のメソッドなどを定義する。ofApp.cppとofApp.hのように、.cppファイルと.hファイルの名前をそろえる。

ofApp.cppファイルの構成

それでは、ofApp.cppの中身を見てみましょう。

それぞれメソッドが書かれていますが、まず理解しなければいけないのは、setup( )、update( )、draw( )というメソッドです。Processingに非常に似ていますね。が、Processingでは、update()メソッドというのは特に使いませんでした。そこが少し違います。以下に、その使用方法を記載します。

setup( )
このメソッドは、Processingの場合と同じです。初期化のためのメソッドです。ここで様々な変数を初期化してください。

update( )
このメソッドは、アニメーションが必要なときに記述します。例えば、物体が移動するアニメーションを描くときには、x, yの変数の値を変化させていきます。
例：x += speed; y += speed;
など。
このように、値を変動させるときにその式をupdate( )メソッドの中に書きます。

draw( )
容易に想像できると思いますが、このメソッドは描画用のメソッドです。例えば円を描きたいときに、ofDrawCircle(100,400,80);
のように記述します。

線の描画

他の言語のように、openFrameworksには点を描くメソッドは用意されていないので、まずは線を描画します。点を描きたい場合は、ofDrawCircle( )という円を描くメソッドがありますので、そのメソッドで大きさを1ピクセルにすればいいでしょう。
線を描くメソッドは以下の形になります。それぞれの点を結びます。

ofDrawLine(float x1, float y1, float x2, float y2);

また、色を付けるのは背景もオブジェクトもルールは一緒で、

ofBackground(int r, int g, int b)
ofSetColor(int r, int g, int b)

となり、それぞれの引数には0~255の値が入ります。

最終的には以下のコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

void ofApp::setup(){
	ofBackground(255,255,255);
}
 
//--------------------------------------------------------------
void ofApp::update(){
 
}
 
//--------------------------------------------------------------
void ofApp::draw(){
	ofSetColor(0,0,0);
	ofDrawLine(100, 200, 300, 400);
}

円、楕円の描画

次に円の描画です。以下のように記述します。radiusは半径です。draw( )メソッドの中に記述しましょう。

ofDrawCircle(float x, float y, float radius);

更に、楕円の描画です。wは幅、hは高さになります。

ofDrawEllipse(float x, float y, float w, float h);

円や楕円が小さい場合は気にならないのですが、大きくなると角が目立ちます。openFrameworksの場合はProcessingと違い、スムーズ機能（アンチエイリアス）は線にしか適応されないので、角が目立つ場合にはポイント数を増やしましょう（初期値は22ポイント）。setup( )内で以下のコードを実行します。ここでは64ポイントに増やしました。

ofSetCircleResolution(64);

その他の図形

その他の図形は以下の通りです。

四角形

ofDrawRectangle(float x1, float y1, float width, float height);

三角形

ofDrawTriangle(float x1, float y1, float x2, float y2, float x3, float y3);

アニメーション

アニメーションの場合には、変数の更新をupdate( )メソッドの中に記述します。
例：x += speed; y += speed;
円の移動のコードは例えば以下のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

float x;
 
//--------------------------------------------------------------
void ofApp::setup(){
	ofBackground(255,255,255);
	x = 0.0;
}
 
//--------------------------------------------------------------
void ofApp::update(){
	x += 0.2;
}
 
//--------------------------------------------------------------
void ofApp::draw(){
	ofSetColor(0,0,0);
	ofDrawCircle(x, ofGetHeight()/2, 100);
}

軌跡を残す

openFrameworksの場合は、勝手に画面が自動更新されます。ですから、アニメーションの場合に、移動した軌跡が残ることはありません。
しかし、場合によっては軌跡を残したい場合もあるでしょう。
そのときには、以下のコードをsetup( )で実行します。

ofSetBackgroundAuto(false);

インタラクション

インタラクションも、すでにメソッドが用意されています。ここではmousePressed( )を使ってみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

float x_pos;
 
//--------------------------------------------------------------
void ofApp::setup(){
	ofBackground(255,255,255);
	x_pos = 0.0;
}
 
//--------------------------------------------------------------
void ofApp::update(){
 
}
 
//--------------------------------------------------------------
void ofApp::draw(){
	ofSetColor(0,0,0);
	ofDrawCircle(x_pos, ofGetHeight()/2, 100);
}
 
//--------------------------------------------------------------
void ofApp::mousePressed(int x, int y, int button){
	x_pos += 5;
}

この場合、mousePressed( )の引数であるx, y, buttonは、それぞれマウスが押されたときの位置とどのボタンが押されたか（left, center, right）になります。