Download as PDF, PPTX
![２．開発環境の構築
• [Mac] Xcode のインストール
– Lionの人 → App Storeから Xcode 4.3.2 for Lion
– SnowLeopardの人 → Apple Developerから
Xcode 3.2.x
• [Windows] Visual C++ 2010 Expressのインストール](https://image.slidesharecdn.com/openframeworksworkshopv001-120604113121-phpapp02/85/openFrameworks-Workshop-in-Kanazawa-v001-38-320.jpg)
![バウンドさせよう
• ボールが画面外に出てしまうので、バウンドさせよう
– もし、ボールのY座標が画面下の枠より下なら、加速度を反転
[ if ]
[ posY ]
[ ofGetHeight ]
[ accelY = -‐‑accelY; ]
■条件式 [ if ]
if ( posY > ofGetHeight() ) { accelY = -‐‑accelY; }](https://image.slidesharecdn.com/openframeworksworkshopv001-120604113121-phpapp02/85/openFrameworks-Workshop-in-Kanazawa-v001-80-320.jpg)
Uploaded byTeruaki Tsubokura
openFrameworks Workshop in Kanazawa v001
2012年6月2日に金沢で行われたopenFrameworksワークショップで使用したスライドです。
More Related Content
Similar to openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001
- 1. openFrameworks Workshop inKanazawa v001 2012/06/02(SAT)
- 2.
- 3.
- 4. １．openFrameworksって何？ ■公式サイトより openFrameworksは、シンプルで先端的なフレームワークによっ て創作活動を支援するためのオープンソースのC++ツールキット です。 • グラフィクス：OpenGL, GLEW, GLUT, libtess2, cairo • オーディオの入出力と分析：rtAudio, PortAudio or FMOD, Kiss FFT • フォント：FreeType • イメージの読込と保存：FreeImage • 動画の再生と取込：Quicktime, videoInput • 様々なユーティリティー：Poco
- 5.
- 6.
- 7.
- 8. Kinect 画像解析 Webカメラ グラフィックス ３DCG YOU ネットワーク LED サウンド TwiKer モーター Wiiリモコン ムービー
- 9. Kinect 画像解析 Webカメラ グラフィックス ３DCG YOU ネットワーク LED サウンド TwiKer モーター Wiiリモコン ムービー
- 10.
- 11.
- 12.
- 13.
- 14. YOU openFrameworks LED モーター ３DCG Webカメラ 画像解析 グラフィックス サウンド TwiKer ネットワーク Wiiリモコン ムービー
- 15. YOU 様々な機能を繋ぎあわせてくれる 「糊」のようなもの openFrameworks LED モーター ３DCG Webカメラ 画像解析 グラフィックス サウンド TwiKer ネットワーク Wiiリモコン ムービー
- 16. YOU 様々な機能を繋ぎあわせてくれる 「糊」のようなもの openFrameworks しかもクロスプラットフォームで様々な環境で動作可能！ LED モーター Mac OSX / Linux / Windows / iOS / Android ３DCG Webカメラ 画像解析 グラフィックス サウンド TwiKer ネットワーク Wiiリモコン ムービー
- 17. • まずはどんなものがopenFrameworksで作られているか 見てみましょう！ – 公式動画 • hKp://www.openframeworks.jp/
- 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
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. Projection Mapping + Kinect PC 2台 プロジェクター2台 Kinectセンサー 2台 ・人の位置を取得してその周りの石畳 を光らせる。 石畳燈籠 U-moa Presents
- 26.
- 27.
- 29.
- 30. ハンガー プロジェクタ
- 31.
- 32. 「AffinBeatBox」 サウンドビジュアライザ オブジェクト PC 1台 プロジェクター 1台 • ASOBITARINIGHT • dotFes2011京都 で展示しました。
- 33.
- 34. openFrameworks 超凄い
- 35.
- 36. 今日は入門編ということで、 「あ、私でも作れるんだ」 という感覚を掴んで頂きたいです
- 37.
- 38. ２．開発環境の構築 • [Mac] Xcode のインストール – Lionの人 → App Storeから Xcode 4.3.2 for Lion – SnowLeopardの人 → Apple Developerから Xcode 3.2.x • [Windows] Visual C++ 2010 Expressのインストール
- 39. ２．開発環境の構築 • openFrameworks_v007 – hKp://openframeworks.jp/download/ それぞれの環境に対応したものをダウンロード＆解凍して下さい。
- 40.
- 41.
- 42.
- 43. ３．openFrameworksの中身の解説 • ファイル構成の解説 ルートフォルダ ワークスペース プロジェクト群 プロジェクト ソースコード
- 44. ３．openFrameworksの中身の解説 • ファイル構成の解説 触るのはこの3つだけ！
- 45.
- 46. • apps > examples > graphicsExample > graphicsExample.xcodeproj を開く ルートフォルダ ワークスペース プロジェクト群 プロジェクト ソースコード
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. ４．作ってみよう • こんにちは世界 • 基本図形を描画してみる • アニメーションさせる • インタラクションを取り入れる • 「数」に強いよoF • 画像を使う • カメラ映像を使ってみる
- 54. こんにちは世界 • いわゆる「HelloWorld」 – openFrameworksを使って初めてのプログラムを作成してみよう。
- 55. こんにちは世界 • ワークスペース「myApps」を作成 ルートフォルダ ワークスペース プロジェクト群 プロジェクト
- 56. こんにちは世界 • プロジェクトの作成 – emptyExampleをmyAppsにコピーする
- 57. こんにちは世界 • プロジェクトの作成 – emptyExampleをmyAppsにコピーする – emptyExample.xcodeprojを開く
- 58. こんにちは世界 • ソースコードの中を覗いてみる – main.cpp ウィンドウを作ってサイズ指定してるだけ
- 59. こんにちは世界 • ソースコードの中を覗いてみる – testApp.h 関数・変数の定義部分
- 60.
- 61. • testApp.cpp – setup() • はじめに一度だけ 実行される • 主に初期化を行う – update() • 毎フレーム実行さ れる • アニメーション等 の更新処理はここ に書く。 – draw() • 毎フレーム実行さ れる。 • 画面表示に関わる 処理を書く。
- 62. 基本図形を表示してみる • testApp.cpp ofRect( X座標 , Y座標 , 横幅W , 縦幅H ); → ( X座標 , Y座標 )の位置に横幅W・縦幅Hの四角形を描画 する。 入力したらRun(実行)
- 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進数で指定したい人 はこちら。
- 68. 背景色を変える • ofBackground( R , G , B ); – R(red) G(green) B(blue)を0~255の間で指定
- 70. アニメーションさせる • アニメーションの基礎知識 +500 ( 0 , 0 ) ( 500 , 0 ) １フレームで移動 +250 +250 ( 0 , 0 ) ( 250 , 0 ) ( 500 , 0 ) ２フレームで移動 +100 +100 +100 +100 +100 ( 0 , 0 ) ( 100 , 0 ) ( 200 , 0 ) ( 300 , 0 ) ( 400 , 0 ) ( 500 , 0 ) ５フレームで移動
- 71. アニメーションさせる • アニメーションの基礎知識 – 毎フレーム座標を変化させる – 移動量が少ないほどゆっくりアニメーション – 移動量が多いほど早くアニメーション
- 72. アニメーションさせる • testApp.cpp – 座標を保存する変数を定義 – 初期設定で背景を黒に – 毎フレームX座標に+1していく – 色を緑に設定 – 10pxの円を描く
- 73.
- 74. 次は… • Y座標 ( 縦方向 )も移動させてみよう！
- 76. フレームレート設定 • ofSetFrameRate( 60 ); – フレームレートを 60 FPSに設定（1秒間に60回画面を更新する） フレームレートを設定していないと、速度が一定にならないので 設定しておく。
- 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; }
- 81.
- 82. 左右もバウンド • このままでは左右にもボールがはみ出るのでバウンド – 下のバウンド – 右のバウンド – 左のバウンド
- 84. インタラクションを取り入れる • マウスによるインタラクションを作ってみよう – クリックでマウスカーソルに置に吸い寄せる
- 85.
- 86. マウスクリックで吸い寄せる • bool 型：真(true)・偽(false)を保持する入れ物
- 87. マウスクリックで吸い寄せる • mousePressed() – マウスがプレスされた時に実行される • mouseReleased() – マウスがリリースされた時に実行される
- 88. マウスクリックで吸い寄せる • もし、マウスが押下状態なら 加速度をマウスとの距離 × 0.05 にする。
- 90. 「数」に強いよoF • openFrameworks は C++ ベースなので、動作が高速！ • ボールの数を増やしてみよう
- 92. ５．アドオンって何？ • アドオンとは – openFrameworksの機能を拡張するライブラリ – 機能に対しての知識が無くても簡単に扱える – 色んな人が色んなアドオンを作って公開してくれてる • hKp://ofxaddons.com – 自分で作ることも出来る
- 93. ５．アドオンって何？ • 主なアドオン – ofxOpenCV コンピュータビジョン（画像解析） – ofxBox2d 2D物理演算 – ofxOsc 別PC等との通信プロトコル – ofxControlPanel コントロールパネル – ofxXmlSeKings 設定を.xml形式で保存 – ofxKinect Kinectを使う – ofxiPhone iPhoneでopenFrameworksを動作させる
- 94. ６．ハッカソン！( 60分間くらい ) 自由に作ってみよう！
- 95. ６．ハッカソン！( 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/
- 96.
- 98. まとめ • openFrameworks入門おめでとうございます。 • C++の強力な処理速度やアドオン群を使って、自分のオ リジナル作品を作り上げて下さい。 • 次回のワークショップv002は…未定ですが、決まったら FB上でアナウンスします。 • 「これの作り方教えて！」「こんなアドオンある？」等、 質問はこの後受け付けます。気軽にどうぞ。
- 99.