Enviar pesquisa
Carregar
openFrameworks Workshop in Kanazawa v001
•
25 gostaram
•
7,745 visualizações
Teruaki Tsubokura
Seguir
2012年6月2日に金沢で行われたopenFrameworksワークショップで使用したスライドです。
Leia menos
Leia mais
Aperfeiçoamento pessoal
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 99
Baixar agora
Baixar para ler offline
Recomendados
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Atsushi Tadokoro
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
Atsushi Tadokoro
Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Atsushi Tadokoro
Media Art II 2013 第5回:openFrameworks Addonを使用する
Media Art II 2013 第5回:openFrameworks Addonを使用する
Atsushi Tadokoro
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
Atsushi Tadokoro
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Atsushi Tadokoro
coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
Recomendados
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Atsushi Tadokoro
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF
Atsushi Tadokoro
Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Atsushi Tadokoro
Media Art II 2013 第5回:openFrameworks Addonを使用する
Media Art II 2013 第5回:openFrameworks Addonを使用する
Atsushi Tadokoro
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
Atsushi Tadokoro
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Atsushi Tadokoro
coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
Atsushi Tadokoro
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Atsushi Tadokoro
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
Atsushi Tadokoro
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
Takashi Yoshinaga
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
Atsushi Tadokoro
Android OpenGL HandsOn
Android OpenGL HandsOn
Ikuo Tansho
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Atsushi Tadokoro
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
Arctic.js
Arctic.js
chikathreesix
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity Technologies Japan K.K.
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
Yohei Munesada
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
CG2013 07
CG2013 07
shiozawa_h
Canvas de shooting 制作のポイント
Canvas de shooting 制作のポイント
Yohei Munesada
CG2013 12
CG2013 12
shiozawa_h
3次元図形をSchemeで造ろう!
3次元図形をSchemeで造ろう!
vi-iv
Gocon2013
Gocon2013
Moriyoshi Koizumi
ももち浜TECHカフェ:OpenCVとKinectで作ろう壁面タッチパネル
ももち浜TECHカフェ:OpenCVとKinectで作ろう壁面タッチパネル
Takashi Yoshinaga
【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろう
Unity Technologies Japan K.K.
20150725 オープンキャンパス資料
20150725 オープンキャンパス資料
Takeo Kunishima
岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料
Takeo Kunishima
How to use animation packages in R(Japanese)
How to use animation packages in R(Japanese)
sleipnir002
Mais conteúdo relacionado
Mais procurados
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
Atsushi Tadokoro
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Atsushi Tadokoro
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
Atsushi Tadokoro
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
Takashi Yoshinaga
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
Atsushi Tadokoro
Android OpenGL HandsOn
Android OpenGL HandsOn
Ikuo Tansho
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Atsushi Tadokoro
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
Arctic.js
Arctic.js
chikathreesix
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity Technologies Japan K.K.
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
Yohei Munesada
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
CG2013 07
CG2013 07
shiozawa_h
Canvas de shooting 制作のポイント
Canvas de shooting 制作のポイント
Yohei Munesada
CG2013 12
CG2013 12
shiozawa_h
3次元図形をSchemeで造ろう!
3次元図形をSchemeで造ろう!
vi-iv
Gocon2013
Gocon2013
Moriyoshi Koizumi
ももち浜TECHカフェ:OpenCVとKinectで作ろう壁面タッチパネル
ももち浜TECHカフェ:OpenCVとKinectで作ろう壁面タッチパネル
Takashi Yoshinaga
【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろう
Unity Technologies Japan K.K.
Mais procurados
(19)
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
Android OpenGL HandsOn
Android OpenGL HandsOn
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Arctic.js
Arctic.js
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Html canvas shooting_and_performanceup
Html canvas shooting_and_performanceup
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
CG2013 07
CG2013 07
Canvas de shooting 制作のポイント
Canvas de shooting 制作のポイント
CG2013 12
CG2013 12
3次元図形をSchemeで造ろう!
3次元図形をSchemeで造ろう!
Gocon2013
Gocon2013
ももち浜TECHカフェ:OpenCVとKinectで作ろう壁面タッチパネル
ももち浜TECHカフェ:OpenCVとKinectで作ろう壁面タッチパネル
【Unity道場 2月】シェーダを書けるプログラマになろう
【Unity道場 2月】シェーダを書けるプログラマになろう
Semelhante a openFrameworks Workshop in Kanazawa v001
20150725 オープンキャンパス資料
20150725 オープンキャンパス資料
Takeo Kunishima
岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料
Takeo Kunishima
How to use animation packages in R(Japanese)
How to use animation packages in R(Japanese)
sleipnir002
Ssaw08 0916
Ssaw08 0916
Atsushi Tadokoro
Ssaw08 0930
Ssaw08 0930
Atsushi Tadokoro
Processing.jsでおうちハック
Processing.jsでおうちハック
sonycsl
R高速化
R高速化
Monta Yashi
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
Nishida Kansuke
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
Takumi Ohashi
㉑CSSでアニメーション!その2
㉑CSSでアニメーション!その2
Nishida Kansuke
ネコでもわかるインタラクティブサウンド20130706
ネコでもわかるインタラクティブサウンド20130706
Takashi Tanaka
Ruby で高速なプログラムを書く
Ruby で高速なプログラムを書く
mametter
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
Interactive Music II - SuperCollider入門
Interactive Music II - SuperCollider入門
Atsushi Tadokoro
20160723 オープンキャンパス資料
20160723 オープンキャンパス資料
Takeo Kunishima
CG2013 02
CG2013 02
shiozawa_h
2012 ce116 crowbar_snct_shirai
2012 ce116 crowbar_snct_shirai
鈴鹿工業高等専門学校
STC-OC2019_1st201906
STC-OC2019_1st201906
Yoshihiko Yamamoto
OpenCVの拡張ユーティリティ関数群
OpenCVの拡張ユーティリティ関数群
Norishige Fukushima
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
mametter
Semelhante a openFrameworks Workshop in Kanazawa v001
(20)
20150725 オープンキャンパス資料
20150725 オープンキャンパス資料
岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料
How to use animation packages in R(Japanese)
How to use animation packages in R(Japanese)
Ssaw08 0916
Ssaw08 0916
Ssaw08 0930
Ssaw08 0930
Processing.jsでおうちハック
Processing.jsでおうちハック
R高速化
R高速化
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
㉑CSSでアニメーション!その2
㉑CSSでアニメーション!その2
ネコでもわかるインタラクティブサウンド20130706
ネコでもわかるインタラクティブサウンド20130706
Ruby で高速なプログラムを書く
Ruby で高速なプログラムを書く
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Interactive Music II - SuperCollider入門
Interactive Music II - SuperCollider入門
20160723 オープンキャンパス資料
20160723 オープンキャンパス資料
CG2013 02
CG2013 02
2012 ce116 crowbar_snct_shirai
2012 ce116 crowbar_snct_shirai
STC-OC2019_1st201906
STC-OC2019_1st201906
OpenCVの拡張ユーティリティ関数群
OpenCVの拡張ユーティリティ関数群
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Mais de Teruaki Tsubokura
「VRChatのクリエイター文化の話」坪倉輝明
「VRChatのクリエイター文化の話」坪倉輝明
Teruaki Tsubokura
お題「みんなの年金を増やす方法を教えてください」坪倉輝明
お題「みんなの年金を増やす方法を教えてください」坪倉輝明
Teruaki Tsubokura
お題「大阪のおばちゃんのパワーで持続可能な社会づくりを考えてください」坪倉輝明
お題「大阪のおばちゃんのパワーで持続可能な社会づくりを考えてください」坪倉輝明
Teruaki Tsubokura
お題「Amazon、Line、Googleに対抗するため 新しい音声アシストAIがでました。どんなものですか?」坪倉輝明
お題「Amazon、Line、Googleに対抗するため 新しい音声アシストAIがでました。どんなものですか?」坪倉輝明
Teruaki Tsubokura
お題「来年行われるロシアワールドカップで 日本代表を応援するための新しいツールを 提案してください。」坪倉輝明
お題「来年行われるロシアワールドカップで 日本代表を応援するための新しいツールを 提案してください。」坪倉輝明
Teruaki Tsubokura
女性向けホームセキュリティ「自宅警備彼氏」
女性向けホームセキュリティ「自宅警備彼氏」
Teruaki Tsubokura
広告目線から見たHoloLens - 坪倉輝明
広告目線から見たHoloLens - 坪倉輝明
Teruaki Tsubokura
お題「ハチ公前での待ち合わせにとても苦労しています。待ち合わせしやすい画期的なアイデアを教えてください。」坪倉輝明
お題「ハチ公前での待ち合わせにとても苦労しています。待ち合わせしやすい画期的なアイデアを教えてください。」坪倉輝明
Teruaki Tsubokura
お題「日本人らしい歩きスマホの解消方法を教えてください。」坪倉輝明
お題「日本人らしい歩きスマホの解消方法を教えてください。」坪倉輝明
Teruaki Tsubokura
「アーティスト活動」というプログラマの自己防衛術 - 坪倉輝明
「アーティスト活動」というプログラマの自己防衛術 - 坪倉輝明
Teruaki Tsubokura
お題「こんなカメラアプリあったらいいな、を考えて下さい。」坪倉輝明
お題「こんなカメラアプリあったらいいな、を考えて下さい。」坪倉輝明
Teruaki Tsubokura
お題「10年後の大高齢化社会で流行している、老人向けの出会い系サービスとは?」坪倉輝明
お題「10年後の大高齢化社会で流行している、老人向けの出会い系サービスとは?」坪倉輝明
Teruaki Tsubokura
体験を創る - 1→10design,Inc. 坪倉輝明
体験を創る - 1→10design,Inc. 坪倉輝明
Teruaki Tsubokura
Mais de Teruaki Tsubokura
(13)
「VRChatのクリエイター文化の話」坪倉輝明
「VRChatのクリエイター文化の話」坪倉輝明
お題「みんなの年金を増やす方法を教えてください」坪倉輝明
お題「みんなの年金を増やす方法を教えてください」坪倉輝明
お題「大阪のおばちゃんのパワーで持続可能な社会づくりを考えてください」坪倉輝明
お題「大阪のおばちゃんのパワーで持続可能な社会づくりを考えてください」坪倉輝明
お題「Amazon、Line、Googleに対抗するため 新しい音声アシストAIがでました。どんなものですか?」坪倉輝明
お題「Amazon、Line、Googleに対抗するため 新しい音声アシストAIがでました。どんなものですか?」坪倉輝明
お題「来年行われるロシアワールドカップで 日本代表を応援するための新しいツールを 提案してください。」坪倉輝明
お題「来年行われるロシアワールドカップで 日本代表を応援するための新しいツールを 提案してください。」坪倉輝明
女性向けホームセキュリティ「自宅警備彼氏」
女性向けホームセキュリティ「自宅警備彼氏」
広告目線から見たHoloLens - 坪倉輝明
広告目線から見たHoloLens - 坪倉輝明
お題「ハチ公前での待ち合わせにとても苦労しています。待ち合わせしやすい画期的なアイデアを教えてください。」坪倉輝明
お題「ハチ公前での待ち合わせにとても苦労しています。待ち合わせしやすい画期的なアイデアを教えてください。」坪倉輝明
お題「日本人らしい歩きスマホの解消方法を教えてください。」坪倉輝明
お題「日本人らしい歩きスマホの解消方法を教えてください。」坪倉輝明
「アーティスト活動」というプログラマの自己防衛術 - 坪倉輝明
「アーティスト活動」というプログラマの自己防衛術 - 坪倉輝明
お題「こんなカメラアプリあったらいいな、を考えて下さい。」坪倉輝明
お題「こんなカメラアプリあったらいいな、を考えて下さい。」坪倉輝明
お題「10年後の大高齢化社会で流行している、老人向けの出会い系サービスとは?」坪倉輝明
お題「10年後の大高齢化社会で流行している、老人向けの出会い系サービスとは?」坪倉輝明
体験を創る - 1→10design,Inc. 坪倉輝明
体験を創る - 1→10design,Inc. 坪倉輝明
openFrameworks Workshop in Kanazawa v001
1.
openFrameworks Workshop in
Kanazawa v001 2012/06/02(SAT)
2.
本日の流れ 1.openFrameworksって何? 2.開発環境の構築 3.openFrameworksの中身の解説 4.作ってみよう 5.アドオンって何? 6.ハッカソン! 7.成果発表会
3.
1.openFrameworksって何?
4.
1.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カメラ グラフィックス 3DCG YOU ネットワーク LED サウンド TwiKer モーター Wiiリモコン ムービー
9.
Kinect 画像解析
Webカメラ グラフィックス 3DCG YOU ネットワーク LED サウンド TwiKer モーター Wiiリモコン ムービー
10.
覚えること多すぎ…
11.
openFrameworks を使うと、
12.
YOU
13.
YOU openFrameworks
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リモコン ムービー
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.
設置場所
28.
29.
プロジェクタ スチールラック PC
30.
ハンガー
プロジェクタ
31.
Kinect
32.
「AffinBeatBox」 サウンドビジュアライザ オブジェクト PC 1台 プロジェクター 1台 •
ASOBITARINIGHT • dotFes2011京都 で展示しました。
33.
「AffinBeatVJ」 VJ用プロジェクションマッピングソフト 金沢Manierでのイベント「Lowpich」にて VJ支援ツールとして使用 現在、一般販売に向けて準備中
34.
openFrameworks
超凄い
35.
心の声(こんなの作れるわけねぇよ…)
36.
今日は入門編ということで、
「あ、私でも作れるんだ」 という感覚を掴んで頂きたいです
37.
2.開発環境の構築
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のインストール
39.
2.開発環境の構築 • openFrameworks_v007
– hKp://openframeworks.jp/download/ それぞれの環境に対応したものをダウンロード&解凍して下さい。
40.
2.開発環境の構築 • 解凍してできたファイルは好きな場所に設置
41.
3.openFrameworksの中身の解説
42.
3.openFrameworksの中身の解説 • ファイル構成の解説
43.
3.openFrameworksの中身の解説 • ファイル構成の解説 ルートフォルダ
ワークスペース プロジェクト群 プロジェクト ソースコード
44.
3.openFrameworksの中身の解説 • ファイル構成の解説
触るのはこの3つだけ!
45.
まずはサンプルを実行してみよう
46.
• apps >
examples > graphicsExample > graphicsExample.xcodeproj を開く ルートフォルダ ワークスペース プロジェクト群 プロジェクト ソースコード
47.
• ターゲットがgraphicsExampleになっているのを確認 • Run
を押す
48.
動いた?
49.
Windowsの方はこちら(Visual C++)
50.
動いた?
51.
これで動作環境が整いました
52.
4.作ってみよう
53.
4.作ってみよう • こんにちは世界 • 基本図形を描画してみる •
アニメーションさせる • インタラクションを取り入れる • 「数」に強いよ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 ); →文字列
65.
66.
描画色を変える
• ofSetColor( R , G , B ); – 色を赤・緑・青の順で 0~255の範囲で指定。 • ofSetHexColor(); – 16進数で指定したい人 はこちら。
67.
68.
背景色を変える • ofBackground( R
, G , B ); – R(red) G(green) B(blue)を0~255の間で指定
69.
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フレームで移動
71.
アニメーションさせる • アニメーションの基礎知識 –
毎フレーム座標を変化させる – 移動量が少ないほどゆっくりアニメーション – 移動量が多いほど早くアニメーション
72.
アニメーションさせる • testApp.cpp
– 座標を保存する変数を定義 – 初期設定で背景を黒に – 毎フレームX座標に+1していく – 色を緑に設定 – 10pxの円を描く
73.
動いた!
74.
次は… • Y座標 (
縦方向 )も移動させてみよう!
75.
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増やす
79.
80.
バウンドさせよう • ボールが画面外に出てしまうので、バウンドさせよう
– もし、ボールのY座標が画面下の枠より下なら、加速度を反転 [ if ] [ posY ] [ ofGetHeight ] [ accelY = -‐‑accelY; ] ■条件式 [ if ] if ( posY > ofGetHeight() ) { accelY = -‐‑accelY; }
81.
バウンドした?
82.
左右もバウンド • このままでは左右にもボールがはみ出るのでバウンド
– 下のバウンド – 右のバウンド – 左のバウンド
83.
84.
インタラクションを取り入れる • マウスによるインタラクションを作ってみよう –
クリックでマウスカーソルに置に吸い寄せる
85.
インタラクションを取り入れる • いかにもマウスを使いそうな記述が…
86.
マウスクリックで吸い寄せる • bool 型
:真(true)・偽(false)を保持する入れ物
87.
マウスクリックで吸い寄せる • mousePressed()
– マウスがプレスされた時に実行される • mouseReleased() – マウスがリリースされた時に実行される
88.
マウスクリックで吸い寄せる • もし、マウスが押下状態なら
加速度をマウスとの距離 × 0.05 にする。
89.
90.
「数」に強いよoF • openFrameworks は
C++ ベースなので、動作が高速! • ボールの数を増やしてみよう
91.
92.
5.アドオンって何? • アドオンとは
– openFrameworksの機能を拡張するライブラリ – 機能に対しての知識が無くても簡単に扱える – 色んな人が色んなアドオンを作って公開してくれてる • hKp://ofxaddons.com – 自分で作ることも出来る
93.
5.アドオンって何? • 主なアドオン
– ofxOpenCV コンピュータビジョン(画像解析) – ofxBox2d 2D物理演算 – ofxOsc 別PC等との通信プロトコル – ofxControlPanel コントロールパネル – ofxXmlSeKings 設定を.xml形式で保存 – ofxKinect Kinectを使う – ofxiPhone iPhoneでopenFrameworksを動作させる
94.
6.ハッカソン!( 60分間くらい )
自由に作ってみよう!
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/
96.
7.成果発表会
97.
98.
まとめ • openFrameworks入門おめでとうございます。 • C++の強力な処理速度やアドオン群を使って、自分のオ
リジナル作品を作り上げて下さい。 • 次回のワークショップv002は…未定ですが、決まったら FB上でアナウンスします。 • 「これの作り方教えて!」「こんなアドオンある?」等、 質問はこの後受け付けます。気軽にどうぞ。
99.
openFrameworks Workshop in Kanazawa v001 ご参加ありがとうございました!
Baixar agora