yoppa.org


immediate bitwave

メディア芸術演習 VI - メディア・アート II

openFrameworks入門

ma2_100913

サンプルファイルのダウンロード

授業で解説したプログラムは下記からダウンロードしてください。

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文の書きかた

for (初期化式; 継続条件式; 再初期化式) {
    文;
}
  • 初期化式:初期化の際の条件式
  • 継続条件式:繰り返しを継続する条件式
  • 再初期化式:繰り返されるたびに実行される式

繰り返しによる表現

参考: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