openFrameworks Workshop in Kanazawa v001

openFrameworks�

Workshop�in Kanazawa　v001�

2012/06/02(SAT) �

本日の流れ�

１．openFrameworksって何？ �

２．開発環境の構築�

３．openFrameworksの中身の解説�

４．作ってみよう�

５．アドオンって何？�

６．ハッカソン！�

７．成果発表会�

■公式サイトより openFrameworksは、シンプルで先端的なフレームワークによっ

て創作活動を支援するためのオープンソースのC++ツールキット

です。 •  グラフィクス：OpenGL, GLEW, GLUT, libtess2, cairo •  オーディオの入出力と分析：rtAudio, PortAudio or FMOD,

Kiss FFT •  フォント：FreeType •  イメージの読込と保存：FreeImage •  動画の再生と取込：Quicktime, videoInput •  様々なユーティリティー：Poco �


つまりこういう事。�

様々なメディアを駆使したメディアアートを作りたい！�

YOU�

画像解析�

グラフィックス�Webカメラ�

ムービー�

３DCG �

TwiKer �

Wiiリモコン�

Kinect �

サウンド� モーター�

LED �ネットワーク�YOU�

覚えること多すぎ…�

openFrameworks を使うと、�

YOU�

openFrameworks�

YOU�

openFrameworks�

YOU�

画像解析� グラフィックス�

Webカメラ�

ムービー�

３DCG �

TwiKer �Wiiリモコン�

サウンド�

モーター�LED �

ネットワーク�

openFrameworks�

YOU�


Webカメラ�

ムービー�

３DCG �


サウンド�



様々な機能を繋ぎあわせてくれる

「糊」のようなもの�

openFrameworks�

YOU�


Webカメラ�

ムービー�

３DCG �


サウンド�



様々な機能を繋ぎあわせてくれる

「糊」のようなもの�

しかもクロスプラットフォームで様々な環境で動作可能！ Mac OSX / Linux / Windows / iOS / Android

•  まずはどんなものがopenFrameworksで作られているか見てみましょう！

–  公式動画 •  hKp://www.openframeworks.jp/

•  Snake the Planet!�–  http://www.youtube.com/watch?v=fbHZ57lfYeo �

–  実世界でスネークゲーム�

•  Starry Night�–  http://www.youtube.com/watch?v=R856Uo1SAnE �

–  インタラクティブゴッホ�

•  Night Lights �–  http://www.youtube.com/watch?v=2-1_ibDB3Y4 �

–  参加型プロジェクションマッピング�

•  resolution of memory�–  http://www.youtube.com/watch?v=g2G6O8VJ4uc �

–  舞台表現として使う�

•  EELS �–  https://vimeo.com/29694207�

–  スマフォから参加できるプロジェクションマッピングゲーム�

•  EDEN�–  https://vimeo.com/31940579�

–  実世界大陸シミュレーション�

•  最近話題になったPerfume Global �

–  公式サイト�

•  http://www.perfume-global.com/�

–  openFrameworksサンプル�

•  https://vimeo.com/39433322�

凄すぎ�

ここからは凄くないやつ�

の制作物�

石畳燈籠 U - m o a P r e s e n t s

【動画】hKp://www.youtube.com/watch?v=uOKt8ioa614 �


Projection Mapping 　 + Kinect PC 2台プロジェクター 2台 Kinectセンサー 2台・人の位置を取得してその周りの石畳を光らせる。


・実際の石畳を利用することで石畳本来の良さを引き出す。・デジタルだから出来る表現で魔法の様な空間を作り出す。

設置場所

スチールラック

PC

プロジェクタ

ハンガープロジェクタ

Kinect

「AffinBeatBox」�

サウンドビジュアライザ�

オブジェクト�

�

PC 1台�

プロジェクター 1台�

�

�

•  ASOBITARINIGHT�

•  dotFes2011京都�

で展示しました。�

「AffinBeatVJ」�

VJ用プロジェクションマッピングソフト金沢Manierでのイベント「Lowpich」にてVJ支援ツールとして使用現在、一般販売に向けて準備中

openFrameworks

超凄い�

心の声（こんなの作れるわけねぇよ…）�

今日は入門編ということで、「あ、私でも作れるんだ」

という感覚を掴んで頂きたいです�

２．開発環境の構築 �


•  [Mac] Xcode のインストール –  Lionの人 → App Storeから Xcode 4.3.2 for Lion

