bnn camp vol.3 ...
DESCRIPTION
TRANSCRIPT
![Page 1: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/1.jpg)
BNN CAMP vol.3 インタラクションデザインの現在プログラミング初心者のためのopenFrameworks入門 - 1
2013年8月3日田所 淳
![Page 2: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/2.jpg)
ご挨拶
![Page 3: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/3.jpg)
Workshop メンバー紹介‣ BNN CAMP vol.3 ‣ インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門
‣ ワークショップの講師担当:田所 淳‣ 主催: ビー・エヌ・エヌ新社
![Page 4: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/4.jpg)
講師、自己紹介‣ 田所淳 (たどころ あつし)‣ クリエイティブ・コーダー‣ 大学非常勤講師など
![Page 5: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/5.jpg)
講師、自己紹介‣ http://yoppa.org/
screenshot_679
![Page 6: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/6.jpg)
講師、自己紹介‣ 『Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド』絶賛販売中!!
screenshot_679
![Page 7: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/7.jpg)
Workshop メンバー紹介‣ せっかくなので、参加者の方同士知り合いましょう‣ 順番に一言ずつ、自己紹介をお願いします‣ お1人、1分程度で簡単にお願いします
![Page 8: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/8.jpg)
Workshopの目標 ‣ 前半: openFrameworks入門‣ 開発環境の構築 (Xcode、code::blocks)‣ サンプルプログラムを動かしてみる‣ 簡単なアニメーションをつくる
‣ 後半: 構造をつくる‣ openFrameworksでのプログラムの構造について‣ 関数、クラス‣ パーティクルシステムをつくる
![Page 9: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/9.jpg)
Workshopの目標 ‣ 最後にはこんなアプリケーションが出来る予定!!
![Page 10: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/10.jpg)
openFrameworksって何?
![Page 11: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/11.jpg)
このワークショップのテーマ‣ openFrameworks入門‣ openFrameworksに初めて触れる方も大歓迎!!
![Page 12: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/12.jpg)
openFrameworks とは?‣ C++によるクリエイティブなコーディングのためのオープンソースのツールキット
‣ http://openframeworks.cc/ ‣ 現在のバージョンは、v0.7.4
![Page 13: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/13.jpg)
事前準備‣ 以下のファイルが手元にあるか確認
‣ 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
![Page 14: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/14.jpg)
openFrameworks とは?‣ openFrameworksを紹介した映像を鑑賞 (20minくらい)
![Page 15: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/15.jpg)
簡単な歴史‣ 2004年Zachary Liebermanがニューヨークのパーソンズ美術大学での大学院のクラスの作品制作のためのツールとして開発
‣ その後、Zachary Lieberman、Theo Watson、Arturo Castroを主要メンバーとして、世界中の開発者と協力しながら発展
![Page 16: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/16.jpg)
Zachary Lieberman
![Page 17: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/17.jpg)
school for poetic computation‣ Zachary Liebermanさん達による新しい学校‣ http://sfpc.io/
![Page 18: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/18.jpg)
何故openFrameworksを使うのか?
様々なメディアを駆使した作品を作りたい!!
→ 様々な技術に精通しなくてはならないサウンド、ビデオ、フォント、画像解析...etc.
![Page 19: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/19.jpg)
openFrameworksを利用すると…
既存の道具(ライブラリ)を設定なしに使用可能→ 作品制作のための「糊」
![Page 20: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/20.jpg)
開発のための「糊」
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.
![Page 21: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/21.jpg)
開発のための「糊」
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.
実際に編集する部分
![Page 22: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/22.jpg)
開発のための「糊」
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の様々な機能
![Page 23: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/23.jpg)
開発のための「糊」
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の様々な機能
既存のフリーなライブラリ群
![Page 24: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/24.jpg)
openFrameworksを活用した作品‣ 参考サイト:creative applications‣ openFrameworksのカテゴリーに多くの作品が掲載‣ http://www.creativeapplications.net/category/openframeworks/
![Page 25: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/25.jpg)
openFrameworks開発環境の構築
![Page 26: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/26.jpg)
openFrameworksをダウンロード‣ openFrameworksのダウンロードページより‣ http://www.openframeworks.cc/download
![Page 27: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/27.jpg)
openFrameworksをダウンロード‣ Mac OS Xの方‣ osx - xcode版をダウンロード
‣ Windowsの方‣ windows - code::blocks版をダウンロード
![Page 28: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/28.jpg)
openFrameworksの開発環境‣ openFrameworksには、ProcessingやFlashなどのように専用の開発環境があるわけではない
‣ それぞれのOSに応じた、C++の開発環境を使用する‣ Mac OSXの場合 - XCode‣ Windowsの場合 - Code::Blocks もしくは Visual Studio 2010‣ Linuxの場合 - Code::Blocks
![Page 29: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/29.jpg)
openFrameworksの開発環境‣ XCodeをを入手するには → App Store.app を利用する‣ App Storeで「Xcode」で検索
![Page 30: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/30.jpg)
openFrameworksの開発環境‣ XCodeのバージョン‣ OSX 10.6 Snow Leopard以前 → XCode 3.x‣ OSX 10.7 Lion、 10.8 Mountain Lion → XCode 4.x
‣ Xcodeのバージョンでインタフェイスや設定方法が若干違う‣ Xcode4にはGitによるバージョン管理機能も
![Page 31: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/31.jpg)
openFrameworksの開発環境‣ Windowsの方には、code::blocks がおススメ!‣ フリーウェア‣ http://www.codeblocks.org/
![Page 32: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/32.jpg)
サンプルを実行してみよう!!‣ openFrameworksには、大量のサンプルが付属している‣ どれも素晴しいサンプル!
![Page 33: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/33.jpg)
サンプルを実行してみよう!!‣ サンプルの内容 1 of 2
‣ 3d - 3次元表現いろいろ‣ addons - 拡張機能のサンプル‣ communication - 外部デバイスとの通信(シリアル通信)‣ empty - 制作のテンプレートとなる「空」サンプル‣ events - イベント(プログラムへの外部からのアクション)処理‣ gl - OpenGLの活用(Shader、VBO、カメラなど)
![Page 34: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/34.jpg)
サンプルを実行してみよう!!‣ サンプルの内容 2 of 2
‣ graphics - グラフィクスプログラミング‣ math - 数式による表現、ノイズ、周期など‣ sound - 音響生成、サウンドファイルの再生‣ utils - 補助的な機能の例‣ video - 動画の再生、カメラからの入力
![Page 35: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/35.jpg)
サンプルを実行してみよう!!‣ 「of_v0.7.4_osx_release/examples/」以下のフォルダ内‣ プロジェクトファイル「.xcodeproj」を開く‣ 例えば、graphicsExample.xcodeproj‣ プロジェクトファイルを開くと、自動的にXcodeが起動する
![Page 36: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/36.jpg)
サンプルを実行してみよう!!‣ プログラムを実行するには‣ まず、Schemeのプルダウンより「サンプル名 Debug」を選択する
![Page 37: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/37.jpg)
サンプルを実行してみよう!!‣ 左上の「Run」ボタンを押す
![Page 38: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/38.jpg)
サンプルを実行してみよう!!‣ 実行例:graphics example
![Page 39: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/39.jpg)
実習:いろいろなサンプルを実行してみる‣ まずは、examples以下のサンプルをいろいろ実行してみましょう!
‣ いったい何をやっているのかを類推しつつ‣ うまく実行できない場合は、質問してください
![Page 40: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/40.jpg)
openFrameworksプログラミング、はじめの一歩
![Page 41: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/41.jpg)
新規にプロジェクトを作成する ‣ 新規にプロジェクトを作成する方法は2つ
‣ 方法1: ProjectGeneratorを利用する‣ 方法2: 空プロジェクト(EmptyProject)をコピーする
![Page 42: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/42.jpg)
新規にプロジェクトを作成する ‣ 方法1: ProjectGeneratorを利用する方法 ー とても簡単!‣ projectGeneratorフォルダ内のprojectGenerator.appを起動
![Page 43: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/43.jpg)
新規にプロジェクトを作成する ‣ 方法1: ProjectGeneratorを利用する方法
‣ 新規プロジェクトの作成手順‣ 「CLICK TO CHANGE THE NAME」を選択して名前を設定‣ (もし必要なら)「CLICK TO CHANGE THE NAME」で場所を変更‣ 「GENERATE PROJECT」で生成
‣ これで新規プロジェクトに必要なファイル一式が生成される
![Page 44: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/44.jpg)
新規にプロジェクトを作成する ‣ 方法2: 空プロジェクトをコピーする方法‣ 新規にプロジェクトを作成するには、空プロジェクトをコピー‣ 空プロジェクトは、下記のものをコピーしてつかう‣ examples > empty > emptyExample
![Page 45: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/45.jpg)
openFrameworks、フォルダの階層構造‣ openFrameworksは、フォルダの階層構造がとても大事!!‣ ここを間違えるとBuildできなくなってしまう
![Page 46: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/46.jpg)
openFrameworks、フォルダの階層構造‣ oFルートフォルダ (oF root folder)‣ openFramewroksの一番先頭(root = 根っこ)の階層
oF root folder
![Page 47: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/47.jpg)
openFrameworks、フォルダの階層構造‣ ワークスペース (Workspace)‣ プロジェクトのまとまりを分類して整理 (examples など)
Workspace
![Page 48: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/48.jpg)
openFrameworks、フォルダの階層構造‣ プロジェクト群 (Projects)‣ この階層に一つ一つのプロジェクトのフォルダが格納
Projects
![Page 49: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/49.jpg)
openFrameworks、フォルダの階層構造‣ プロジェクト単体 (a project)‣ Xcodeのプロジェクトファイルを含んだ単一のプロジェクトの中身
a project
![Page 50: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/50.jpg)
openFrameworks、フォルダの階層構造‣ 今回のワークショップ用に、ワークスペースに一つ専用のフォルダを用意しておきましょう
‣ 例えば、myAppsというフォルダを作成した場合
![Page 51: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/51.jpg)
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.
ココ
![Page 52: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/52.jpg)
openFrameworksのコード構造‣ testApp.cppとtestApp.h XCode内の場所
ココ
![Page 53: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/53.jpg)
プロジェクトの中身を開いてみよう!‣ testApp.cpp を開いてみる!
![Page 54: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/54.jpg)
2つのファイル‣ testApp.h - ヘッダファイル‣ プログラム全体で使用される部品 (変数、関数) を宣言
‣ testApp.cpp - 実装ファイル‣ 実際に何をするかを記述
![Page 55: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/55.jpg)
2つのファイル‣ ヘッダファイル(.h)と実装ファイル(.cpp)を料理にたとえると…
ヘッダファイル = レシピ
必要な材料の一覧料理の手順を書き出す
![Page 56: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/56.jpg)
2つのファイル‣ ヘッダファイル(.h)と実装ファイル(.cpp)を料理にたとえると…
ヘッダファイル = レシピ
必要な材料の一覧料理の手順を書き出す
実装ファイル = 料理
料理完成までの過程を具体的に全て記述
![Page 57: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/57.jpg)
重要な3つのブロック‣ とりあえず今の段階で重要になるのは、下記の3つ処理のブロック (関数, function)
‣ setup - 準備‣ update - 更新‣ draw - 描画
‣ つまり...‣ 絵を描く準備をしたら継続的に更新しながら描画する
![Page 58: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/58.jpg)
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);
準備
![Page 59: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/59.jpg)
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);
更新
![Page 60: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/60.jpg)
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);
描画
![Page 61: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/61.jpg)
testApp.cpp では
準備
#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){
}
//--------------------------------------------------------------void testApp::update(){
}
//--------------------------------------------------------------void testApp::draw(){
}
//--------------------------------------------------------------void testApp::keyPressed(int key){
}
//--------------------------------------------------------------void testApp::keyReleased(int key){
}
//--------- 後略 ---------
準備
![Page 62: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/62.jpg)
testApp.cpp では
準備
#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){
}
//--------------------------------------------------------------void testApp::update(){
}
//--------------------------------------------------------------void testApp::draw(){
}
//--------------------------------------------------------------void testApp::keyPressed(int key){
}
//--------------------------------------------------------------void testApp::keyReleased(int key){
}
//--------- 後略 ---------
更新
![Page 63: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/63.jpg)
testApp.cpp では
準備
#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){
}
//--------------------------------------------------------------void testApp::update(){
}
//--------------------------------------------------------------void testApp::draw(){
}
//--------------------------------------------------------------void testApp::keyPressed(int key){
}
//--------------------------------------------------------------void testApp::keyReleased(int key){
}
//--------- 後略 ---------
描画
![Page 64: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/64.jpg)
図形を描いてみる!‣ まず円を描いてみましょう‣ 何を指定したら円を描けるのか、を考える
![Page 65: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/65.jpg)
図形を描いてみる!‣ 座標系:画面の中の場所(点)を指定するしくみ‣ 横 (x座標) と 縦 (y座標) で考える‣ openFramewroksの場合、原点 (0, 0) は左上
x座標
y座標
原点 (0, 0)
![Page 66: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/66.jpg)
図形を描いてみる!‣ 例えば、(80, 60) の点(x = 80, y = 60)だったら‣ 左上の点から、80pixel右、上から60pixel下にいったところ
80
60
(0, 0)
![Page 67: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/67.jpg)
図形を描いてみる!‣ 中心の位置(座標 = x, y)と半径( r )の長さがわかれば円は描くことができる!
(x, y)
r
![Page 68: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/68.jpg)
図形を描いてみる!‣ openFrameworksでは、下記のように指定する
‣ ofCircle (中心のx座標, 中心のy座標, 半径の長さ);
‣ 例:‣ ofCircle (100, 200, 50); ‣ 座標(100, 200) を中心に、半径50の円を描く
![Page 69: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/69.jpg)
やってみよう!!< 前略 >
//--------------------------------------------------------------void testApp::update(){ }
//--------------------------------------------------------------void testApp::draw(){ ofCircle(512, 384, 200);}
//--------------------------------------------------------------void testApp::exit(){ }
< 後略 >
Text
![Page 70: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/70.jpg)
やってみよう!!‣ 円が描けた!
![Page 71: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/71.jpg)
参考:oFの命令を調べる‣ 円以外の形を描きたくなったとき、どうやって調べる?‣ リファレンスを参考にすると良い‣ http://www.openframeworks.cc/documentation
![Page 72: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/72.jpg)
色を塗ってみる‣ コンピュータの画面はどうなっているのか?‣ コンピュータの画面を拡大していくと...‣ 縦横に並んだ点の集合 → ピクセル (Pixel)‣ 一つのピクセルは赤、緑、青の三原色から成り立っている
![Page 73: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/73.jpg)
色を塗ってみる‣ 色を指定するには?‣ R(赤) G(緑) B(青)の三原色で指定する‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色
![Page 74: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/74.jpg)
色を指定するには?‣ openFrameworks で色を指定するには?‣ ofSetColor を使用する
‣ ofSetColor (Red, Green, Blue, Alpha);
‣ それぞれの色の範囲は 0 ~ 255‣ Alphaは透明度をあらわす‣ 色を指定した以降の図形に適用される
‣ 例:‣ ofSetColor(0, 127, 255, 127);
![Page 75: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/75.jpg)
色を指定するには?#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);}
< 後略 >
![Page 76: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/76.jpg)
色を指定するには?‣ 色がついた!
![Page 77: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/77.jpg)
背景色や描画方法の初期設定‣ setup() に様々な初期設定を行う
‣ 透明度を有効に - ofEnableAlphaBlending();‣ 円を描画する精度 - ofSetCircleResolution(分割数);‣ 背景色 - ofBackground(R, G, B);
![Page 78: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/78.jpg)
背景色や描画方法の初期設定#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);!}
< 後略 >
![Page 79: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/79.jpg)
背景色や描画方法の初期設定
![Page 80: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/80.jpg)
図形を動かしてみよう!‣ いよいよ図形を動かしてみましょう!‣ 円を画面の中心を軸にして、ぐるぐる回転させてみます
![Page 81: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/81.jpg)
図形を動かしてみよう!‣ 回転運動をするには…‣ 現在の回転角度を憶えておかなければならない‣ 次のコマで現在の回転角度から少し変化させるため‣ 値を憶えるための仕組み → 「変数 (veriables)」
時間
![Page 82: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/82.jpg)
‣ 変数とは?‣ 一時的に値(文字、文字列、数字など)を記憶しておく場所‣ データを入れておく「箱」のようなもの
変数
ver
![Page 83: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/83.jpg)
‣ データ型 - 値の種類‣ よく用いられるデータ型‣ 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
![Page 84: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/84.jpg)
‣ 宣言:使用する変数の名前の箱を準備する
‣ 代入:変数の箱に値を入れる
‣ 演算:変数の値を計算する
変数
int hoo;
hoo = 0;
hoo = hoo + 1;
![Page 85: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/85.jpg)
図形を動かしてみよう!‣ 回転角度を記録する箱‣ 小数点以下の値は必要ないので、int の箱 (int型という) で‣ testApp全体で使用する変数は、ヘッダファイル( = レシピ ! )に記述する
ヘッダファイル = レシピ
回転角度 (int rotation)
![Page 86: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/86.jpg)
#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 を編集
追加
![Page 87: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/87.jpg)
図形を動かしてみよう!‣ 実装ファイル testApp.cpp にも変更を加える
‣ setup( ):‣ フレームレート(1秒間に更新する回数)を設定
‣ update( ):‣ 1コマ描画するごとに角度を更新
‣ draw( ):‣ 設定した角度回転してから、円を描く
![Page 88: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/88.jpg)
#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){!! ofEnableAlphaBlending();! ofSetCircleResolution(64);! ofBackground(0, 0, 0);! ofSetFrameRate(60);!! rotation = 0;}
図形を動かしてみよう!‣ testApp.cpp を編集
追加追加
![Page 89: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/89.jpg)
//--------------------------------------------------------------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 を編集
追加
追加
![Page 90: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/90.jpg)
図形を動かしてみよう!‣ あれ、なんか意図と違う…?
![Page 91: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/91.jpg)
図形を動かしてみよう!‣ ofRotateZ() は原点を中心軸にして回転する‣ 左上を中心に回転 → 画面の中心を軸にしたい
![Page 92: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/92.jpg)
図形を動かしてみよう!‣ 回転軸を移動するには → 座標全体の位置を移動する‣ ofTranslate(x, y) 座標全体を移動する命令
(0, 0)
(0, 0)
ofTranslate(x, y)
![Page 93: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/93.jpg)
図形を動かしてみよう!‣ 画面の中心点を求める:画面サイズが変化するたびに計算するのは面倒 → 便利な関数が存在する!!
‣ ofGetWidth() 画面の幅、ofGetHeight() 画面の高さ‣ つまり画面の中心点は (ofGetWidth()/2, ofGetHeight()/2)
ofGetWidth()
ofGetHeight()(ofGetWidth()/2, ofGetHeight()/2)
![Page 94: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/94.jpg)
//--------------------------------------------------------------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 を編集
追加
変更変更
![Page 95: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/95.jpg)
図形を動かしてみよう!‣ 画面の中心を軸にして回転!!
![Page 96: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/96.jpg)
図形を動かしてみよう!‣ さらに変化をつけてみる‣ マウスの現在位置で、パラメーターを変化させる
‣ マウスの現在位置の取得:mouseX、mouseY
‣ mouseX - 現在のマウスのX座標‣ これを、回転スピードに割りあてる
‣ mouseY - 現在のマウスのY座標‣ これを、円の半径に割りあてる
![Page 97: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/97.jpg)
//--------------------------------------------------------------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 を編集
変更
変更変更
![Page 98: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/98.jpg)
図形を動かしてみよう!‣ 半径と回転スピードを変化させながら、高速回転!!
![Page 99: BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1](https://reader034.vdocuments.site/reader034/viewer/2022042502/547c9641b379596f2b8b4ffd/html5/thumbnails/99.jpg)
休憩