openFrameworks Workshop in Kanazawa v001

openFrameworks�

Workshop�in Kanazawa　v001�

2012/06/02(SAT) �

本日の流れ�

１．openFrameworksって何？ �

２．開発環境の構築�

３．openFrameworksの中身の解説�

４．作ってみよう�

５．アドオンって何？�

６．ハッカソン！�

７．成果発表会�

１．openFrameworksって何？ �

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

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

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

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

１．openFrameworksって何？ �

つまりこういう事。�

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

YOU�

画像解析�

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

ムービー�

３DCG �

TwiKer �

Wiiリモコン�

Kinect �

サウンド� モーター�

LED �ネットワーク�YOU�

画像解析�

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

ムービー�

３DCG �

TwiKer �

Wiiリモコン�

Kinect �

サウンド� モーター�

LED �ネットワーク�YOU�

覚えること多すぎ…�

openFrameworks  を使うと、�

YOU�

openFrameworks�

YOU�

openFrameworks�

YOU�

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

Webカメラ�

ムービー�

３DCG �

TwiKer �Wiiリモコン�

サウンド�

モーター�LED �

ネットワーク�

openFrameworks�

YOU�

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

Webカメラ�

ムービー�

３DCG �

TwiKer �Wiiリモコン�

サウンド�

モーター�LED �

ネットワーク�

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

「糊」のようなもの�

openFrameworks�

YOU�

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

Webカメラ�

ムービー�

３DCG �

TwiKer �Wiiリモコン�

サウンド�

モーター�LED �

ネットワーク�

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

「糊」のようなもの�

しかもクロスプラットフォームで様々な環境で動作可能！ 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 �

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

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

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

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

設置場所

スチールラック

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の中身の解説 �

３．openFrameworksの中身の解説 �

•  ファイル構成の解説

３．openFrameworksの中身の解説 �

•  ファイル構成の解説

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

３．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�

５フレームで移動�

１フレームで移動�

アニメーションさせる �

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

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

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

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

アニメーションさせる �

•  testApp.cpp �

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

–  初期設定で背景を黒に

–  毎フレーム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�

落下運動 �

•  testApp.cpp �

–  変数型が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�

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