Enviar pesquisa
Carregar
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
•
7 gostaram
•
4,545 visualizações
Atsushi Tadokoro
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 99
Baixar agora
Baixar para ler offline
Recomendados
coma - creator’s talk session: Code - openFrameworks
coma - creator’s talk session: Code - openFrameworks
Atsushi Tadokoro
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
Atsushi Tadokoro
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 2
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 2
Atsushi Tadokoro
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
Atsushi Tadokoro
openFrameworkとCityCompilerでバーチャルとリアルを結ぶ
openFrameworkとCityCompilerでバーチャルとリアルを結ぶ
Atsushi Tadokoro
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
AsyncTask アンチパターン
AsyncTask アンチパターン
Hiroshi Kurokawa
Recomendados
coma - creator’s talk session: Code - openFrameworks
coma - creator’s talk session: Code - openFrameworks
Atsushi Tadokoro
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 1: openFrameworks入門
Atsushi Tadokoro
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 2
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 2
Atsushi Tadokoro
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
Atsushi Tadokoro
openFrameworkとCityCompilerでバーチャルとリアルを結ぶ
openFrameworkとCityCompilerでバーチャルとリアルを結ぶ
Atsushi Tadokoro
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
Atsushi Tadokoro
coma Creators session vol.2
coma Creators session vol.2
Atsushi Tadokoro
AsyncTask アンチパターン
AsyncTask アンチパターン
Hiroshi Kurokawa
griffon plugin を 実際に作ってみよう #jggug
griffon plugin を 実際に作ってみよう #jggug
kimukou_26 Kimukou
OpenGLプログラミング
OpenGLプログラミング
幸雄 村上
Swift 2.0 で変わったところ「後編」 #cswift
Swift 2.0 で変わったところ「後編」 #cswift
Tomohiro Kumagai
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
歌舞伎座Tech Rx会
歌舞伎座Tech Rx会
Kaora Shibacaki
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
Synverll
Synverll
Hidemi Ishihara
JavaScript基礎勉強会
JavaScript基礎勉強会
大樹 小倉
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Yukio Saito
FlexUnit4とMockitoFlex
FlexUnit4とMockitoFlex
Yasuhiro Morikawa
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
Visual Studio Codeで始めるTypeScript
Visual Studio Codeで始めるTypeScript
Akira Inoue
Griffon10 in groovy_fx
Griffon10 in groovy_fx
kimukou_26 Kimukou
Clean Architectureで設計してRxJSを使った話
Clean Architectureで設計してRxJSを使った話
_kondei
20210515 cae linux_install_vb
20210515 cae linux_install_vb
YohichiShiina
もしトラ
もしトラ
Takahiro Sugiura
InterConnect2016 Report by BMXUG
InterConnect2016 Report by BMXUG
Harada Kazuki
Mono at Microsoft Tech Days Japan 2009
Mono at Microsoft Tech Days Japan 2009
Atsushi Eno
20210515 of4 wi&paraview 5.9.0_motorbike
20210515 of4 wi&paraview 5.9.0_motorbike
YohichiShiina
条件式評価器の実装による管理ツールの抽象化
条件式評価器の実装による管理ツールの抽象化
Takuya Ueda
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
Atsushi Tadokoro
PhoneGap勉強会 - 実践編 -
PhoneGap勉強会 - 実践編 -
Katsumi Onishi
Mais conteúdo relacionado
Mais procurados
griffon plugin を 実際に作ってみよう #jggug
griffon plugin を 実際に作ってみよう #jggug
kimukou_26 Kimukou
OpenGLプログラミング
OpenGLプログラミング
幸雄 村上
Swift 2.0 で変わったところ「後編」 #cswift
Swift 2.0 で変わったところ「後編」 #cswift
Tomohiro Kumagai
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Atsushi Tadokoro
歌舞伎座Tech Rx会
歌舞伎座Tech Rx会
Kaora Shibacaki
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
Synverll
Synverll
Hidemi Ishihara
JavaScript基礎勉強会
JavaScript基礎勉強会
大樹 小倉
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Yukio Saito
FlexUnit4とMockitoFlex
FlexUnit4とMockitoFlex
Yasuhiro Morikawa
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
Visual Studio Codeで始めるTypeScript
Visual Studio Codeで始めるTypeScript
Akira Inoue
Griffon10 in groovy_fx
Griffon10 in groovy_fx
kimukou_26 Kimukou
Clean Architectureで設計してRxJSを使った話
Clean Architectureで設計してRxJSを使った話
_kondei
20210515 cae linux_install_vb
20210515 cae linux_install_vb
YohichiShiina
もしトラ
もしトラ
Takahiro Sugiura
InterConnect2016 Report by BMXUG
InterConnect2016 Report by BMXUG
Harada Kazuki
Mono at Microsoft Tech Days Japan 2009
Mono at Microsoft Tech Days Japan 2009
Atsushi Eno
20210515 of4 wi&paraview 5.9.0_motorbike
20210515 of4 wi&paraview 5.9.0_motorbike
YohichiShiina
条件式評価器の実装による管理ツールの抽象化
条件式評価器の実装による管理ツールの抽象化
Takuya Ueda
Mais procurados
(20)
griffon plugin を 実際に作ってみよう #jggug
griffon plugin を 実際に作ってみよう #jggug
OpenGLプログラミング
OpenGLプログラミング
Swift 2.0 で変わったところ「後編」 #cswift
Swift 2.0 で変わったところ「後編」 #cswift
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
歌舞伎座Tech Rx会
歌舞伎座Tech Rx会
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
Synverll
Synverll
JavaScript基礎勉強会
JavaScript基礎勉強会
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
FlexUnit4とMockitoFlex
FlexUnit4とMockitoFlex
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Visual Studio Codeで始めるTypeScript
Visual Studio Codeで始めるTypeScript
Griffon10 in groovy_fx
Griffon10 in groovy_fx
Clean Architectureで設計してRxJSを使った話
Clean Architectureで設計してRxJSを使った話
20210515 cae linux_install_vb
20210515 cae linux_install_vb
もしトラ
もしトラ
InterConnect2016 Report by BMXUG
InterConnect2016 Report by BMXUG
Mono at Microsoft Tech Days Japan 2009
Mono at Microsoft Tech Days Japan 2009
20210515 of4 wi&paraview 5.9.0_motorbike
20210515 of4 wi&paraview 5.9.0_motorbike
条件式評価器の実装による管理ツールの抽象化
条件式評価器の実装による管理ツールの抽象化
Semelhante a BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
Atsushi Tadokoro
PhoneGap勉強会 - 実践編 -
PhoneGap勉強会 - 実践編 -
Katsumi Onishi
openFrameworks iOS 入門
openFrameworks iOS 入門
Atsushi Tadokoro
OSC福岡 20111203
OSC福岡 20111203
Hiroshi Bunya
130329 perl casual_ruik
130329 perl casual_ruik
Rui Kimura
Programming camp Codereading
Programming camp Codereading
Hiro Yoshioka
Howtoよいデザイン
Howtoよいデザイン
Hiroki Yagita
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Takayuki Shimizukawa
こんなに違う!Unityアプリケーション講座
こんなに違う!Unityアプリケーション講座
Unity Technologies Japan K.K.
密着!わたしのコンソールアプリ開発環境
密着!わたしのコンソールアプリ開発環境
Fumihito Yokoyama
Tizen 2.0 alpha でサポートされなかった native api
Tizen 2.0 alpha でサポートされなかった native api
Naruto TAKAHASHI
ちゃんとWeb会議スライド『Coffee script』
ちゃんとWeb会議スライド『Coffee script』
H2O Space. Co., Ltd.
C#の書き方
C#の書き方
信之 岩永
C#の書き方
C#の書き方
信之 岩永
pi-1. プログラミング入門
pi-1. プログラミング入門
kunihikokaneko1
Clrh 110827 wfho
Clrh 110827 wfho
Tomoyuki Obi
NAO/Pepper 開発環境 について
NAO/Pepper 開発環境 について
Takuji Kawata
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Shinya Nakajima
DartPad+CodePenで、Flutterを体験してみよう
DartPad+CodePenで、Flutterを体験してみよう
cch-robo
Swift勉強会
Swift勉強会
Nagamine Hiromasa
Semelhante a BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
(20)
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
PhoneGap勉強会 - 実践編 -
PhoneGap勉強会 - 実践編 -
openFrameworks iOS 入門
openFrameworks iOS 入門
OSC福岡 20111203
OSC福岡 20111203
130329 perl casual_ruik
130329 perl casual_ruik
Programming camp Codereading
Programming camp Codereading
Howtoよいデザイン
Howtoよいデザイン
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
こんなに違う!Unityアプリケーション講座
こんなに違う!Unityアプリケーション講座
密着!わたしのコンソールアプリ開発環境
密着!わたしのコンソールアプリ開発環境
Tizen 2.0 alpha でサポートされなかった native api
Tizen 2.0 alpha でサポートされなかった native api
ちゃんとWeb会議スライド『Coffee script』
ちゃんとWeb会議スライド『Coffee script』
C#の書き方
C#の書き方
C#の書き方
C#の書き方
pi-1. プログラミング入門
pi-1. プログラミング入門
Clrh 110827 wfho
Clrh 110827 wfho
NAO/Pepper 開発環境 について
NAO/Pepper 開発環境 について
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
DartPad+CodePenで、Flutterを体験してみよう
DartPad+CodePenで、Flutterを体験してみよう
Swift勉強会
Swift勉強会
Mais de Atsushi Tadokoro
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Atsushi Tadokoro
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Atsushi Tadokoro
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Atsushi Tadokoro
Interactive Music II Processing基本
Interactive Music II Processing基本
Atsushi Tadokoro
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Atsushi Tadokoro
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Atsushi Tadokoro
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Atsushi Tadokoro
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
Atsushi Tadokoro
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
Atsushi Tadokoro
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Atsushi Tadokoro
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Atsushi Tadokoro
Tamabi media131118
Tamabi media131118
Atsushi Tadokoro
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Atsushi Tadokoro
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Atsushi Tadokoro
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Atsushi Tadokoro
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Atsushi Tadokoro
Geidai music131107
Geidai music131107
Atsushi Tadokoro
Interactive Music II SuperCollider入門 5 時間構造をつくる
Interactive Music II SuperCollider入門 5 時間構造をつくる
Atsushi Tadokoro
Mais de Atsushi Tadokoro
(20)
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
Interactive Music II Processing基本
Interactive Music II Processing基本
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Tamabi media131118
Tamabi media131118
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Geidai music131107
Geidai music131107
Interactive Music II SuperCollider入門 5 時間構造をつくる
Interactive Music II SuperCollider入門 5 時間構造をつくる
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
1.
BNN CAMP vol.3 インタラクションデザインの現在 プログラミング初心者のための openFrameworks入門
- 1 2013年8月3日 田所 淳
2.
ご挨拶
3.
Workshop メンバー紹介 ‣ BNN
CAMP vol.3 ‣ インタラクションデザインの現在―プログラミング初心者のた めのopenFrameworks入門 ‣ ワークショップの講師担当:田所 淳 ‣ 主催: ビー・エヌ・エヌ新社
4.
講師、自己紹介 ‣ 田所淳 (たどころ
あつし) ‣ クリエイティブ・コーダー ‣ 大学非常勤講師など
5.
講師、自己紹介 ‣ http://yoppa.org/ screenshot_679
6.
講師、自己紹介 ‣ 『Beyond Interaction[改訂第2版]
-クリエイティブ・コーディ ングのためのopenFrameworks実践ガイド』絶賛販売中!! screenshot_679
7.
Workshop メンバー紹介 ‣ せっかくなので、参加者の方同士知り合いましょう ‣
順番に一言ずつ、自己紹介をお願いします ‣ お1人、1分程度で簡単にお願いします
8.
Workshopの目標 ‣ 前半: openFrameworks入門 ‣
開発環境の構築 (Xcode、code::blocks) ‣ サンプルプログラムを動かしてみる ‣ 簡単なアニメーションをつくる ‣ 後半: 構造をつくる ‣ openFrameworksでのプログラムの構造について ‣ 関数、クラス ‣ パーティクルシステムをつくる
9.
Workshopの目標 ‣ 最後にはこんなアプリケーションが出来る予定!!
10.
openFrameworksって何?
11.
このワークショップのテーマ ‣ openFrameworks入門 ‣ openFrameworksに初めて触れる方も大歓迎!!
12.
openFrameworks とは? ‣ C++によるクリエイティブなコーディングのためのオープン ソースのツールキット ‣
http://openframeworks.cc/ ‣ 現在のバージョンは、v0.7.4
13.
事前準備 ‣ 以下のファイルが手元にあるか確認 ‣ openFrameworks
v.0.7.4 本体 ‣ Mac: of_v0.7.4_osx_release ‣ Win: of_v0.7.4_vs2010_release ‣ 開発環境 ‣ Mac: Xcode ‣ Win: Visual Studio Express 2010 ‣ サンプルファイル ‣ openFrameworks_workshop13_v0.7.4-master
14.
openFrameworks とは? ‣ openFrameworksを紹介した映像を鑑賞
(20minくらい)
15.
簡単な歴史 ‣ 2004年Zachary Liebermanがニューヨークのパーソンズ美術 大学での大学院のクラスの作品制作のためのツールとして開発 ‣
その後、Zachary Lieberman、Theo Watson、Arturo Castroを 主要メンバーとして、世界中の開発者と協力しながら発展
16.
Zachary Lieberman
17.
school for poetic
computation ‣ Zachary Liebermanさん達による新しい学校 ‣ http://sfpc.io/
18.
何故openFrameworksを使うのか? 様々なメディアを駆使した作品を作りたい!! → 様々な技術に精通しなくてはならない サウンド、ビデオ、フォント、画像解析...etc.
19.
openFrameworksを利用すると… 既存の道具(ライブラリ)を設定なしに使用可能 → 作品制作のための「糊」
20.
開発のための「糊」 OpenGL GLUT FreeImage
FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc.
21.
開発のための「糊」 OpenGL GLUT FreeImage
FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc. 実際に編集する部分
22.
開発のための「糊」 OpenGL GLUT FreeImage
FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc. 実際に編集する部分 openFrameworksの様々な機能
23.
開発のための「糊」 OpenGL GLUT FreeImage
FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc. 実際に編集する部分 openFrameworksの様々な機能 既存のフリーなライブラリ群
24.
openFrameworksを活用した作品 ‣ 参考サイト:creative applications ‣
openFrameworksのカテゴリーに多くの作品が掲載 ‣ http://www.creativeapplications.net/category/openframeworks/
25.
openFrameworks 開発環境の構築
26.
openFrameworksをダウンロード ‣ openFrameworksのダウンロードページより ‣ http://www.openframeworks.cc/download
27.
openFrameworksをダウンロード ‣ Mac OS
Xの方 ‣ osx - xcode版をダウンロード ‣ Windowsの方 ‣ windows - code::blocks版をダウンロード
28.
openFrameworksの開発環境 ‣ openFrameworksには、ProcessingやFlashなどのように専用 の開発環境があるわけではない ‣ それぞれのOSに応じた、C++の開発環境を使用する ‣
Mac OSXの場合 - XCode ‣ Windowsの場合 - Code::Blocks もしくは Visual Studio 2010 ‣ Linuxの場合 - Code::Blocks
29.
openFrameworksの開発環境 ‣ XCodeをを入手するには →
App Store.app を利用する ‣ App Storeで「Xcode」で検索
30.
openFrameworksの開発環境 ‣ XCodeのバージョン ‣ OSX
10.6 Snow Leopard以前 → XCode 3.x ‣ OSX 10.7 Lion、 10.8 Mountain Lion → XCode 4.x ‣ Xcodeのバージョンでインタフェイスや設定方法が若干違う ‣ Xcode4にはGitによるバージョン管理機能も
31.
openFrameworksの開発環境 ‣ Windowsの方には、code::blocks がおススメ! ‣
フリーウェア ‣ http://www.codeblocks.org/
32.
サンプルを実行してみよう!! ‣ openFrameworksには、大量のサンプルが付属している ‣ どれも素晴しいサンプル!
33.
サンプルを実行してみよう!! ‣ サンプルの内容 1
of 2 ‣ 3d - 3次元表現いろいろ ‣ addons - 拡張機能のサンプル ‣ communication - 外部デバイスとの通信(シリアル通信) ‣ empty - 制作のテンプレートとなる「空」サンプル ‣ events - イベント(プログラムへの外部からのアクション)処理 ‣ gl - OpenGLの活用(Shader、VBO、カメラなど)
34.
サンプルを実行してみよう!! ‣ サンプルの内容 2
of 2 ‣ graphics - グラフィクスプログラミング ‣ math - 数式による表現、ノイズ、周期など ‣ sound - 音響生成、サウンドファイルの再生 ‣ utils - 補助的な機能の例 ‣ video - 動画の再生、カメラからの入力
35.
サンプルを実行してみよう!! ‣ 「of_v0.7.4_osx_release/examples/」以下のフォルダ内 ‣ プロジェクトファイル「.xcodeproj」を開く ‣
例えば、graphicsExample.xcodeproj ‣ プロジェクトファイルを開くと、自動的にXcodeが起動する
36.
サンプルを実行してみよう!! ‣ プログラムを実行するには ‣ まず、Schemeのプルダウンより「サンプル名
Debug」を選択 する
37.
サンプルを実行してみよう!! ‣ 左上の「Run」ボタンを押す
38.
サンプルを実行してみよう!! ‣ 実行例:graphics example
39.
実習:いろいろなサンプルを実行してみる ‣ まずは、examples以下のサンプルをいろいろ実行してみま しょう! ‣ いったい何をやっているのかを類推しつつ ‣
うまく実行できない場合は、質問してください
40.
openFrameworks プログラミング、はじめの一歩
41.
新規にプロジェクトを作成する ‣ 新規にプロジェクトを作成する方法は2つ ‣ 方法1:
ProjectGeneratorを利用する ‣ 方法2: 空プロジェクト(EmptyProject)をコピーする
42.
新規にプロジェクトを作成する ‣ 方法1: ProjectGeneratorを利用する方法
ー とても簡単! ‣ projectGeneratorフォルダ内のprojectGenerator.appを起動
43.
新規にプロジェクトを作成する ‣ 方法1: ProjectGeneratorを利用する方法 ‣
新規プロジェクトの作成手順 ‣ 「CLICK TO CHANGE THE NAME」を選択して名前を設定 ‣ (もし必要なら)「CLICK TO CHANGE THE NAME」で場所を変更 ‣ 「GENERATE PROJECT」で生成 ‣ これで新規プロジェクトに必要なファイル一式が生成される
44.
新規にプロジェクトを作成する ‣ 方法2: 空プロジェクトをコピーする方法 ‣
新規にプロジェクトを作成するには、空プロジェクトをコピー ‣ 空プロジェクトは、下記のものをコピーしてつかう ‣ examples > empty > emptyExample
45.
openFrameworks、フォルダの階層構造 ‣ openFrameworksは、フォルダの階層構造がとても大事!! ‣ ここを間違えるとBuildできなくなってしまう
46.
openFrameworks、フォルダの階層構造 ‣ oFルートフォルダ (oF
root folder) ‣ openFramewroksの一番先頭(root = 根っこ)の階層 oF root folder
47.
openFrameworks、フォルダの階層構造 ‣ ワークスペース (Workspace) ‣
プロジェクトのまとまりを分類して整理 (examples など) Workspace
48.
openFrameworks、フォルダの階層構造 ‣ プロジェクト群 (Projects) ‣
この階層に一つ一つのプロジェクトのフォルダが格納 Projects
49.
openFrameworks、フォルダの階層構造 ‣ プロジェクト単体 (a
project) ‣ Xcodeのプロジェクトファイルを含んだ単一のプロジェクトの 中身 a project
50.
openFrameworks、フォルダの階層構造 ‣ 今回のワークショップ用に、ワークスペースに一つ専用のフォ ルダを用意しておきましょう ‣ 例えば、myAppsというフォルダを作成した場合
51.
openFrameworksのコード構造 ‣ さしあたって編集するのは、testApp.hとtestApp.cpp OpenGL GLUT
FreeImage FreeType fmod RtAudio QuickTime OpenCV main.cpp testApp.h testApp.cpp ofSimpleApp, ofGraphics, ofImage, ofTrueTypeFont, ofVideoPlayer, ofVideoGrabber, ofTexture, ofSoundPlayer, ofSoundStream, ofSerial, ofMath, ofUtils ...etc. ココ
52.
openFrameworksのコード構造 ‣ testApp.cppとtestApp.h XCode内の場所 ココ
53.
プロジェクトの中身を開いてみよう! ‣ testApp.cpp を開いてみる!
54.
2つのファイル ‣ testApp.h -
ヘッダファイル ‣ プログラム全体で使用される部品 (変数、関数) を宣言 ‣ testApp.cpp - 実装ファイル ‣ 実際に何をするかを記述
55.
2つのファイル ‣ ヘッダファイル(.h)と実装ファイル(.cpp)を料理にたとえると… ヘッダファイル =
レシピ 必要な材料の一覧 料理の手順を書き出す
56.
2つのファイル ‣ ヘッダファイル(.h)と実装ファイル(.cpp)を料理にたとえると… ヘッダファイル =
レシピ 必要な材料の一覧 料理の手順を書き出す 実装ファイル = 料理 料理完成までの過程を 具体的に全て記述
57.
重要な3つのブロック ‣ とりあえず今の段階で重要になるのは、下記の3つ処理のブ ロック (関数,
function) ‣ setup - 準備 ‣ update - 更新 ‣ draw - 描画 ‣ つまり... ‣ 絵を描く準備をしたら継続的に更新しながら描画する
58.
testApp.h では 準備 #pragma once #include
"ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { ! public: ! void setup(); ! void update(); ! void draw(); ! void exit(); ! ! void touchDown(ofTouchEventArgs &touch); ! void touchMoved(ofTouchEventArgs &touch); ! void touchUp(ofTouchEventArgs &touch); ! void touchDoubleTap(ofTouchEventArgs &touch); ! void lostFocus(); ! void gotFocus(); ! void gotMemoryWarning(); ! void deviceOrientationChanged(int newOrientation); 準備
59.
testApp.h では 準備 #pragma once #include
"ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { ! public: ! void setup(); ! void update(); ! void draw(); ! void exit(); ! ! void touchDown(ofTouchEventArgs &touch); ! void touchMoved(ofTouchEventArgs &touch); ! void touchUp(ofTouchEventArgs &touch); ! void touchDoubleTap(ofTouchEventArgs &touch); ! void lostFocus(); ! void gotFocus(); ! void gotMemoryWarning(); ! void deviceOrientationChanged(int newOrientation); 更新
60.
testApp.h では 準備 #pragma once #include
"ofMain.h" #include "ofxiPhone.h" #include "ofxiPhoneExtras.h" class testApp : public ofxiPhoneApp { ! public: ! void setup(); ! void update(); ! void draw(); ! void exit(); ! ! void touchDown(ofTouchEventArgs &touch); ! void touchMoved(ofTouchEventArgs &touch); ! void touchUp(ofTouchEventArgs &touch); ! void touchDoubleTap(ofTouchEventArgs &touch); ! void lostFocus(); ! void gotFocus(); ! void gotMemoryWarning(); ! void deviceOrientationChanged(int newOrientation); 描画
61.
testApp.cpp では 準備 #include "testApp.h" //-------------------------------------------------------------- void
testApp::setup(){ } //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ } //-------------------------------------------------------------- void testApp::keyPressed(int key){ } //-------------------------------------------------------------- void testApp::keyReleased(int key){ } //--------- 後略 --------- 準備
62.
testApp.cpp では 準備 #include "testApp.h" //-------------------------------------------------------------- void
testApp::setup(){ } //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ } //-------------------------------------------------------------- void testApp::keyPressed(int key){ } //-------------------------------------------------------------- void testApp::keyReleased(int key){ } //--------- 後略 --------- 更新
63.
testApp.cpp では 準備 #include "testApp.h" //-------------------------------------------------------------- void
testApp::setup(){ } //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ } //-------------------------------------------------------------- void testApp::keyPressed(int key){ } //-------------------------------------------------------------- void testApp::keyReleased(int key){ } //--------- 後略 --------- 描画
64.
図形を描いてみる! ‣ まず円を描いてみましょう ‣ 何を指定したら円を描けるのか、を考える
65.
図形を描いてみる! ‣ 座標系:画面の中の場所(点)を指定するしくみ ‣ 横
(x座標) と 縦 (y座標) で考える ‣ openFramewroksの場合、原点 (0, 0) は左上 x座標 y座標 原点 (0, 0)
66.
図形を描いてみる! ‣ 例えば、(80, 60)
の点(x = 80, y = 60)だったら ‣ 左上の点から、80pixel右、上から60pixel下にいったところ 80 60 (0, 0)
67.
図形を描いてみる! ‣ 中心の位置(座標 =
x, y)と半径( r )の長さがわかれば円は描くこ とができる! (x, y) r
68.
図形を描いてみる! ‣ openFrameworksでは、下記のように指定する ‣ ofCircle
(中心のx座標, 中心のy座標, 半径の長さ); ‣ 例: ‣ ofCircle (100, 200, 50); ‣ 座標(100, 200) を中心に、半径50の円を描く
69.
やってみよう!! < 前略 > //-------------------------------------------------------------- void
testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ ofCircle(512, 384, 200); } //-------------------------------------------------------------- void testApp::exit(){ } < 後略 > Text
70.
やってみよう!! ‣ 円が描けた!
71.
参考:oFの命令を調べる ‣ 円以外の形を描きたくなったとき、どうやって調べる? ‣ リファレンスを参考にすると良い ‣
http://www.openframeworks.cc/documentation
72.
色を塗ってみる ‣ コンピュータの画面はどうなっているのか? ‣ コンピュータの画面を拡大していくと... ‣
縦横に並んだ点の集合 → ピクセル (Pixel) ‣ 一つのピクセルは赤、緑、青の三原色から成り立っている
73.
色を塗ってみる ‣ 色を指定するには? ‣ R(赤)
G(緑) B(青)の三原色で指定する ‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色
74.
色を指定するには? ‣ openFrameworks で色を指定するには? ‣
ofSetColor を使用する ‣ ofSetColor (Red, Green, Blue, Alpha); ‣ それぞれの色の範囲は 0 ∼ 255 ‣ Alphaは透明度をあらわす ‣ 色を指定した以降の図形に適用される ‣ 例: ‣ ofSetColor(0, 127, 255, 127);
75.
色を指定するには? #include "testApp.h" //-------------------------------------------------------------- void testApp::setup(){ } //-------------------------------------------------------------- void
testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ ofSetColor(0, 127, 255, 200); ofCircle(412, 384, 200); ofSetColor(255, 127, 0, 200); ofCircle(612, 384, 200); } < 後略 >
76.
色を指定するには? ‣ 色がついた!
77.
背景色や描画方法の初期設定 ‣ setup() に様々な初期設定を行う ‣
透明度を有効に - ofEnableAlphaBlending(); ‣ 円を描画する精度 - ofSetCircleResolution(分割数); ‣ 背景色 - ofBackground(R, G, B);
78.
背景色や描画方法の初期設定 #include "testApp.h" //-------------------------------------------------------------- void testApp::setup(){ !
ofEnableAlphaBlending(); ! ofSetCircleResolution(64); ! ofBackground(0, 0, 0); } //-------------------------------------------------------------- void testApp::update(){ ! } //-------------------------------------------------------------- void testApp::draw(){ ofSetColor(0, 127, 255, 200); ofCircle(412, 384, 150); ofSetColor(255, 127, 0, 200); ofCircle(612, 384, 150);! } < 後略 >
79.
背景色や描画方法の初期設定
80.
図形を動かしてみよう! ‣ いよいよ図形を動かしてみましょう! ‣ 円を画面の中心を軸にして、ぐるぐる回転させてみます
81.
図形を動かしてみよう! ‣ 回転運動をするには… ‣ 現在の回転角度を憶えておかなければならない ‣
次のコマで現在の回転角度から少し変化させるため ‣ 値を憶えるための仕組み → 「変数 (veriables)」 時間
82.
‣ 変数とは? ‣ 一時的に値(文字、文字列、数字など)を記憶しておく場所 ‣
データを入れておく「箱」のようなもの 変数 ver
83.
‣ データ型 -
値の種類 ‣ よく用いられるデータ型 ‣ int:整数 (-1, 0, 1, 2, 3....) ‣ float:少数 (-0.01, 3.14, 21.314) ‣ bool:ブール値、真か偽か、(true, false) ‣ char:1文字分のデータ(a, b, c, d...) ‣ string:文字列 Hello World! 変数 int float char
84.
‣ 宣言:使用する変数の名前の箱を準備する ‣ 代入:変数の箱に値を入れる ‣
演算:変数の値を計算する 変数 int hoo; hoo = 0; hoo = hoo + 1;
85.
図形を動かしてみよう! ‣ 回転角度を記録する箱 ‣ 小数点以下の値は必要ないので、int
の箱 (int型という) で ‣ testApp全体で使用する変数は、ヘッダファイル( = レシピ ! )に 記述する ヘッダファイル = レシピ 回転角度 (int rotation)
86.
#pragma once #include "ofMain.h" class
testApp : public ofBaseApp{ ! public: ! void setup(); ! void update(); ! void draw(); ! ! void keyPressed (int key); ! void keyReleased(int key); ! void mouseMoved(int x, int y ); ! void mouseDragged(int x, int y, int button); ! void mousePressed(int x, int y, int button); ! void mouseReleased(int x, int y, int button); ! void windowResized(int w, int h); ! void dragEvent(ofDragInfo dragInfo); ! void gotMessage(ofMessage msg); ! ! int rotation; }; 図形を動かしてみよう! ‣ testApp.h を編集 追加
87.
図形を動かしてみよう! ‣ 実装ファイル testApp.cpp
にも変更を加える ‣ setup( ): ‣ フレームレート(1秒間に更新する回数)を設定 ‣ update( ): ‣ 1コマ描画するごとに角度を更新 ‣ draw( ): ‣ 設定した角度回転してから、円を描く
88.
#include "testApp.h" //-------------------------------------------------------------- void testApp::setup(){ ! !
ofEnableAlphaBlending(); ! ofSetCircleResolution(64); ! ofBackground(0, 0, 0); ! ofSetFrameRate(60); ! ! rotation = 0; } 図形を動かしてみよう! ‣ testApp.cpp を編集 追加 追加
89.
//-------------------------------------------------------------- void testApp::update(){ ! rotation
= rotation + 5; } //-------------------------------------------------------------- void testApp::draw(){ ! ! ofRotateZ(rotation); ! ! ofSetColor(0, 127, 255, 200); ! ofCircle(412, 384, 150); ! ofSetColor(255, 127, 0, 200); ! ofCircle(612, 384, 150); ! } 図形を動かしてみよう! ‣ testApp.cpp を編集 追加 追加
90.
図形を動かしてみよう! ‣ あれ、なんか意図と違う…?
91.
図形を動かしてみよう! ‣ ofRotateZ() は原点を中心軸にして回転する ‣
左上を中心に回転 → 画面の中心を軸にしたい
92.
図形を動かしてみよう! ‣ 回転軸を移動するには →
座標全体の位置を移動する ‣ ofTranslate(x, y) 座標全体を移動する命令 (0, 0) (0, 0) ofTranslate(x, y)
93.
図形を動かしてみよう! ‣ 画面の中心点を求める:画面サイズが変化するたびに計算する のは面倒 →
便利な関数が存在する!! ‣ ofGetWidth() 画面の幅、ofGetHeight() 画面の高さ ‣ つまり画面の中心点は (ofGetWidth()/2, ofGetHeight()/2) ofGetWidth() ofGetHeight() (ofGetWidth()/2, ofGetHeight()/2)
94.
//-------------------------------------------------------------- void testApp::draw(){ ! ofTranslate(ofGetWidth()/2,
ofGetHeight()/2); ! ofRotateZ(rotation); ! ! ofSetColor(0, 127, 255, 200); ! ofCircle(-100, 0, 150); ! ofSetColor(255, 127, 0, 200); ! ofCircle(100, 0, 150); ! } 図形を動かしてみよう! ‣ testApp.cpp を編集 追加 変更 変更
95.
図形を動かしてみよう! ‣ 画面の中心を軸にして回転!!
96.
図形を動かしてみよう! ‣ さらに変化をつけてみる ‣ マウスの現在位置で、パラメーターを変化させる ‣
マウスの現在位置の取得:mouseX、mouseY ‣ mouseX - 現在のマウスのX座標 ‣ これを、回転スピードに割りあてる ‣ mouseY - 現在のマウスのY座標 ‣ これを、円の半径に割りあてる
97.
//-------------------------------------------------------------- void testApp::update(){ ! rotation
= rotation + mouseX / 4.0; } //-------------------------------------------------------------- void testApp::draw(){ ! ofTranslate(ofGetWidth()/2, ofGetHeight()/2); ! ofRotateZ(rotation); ! ! ofSetColor(0, 127, 255, 200); ! ofCircle(-100, 0, mouseY / 2.0); ! ofSetColor(255, 127, 0, 200); ! ofCircle(100, 0, mouseY / 2.0); ! } 図形を動かしてみよう! ‣ testApp.cpp を編集 変更 変更 変更
98.
図形を動かしてみよう! ‣ 半径と回転スピードを変化させながら、高速回転!!
99.
休憩
Baixar agora