メディア芸術演習 VI - メディア・アート II
openFrameworks入門
サンプルファイルのダウンロード
授業で解説したプログラムは下記からダウンロードしてください。
openFrameworksとは
openFrameworks とは?
C++によるクリエイティブなコーディングのためのオープンソースのツールキット
簡単な歴史
2004年、Zachary Liebermanがニューヨークのパーソンズ美術大学での大学院のクラスの作品制作のためのツールとして開発
その後、Zachary Lieberman、Theo Watson、Arturo Castroを主要メンバーとして、世界中の開発者と協力しながら発展
様々なメディアを駆使した作品を作りたい!!
様々な技術に精通しなくてはならない
サウンド、ビデオ、フォント、画像解析、物理演算
…etc.
openFrameworksを利用すると、
既存の道具(=ライブラリ)を設定なしに使用可能
→ 作品制作のための「糊」
開発のための「糊」
ネイティブアプリケーションとして動作する
→ 超高速!!
参考：100万個のパーティクルをアニメーションさせる
サンプルをダウンロード(openCL_demo) ※Mac OSXのみ
DIY → DIWO
Do It Yourself から
Do It With Others! (みんなと一緒に!)
openFrameworksを使ってみる
ダウンロードとインストール
URL http://www.openframeworks.cc/download
「FATバージョン」をダウンロードする
- OSX – x-code FAT
- Windows – visual studio 2008 FAT or code blocks FAT
※「FAT」バージョンとは、様々な拡張機能(addons)とそのサンプルが含まれた状態で配布されているパッケージ
サンプルを実行してみる
サンプルファイルの場所 → [oFをインストールしたフォルダ]/apps/examples/
- プロジェクトのフォルダをオープンする
- XCodeのメニューバーにある「ビルドして実行」を押す
「ビルドと実行」ボタン
新規プロジェクトの作成
新規にプロジェクトを作成する手順
- 自分のプロジェクトのためのフォルダを”apps”フォルダ内に用意する
- 例：[oFのフォルダ]/apps/myApps/
- “examples/EemptyExample” フォルダをコピーする
- 作成した自分のプロジェクトのためのフォルダにペースト
- 例：[oF folder]/apps/myApps/emptyExample/
- フォルダの名前を変更 (例：TestApp)
- プロジェクトファイルの名前も変更 (例：TestApp.xcodeproj)
- プロジェクトファイルを開く
- 「グループとファイル」→「ターゲット」内の実行ファイルの名前も変更
- 例：TestApp
openFrameworksの構造
(さしあたって) 編集するファイルは2つだけ
testApp.h
プログラム(正確にはクラス)についての情報を記述する
- 全体で使用する関数 (動作)
- 全体で使用する変数 (値)
- 定数やマクロの定義
testApp.cpp
実際の処理を記述する、実装ファイル
- ヘッダーファイルで定義された情報に従って、実際の処理の内容を記述していく
基本は、setup, update, draw の3つ
setup、update、draw の3つの構造は、testApp.cpp 内に最初から用意されている
XCodeでの、”testApp.h”と”testApp.cpp”の場所
openFrameworksの座標
- 左上に原点 (0, 0)
- X座標：左から右に値が増えていく
- Y座標：上から下に値が増えていく
基本図形を描く
線：Line – ofLine(…)
- ofLine(float x1, float y1, float x2, float y2)
長方形：Rectangle – ofRect(…)
- ofRect(float x1, float y1, float w, float h)
円：Circle – ofCircle(…)
- ofCircle(float x, float y, float radius)
楕円：Ellipse – ofEllipse(…)
- ofEllipse(float x, float y, float w, float h)
色について
色の三原色 (光の混色)
Red, Green, Blue, Alpha (透明度)
色に関する設定
背景の色
- ofBackground(int r, int g, int b)
背景を自動的に更新するかどうかの設定
- ofSetBackgroundAuto(bool bAuto)
図形を描画する色
- ofSetColor(int r, int g, int b, int a)
指定した色で塗り潰す
- ofFill()
色を塗り潰さずに、枠線だけ描く
- ofNoFill()
演習：基本的な図形描いてみる
参考 – 01_basicShapes
- 座標系に慣れる
- 色を塗りわけるには?
- 透明度を設定して、色を重ねる
アニメーション
アニメーション作成の基本
setup()
- 画面の初期設定をする
- 開始時の物体の位置、大きさ、色、回転角度などを設定する
update()
- アニメーションで変化するパラメータを更新する
- 位置、大きさ、色、回転 など
draw()
- 更新したパラメータを用いて、図形を描く
座標系の移動、回転によるアニメーション
回転：rotate
- ofRotateX(角度) – X軸を中心に回転
- ofRotateY(角度) – Y軸を中心に回転
- ofRotateZ(角度) – Z軸を中心に回転
座標の移動：translate
- ofTransrate(x, y, z)
座標情報の一時保存
- ofPushMatrix();
座標情報の復帰
- ofPopMatrix();
参考：02_Rotation – 四角形の中心を軸にして回転
参考：03_Rotation3d – X,Y,Z軸それぞれを回転→3Dに
インタラクション
- マウスやキーボードの状態を検知して実行される関数が定義されている
- update 〜 draw のループに割り込んで処理をする
| 定義 | インタラクションの種類 |
|---|---|
| keyPressed | キーボードを押した瞬間に実行される |
| keyReleased | キーボードを離した瞬間に実行される |
| mouseMoved | マウスを移動した際に実行される |
| mouseDragged | マウスをドラッグした際に実行される |
| mousePressed | マウスボタンを押した瞬間に実行される |
| mouseReleased | マウスボタンを離した瞬間に実行される |
インタラクションの追加のイメージ
演習：インタラクションの実装
- 先程の回転のアニメーションに、インタラクションを追加する
- マウスの位置に応じて、回転スピードが変化するアニメーション
- マウスのクリックで、回転の ON / OFF が切り替えるには?
- キーボードでなにかしらの入力があると、画面をフルスクリーンに
繰り返し
プログラムの利点
- 単純な処理を、何度でも飽きもせず、高速に実行してくれる
- 単純な処理の反復により、複雑な処理を行う
- 高速な計算機で始めて可能となる表現とは?
for文の書きかた
[sourcecode language=”cpp”]
for (初期化式; 継続条件式; 再初期化式) {
文;
}
[/sourcecode]
- 初期化式：初期化の際の条件式
- 継続条件式：繰り返しを継続する条件式
- 再初期化式：繰り返されるたびに実行される式
繰り返しによる表現
参考：04_RepeatMotion：移動の繰り返し → 複雑な形態が生成される
座標の計算によるアニメーション
座標系全体を回転/移動するのではなく、図形の座標を指定してアニメーションしてみる
ofPoint クラスを使用してみる
- x, y, z 座標すべてを一つの変数で管理できて便利
例：
- ofPint hoo;
- hoo.x, hoo.y, hoo.z をまとめて記録できる
三角関数を利用した動き
三角関数を利用して、動きを生成してみる
- X座標にSin、Y座標にCosを使用すると、どんな動きになるだろうか?
- 円運動になる
- Sin → sin(経過時間) * 半径
- Cos → cos(経過時間) * 半径
参考：05_CircularMotion
円運動を反復する
- 視覚的なハーモニーが生成される
参考：06_CircularMotions
三角関数による円運動1
- X軸、Y軸の周波数を別々に変化させる
参考：07_WaveMotions
三角関数による円運動2
- 三角関数を組み合せて、さらに複雑な動き、形態を生成
参考：08_HarmonicMotion
Example: Particle system 1
参考：09_Particle_01：複数の物体を移動する
Example: Particle system 2
参考：10_Particle_02：複数の物体の移動、その2