–  SnowLeopardの人 → Apple Developerから Xcode 3.2.x

•  [Windows] Visual C++ 2010 Expressのインストール�


•  openFrameworks_v007 –  hKp://openframeworks.jp/download/ それぞれの環境に対応したものをダウンロード＆解凍して下さい。�


•  解凍してできたファイルは好きな場所に設置�

３．openFrameworksの中身の解説 �


•  ファイル構成の解説



ルートフォルダ� ワークスペース� プロジェクト群� プロジェクト� ソースコード�



触るのはこの3つだけ！

まずはサンプルを実行してみよう�

•  apps > examples > graphicsExample >

graphicsExample.xcodeproj を開く

ルートフォルダ� ワークスペース� プロジェクト群� プロジェクト� ソースコード�

•  ターゲットがgraphicsExampleになっているのを確認

•  Run を押す

動いた？

Windowsの方はこちら(Visual C++)

動いた？

これで動作環境が整いました

４．作ってみよう �

４．作ってみよう �

•  こんにちは世界

•  基本図形を描画してみる

•  アニメーションさせる

•  インタラクションを取り入れる

•  「数」に強いよoF

•  画像を使う

•  カメラ映像を使ってみる

•  いわゆる「HelloWorld」 –  openFrameworksを使って初めてのプログラムを作成してみよう。

こんにちは世界

•  ワークスペース「myApps」を作成

ルートフォルダ� ワークスペース� プロジェクト群� プロジェクト�

こんにちは世界�


•  プロジェクトの作成 –  emptyExampleをmyAppsにコピーする


•  プロジェクトの作成 –  emptyExampleをmyAppsにコピーする –  emptyExample.xcodeprojを開く


•  ソースコードの中を覗いてみる –  main.cpp

ウィンドウを作ってサイズ指定してるだけ


•  ソースコードの中を覗いてみる –  testApp.h

関数・変数の定義部分

•  testApp.cpp

重要なのはココだけ！

•  testApp.cpp

–  setup() •  はじめに一度だけ実行される

•  主に初期化を行う

–  update() •  毎フレーム実行される

•  アニメーション等の更新処理はここに書く。

–  draw() •  毎フレーム実行される。

•  画面表示に関わる処理を書く。

基本図形を表示してみる�

•  testApp.cpp �

ofRect( X座標 , Y座標 , 横幅W , 縦幅H );

→ ( X座標 , Y座標 )の位置に横幅W・縦幅Hの四角形を描画

する。

入力したらRun(実行)

X�Y�

W�

H �

ofRect( X , Y , W , H ); �( 0 , 0 ) �

( 0 , 768 ) �

( 1024 , 0 ) �

( 1024 , 768 ) �

基本図形を表示してみる�

ofRect( X , Y , W , H ); ofTriangle( X1 , Y1 , X2 , Y2 , X3 , Y3 ); ofCircle( X , Y , R ); ofLine( X1 , Y1 , X2 , Y2); ofDrawBitmapString(“文字列” , X , Y );

→四角形 →三角形 →円 →線 →文字列

描画色を変える�

•  ofSetColor( R , G , B ); –  色を赤・緑・青の順で

0~255の範囲で指定。

•  ofSetHexColor(); –  16進数で指定したい人

はこちら。

背景色を変える�

•  ofBackground( R , G , B ); –  R(red) G(green) B(blue)を0~255の間で指定

アニメーションさせる �

•  アニメーションの基礎知識�

( 0 , 0 ) � ( 500 , 0 ) �

( 0 , 0 ) � ( 500 , 0 ) �( 250 , 0 ) �

+250� +250�

２フレームで移動�

+500�

( 0 , 0 ) � ( 500 , 0 ) �( 200 , 0 ) �( 100 , 0 ) � ( 300 , 0 ) � ( 400 , 0 ) �

+100� +100� +100� +100� +100�

５フレームで移動�

１フレームで移動�


•  アニメーションの基礎知識

–  毎フレーム座標を変化させる

–  移動量が少ないほどゆっくりアニメーション

–  移動量が多いほど早くアニメーション�



–  座標を保存する変数を定義

–  初期設定で背景を黒に

–  毎フレームX座標に+1していく

–  色を緑に設定

–  10pxの円を描く

動いた！

次は…�

•  Y座標 ( 縦方向 )も移動させてみよう！�

フレームレート設定�

•  ofSetFrameRate( 60 ); –  フレームレートを 60 FPSに設定（1秒間に60回画面を更新する）

