2012年6月2日に金沢で行われたopenFrameworksワークショップで使用したスライドです。

1. openFrameworks
Workshop
in Kanazawa v001
2012/06/02(SAT)

2. 本日の流れ
１．openFrameworksって何？
２．開発環境の構築
３．openFrameworksの中身の解説
４．作ってみよう
５．アドオンって何？
６．ハッカソン！
７．成果発表会

3. １．openFrameworksって何？

4. １．openFrameworksって何？
■公式サイトより
openFrameworksは、シンプルで先端的なフレームワークによっ
て創作活動を支援するためのオープンソースのC++ツールキット
です。
• グラフィクス：OpenGL, GLEW, GLUT, libtess2, cairo
• オーディオの入出力と分析：rtAudio, PortAudio or FMOD,
Kiss FFT
• フォント：FreeType
• イメージの読込と保存：FreeImage
• 動画の再生と取込：Quicktime, videoInput
• 様々なユーティリティー：Poco

5. つまりこういう事。

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

7. YOU

8. Kinect
画像解析
Webカメラ
グラフィックス
３DCG
YOU ネットワーク
LED
サウンド TwiKer モーター
Wiiリモコン ムービー

9. Kinect
画像解析
Webカメラ
グラフィックス
３DCG
YOU ネットワーク
LED
サウンド TwiKer モーター
Wiiリモコン ムービー

10. 覚えること多すぎ…

11. openFrameworks を使うと、

12. YOU

13. YOU
openFrameworks

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. 石畳燈籠
U-moa Presents

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

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

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

27. 設置場所

29. プロジェクタ
スチールラック
PC

30. ハンガー
プロジェクタ

31. Kinect

32. 「AffinBeatBox」
サウンドビジュアライザ
オブジェクト
PC 1台
プロジェクター 1台
• ASOBITARINIGHT
• dotFes2011京都
で展示しました。

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

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. ３．openFrameworksの中身の解説

42. ３．openFrameworksの中身の解説
• ファイル構成の解説

43. ３．openFrameworksの中身の解説
• ファイル構成の解説
ルートフォルダ ワークスペース プロジェクト群 プロジェクト ソースコード

44. ３．openFrameworksの中身の解説
• ファイル構成の解説
触るのはこの3つだけ！

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

46. • apps > examples > graphicsExample >
graphicsExample.xcodeproj を開く
ルートフォルダ ワークスペース プロジェクト群 プロジェクト ソースコード

47. • ターゲットがgraphicsExampleになっているのを確認
• Run を押す

48. 動いた？

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

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. • testApp.cpp
重要なのはココだけ！

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. openFrameworks
Workshop
in Kanazawa v001
ご参加ありがとうございました！