Mais conteúdo relacionado
Semelhante a openFrameworks Workshop in Kanazawa v001 (20)
Mais de Teruaki Tsubokura (13)
openFrameworks Workshop in Kanazawa v001
- 8. Kinect
画像解析
Webカメラ
グラフィックス
3DCG
YOU ネットワーク
LED
サウンド TwiKer モーター
Wiiリモコン ムービー
- 9. Kinect
画像解析
Webカメラ
グラフィックス
3DCG
YOU ネットワーク
LED
サウンド TwiKer モーター
Wiiリモコン ムービー
- 14. YOU
openFrameworks
LED モーター
3DCG Webカメラ
画像解析 グラフィックス
サウンド TwiKer ネットワーク
Wiiリモコン ムービー
- 15. YOU
様々な機能を繋ぎあわせてくれる
「糊」のようなもの
openFrameworks
LED モーター
3DCG Webカメラ
画像解析 グラフィックス
サウンド TwiKer ネットワーク
Wiiリモコン ムービー
- 16. YOU
様々な機能を繋ぎあわせてくれる
「糊」のようなもの
openFrameworks
しかもクロスプラットフォームで様々な環境で動作可能!
LED モーター
Mac OSX / Linux / Windows / iOS / Android
3DCG Webカメラ
画像解析 グラフィックス
サウンド TwiKer ネットワーク
Wiiリモコン ムービー
- 18. • 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
– 舞台表現として使う
- 19. • EELS
– https://vimeo.com/29694207
– スマフォから参加できるプロジェクションマッピングゲーム
• EDEN
– https://vimeo.com/31940579
– 実世界大陸シミュレーション
• 最近話題になったPerfume Global
– 公式サイト
• http://www.perfume-global.com/
– openFrameworksサンプル
• https://vimeo.com/39433322
- 38. 2.開発環境の構築
• [Mac] Xcode のインストール
– Lionの人 → App Storeから Xcode 4.3.2 for Lion
– SnowLeopardの人 → Apple Developerから
Xcode 3.2.x
• [Windows] Visual C++ 2010 Expressのインストール
- 46. • apps > examples > graphicsExample >
graphicsExample.xcodeproj を開く
ルートフォルダ ワークスペース プロジェクト群 プロジェクト ソースコード
- 61. • testApp.cpp
– setup()
• はじめに一度だけ
実行される
• 主に初期化を行う
– update()
• 毎フレーム実行さ
れる
• アニメーション等
の更新処理はここ
に書く。
– draw()
• 毎フレーム実行さ
れる。
• 画面表示に関わる
処理を書く。
- 63. ofRect( X , Y , W , H );
( 0 , 0 ) ( 1024 , 0 )
X
Y
W
H
( 0 , 768 ) ( 1024 , 768 )
- 64. 基本図形を表示してみる
ofRect( X , Y , W , H );
→四角形
ofTriangle( X1 , Y1 , X2 , Y2 , X3 , Y3 );
→三角形
ofCircle( X , Y , R );
→円
ofLine( X1 , Y1 , X2 , Y2);
→線
ofDrawBitmapString(“文字列” , X , Y );
→文字列
- 66. 描画色を変える
• ofSetColor( R , G , B );
– 色を赤・緑・青の順で
0~255の範囲で指定。
• ofSetHexColor();
– 16進数で指定したい人
はこちら。
- 70. アニメーションさせる
• アニメーションの基礎知識
+500
( 0 , 0 ) ( 500 , 0 )
1フレームで移動
+250 +250
( 0 , 0 ) ( 250 , 0 ) ( 500 , 0 )
2フレームで移動
+100 +100 +100 +100 +100
( 0 , 0 ) ( 100 , 0 ) ( 200 , 0 ) ( 300 , 0 ) ( 400 , 0 ) ( 500 , 0 )
5フレームで移動
- 77. 加速・減速させる
• 加速・減速の基礎知識
+1 +1 +1 +1 +1 +1 +1
( 0 , 0 ) ( 1 , 0 ) ( 2 , 0 ) ( 3 , 0 ) ( 4 , 0 ) ( 5 , 0 ) ( 6 , 0 ) ( 7 , 0 )
移動量は一定
+1 +2 +3 +4 +5
( 0 , 0 ) ( 1 , 0 ) ( 3 , 0 ) ( 6 , 0 ) ( 10 , 0 ) ( 15 , 0 )
毎フレーム移動量を増加させる
- 78. 落下運動
• testApp.cpp
– 変数型がfloatになったよ(小数点も使える)
– XY軸それぞれの加速度の変数を追加
– 毎フレームX座標にaccelXを加算
– 毎フレームY座標にaccelYを加算
– 毎フレームaccelYを0.1増やす
- 80. バウンドさせよう
• ボールが画面外に出てしまうので、バウンドさせよう
– もし、ボールのY座標が画面下の枠より下なら、加速度を反転
[ if ]
[ posY ]
[ ofGetHeight ]
[ accelY = -‐‑accelY; ]
■条件式 [ if ]
if ( posY > ofGetHeight() ) { accelY = -‐‑accelY; }
- 92. 5.アドオンって何?
• アドオンとは
– openFrameworksの機能を拡張するライブラリ
– 機能に対しての知識が無くても簡単に扱える
– 色んな人が色んなアドオンを作って公開してくれてる
• hKp://ofxaddons.com
– 自分で作ることも出来る
- 93. 5.アドオンって何?
• 主なアドオン
– ofxOpenCV
コンピュータビジョン(画像解析)
– ofxBox2d
2D物理演算
– ofxOsc
別PC等との通信プロトコル
– ofxControlPanel
コントロールパネル
– ofxXmlSeKings
設定を.xml形式で保存
– ofxKinect
Kinectを使う
– ofxiPhone
iPhoneでopenFrameworksを動作させる
- 95. 6.ハッカソン!( 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/