フレームレートを設定していないと、速度が一定にならないので設定しておく。

加速・減速させる �

•  加速・減速の基礎知識�

( 0 , 0 ) � ( 5 , 0 ) �( 2 , 0 ) �( 1 , 0 ) � ( 3 , 0 ) � ( 4 , 0 ) �

+1� +1� +1� +1� +1�

移動量は一定�

( 6 , 0 ) �

+1�

( 7 , 0 ) �

+1�

( 0 , 0 ) � ( 3 , 0 ) � ( 6 , 0 ) � ( 10 , 0 ) �

+2� +3� +4�

毎フレーム移動量を増加させる�

( 1 , 0 ) �

+1�

( 15 , 0 ) �

+5�

落下運動 �


–  変数型がfloatになったよ(小数点も使える)

–  XY軸それぞれの加速度の変数を追加

–  毎フレームX座標にaccelXを加算

–  毎フレームY座標にaccelYを加算

–  毎フレームaccelYを0.1増やす

バウンドさせよう�

•  ボールが画面外に出てしまうので、バウンドさせよう

–  もし、ボールのY座標が画面下の枠より下なら、加速度を反転 [ if ] [ posY ] [ ofGetHeight ] [ accelY = -‐‑accelY; ]

■条件式 [ if ] �if ( posY > ofGetHeight() ) { accelY = -‐‑accelY; }

バウンドした？

左右もバウンド�

•  このままでは左右にもボールがはみ出るのでバウンド�

–  下のバウンド

–  右のバウンド�

–  左のバウンド

インタラクションを取り入れる�

•  マウスによるインタラクションを作ってみよう –  クリックでマウスカーソルに置に吸い寄せる�

インタラクションを取り入れる�

•  いかにもマウスを使いそうな記述が…�

マウスクリックで吸い寄せる�

•  bool 型：真(true)・偽(false)を保持する入れ物


•  mousePressed()

–  マウスがプレスされた時に実行される

•  mouseReleased()

–  マウスがリリースされた時に実行される


•  もし、マウスが押下状態なら

加速度をマウスとの距離 × 0.05 にする。

「数」に強いよoF �

•  openFrameworks は C++ ベースなので、動作が高速！ •  ボールの数を増やしてみよう�

５．アドオンって何？ �

•  アドオンとは

–  openFrameworksの機能を拡張するライブラリ

–  機能に対しての知識が無くても簡単に扱える

–  色んな人が色んなアドオンを作って公開してくれてる

•  hKp://ofxaddons.com

–  自分で作ることも出来る

５．アドオンって何？ �

•  主なアドオン

–  ofxOpenCV

–  ofxBox2d

–  ofxOsc

–  ofxControlPanel

–  ofxXmlSeKings

–  ofxKinect

–  ofxiPhone

コンピュータビジョン（画像解析）

2D物理演算

別PC等との通信プロトコル

コントロールパネル

設定を.xml形式で保存

Kinectを使う

iPhoneでopenFrameworksを動作させる

６．ハッカソン！( 60分間くらい ) �

自由に作ってみよう！�

•  制作のヒント –  速度によって円の大きさを変えてみる → ofCircle( X, Y, 速度);

–  色をランダムに変えてみる → ofRandom() * 255; –  X,YだけでなくZも使ってみる（3D）→ ofTranslation( X, Y, Z );

–  円を画像に変えてみる → ofImage –  円を動画に変えてみる → ofVideoGrabber

–  マウスをクリックした時の動きを変えてみる → onMousePress()

–  円の透明度を変えてみる → ofSetColor( 0, 255, 0, 10);

–  日本語リファレンスはこちら •  hKp://sites.google.com/site/ofdocjp/

６．ハッカソン！( 60分間くらい ) �

７．成果発表会�

まとめ�

•  openFrameworks入門おめでとうございます。

•  C++の強力な処理速度やアドオン群を使って、自分のオリジナル作品を作り上げて下さい。

•  次回のワークショップv002は…未定ですが、決まったらFB上でアナウンスします。

•  「これの作り方教えて！」「こんなアドオンある？」等、質問はこの後受け付けます。気軽にどうぞ。

openFrameworks�

Workshop�in Kanazawa　v001�

ご参加ありがとうございました！�

openFrameworks Workshop in Kanazawa v001

Self Improvement

Transcript of openFrameworks Workshop in Kanazawa v001