Download as PDF, PPTX
![講師、自己紹介
‣ 『Beyond Interaction[改訂第2版] -クリエイティブ・コーディ
ングのためのopenFrameworks実践ガイド』絶賛販売中!!
screenshot_679](https://image.slidesharecdn.com/ofhws01-130803125920-phpapp02/85/BNN-CAMP-vol-3-openFrameworks-1-6-320.jpg)
More Related Content
Similar to BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
BNN CAMP vol.3 インタラクションデザインの現在―プログラミング初心者のためのopenFrameworks入門 1
- 1. BNN CAMP vol.3 インタラクションデザインの現在 プログラミング初心者のための openFrameworks入門- 1 2013年8月3日 田所 淳
- 2.
- 3. Workshop メンバー紹介 ‣ BNNCAMP vol.3 ‣ インタラクションデザインの現在―プログラミング初心者のた めのopenFrameworks入門 ‣ ワークショップの講師担当：田所 淳 ‣ 主催: ビー・エヌ・エヌ新社
- 4. 講師、自己紹介 ‣ 田所淳 (たどころあつし) ‣ クリエイティブ・コーダー ‣ 大学非常勤講師など
- 5.
- 6. 講師、自己紹介 ‣ 『Beyond Interaction[改訂第2版]-クリエイティブ・コーディ ングのためのopenFrameworks実践ガイド』絶賛販売中!! screenshot_679
- 7. Workshop メンバー紹介 ‣ せっかくなので、参加者の方同士知り合いましょう ‣順番に一言ずつ、自己紹介をお願いします ‣ お1人、1分程度で簡単にお願いします
- 8. Workshopの目標 ‣ 前半: openFrameworks入門 ‣開発環境の構築 (Xcode、code::blocks) ‣ サンプルプログラムを動かしてみる ‣ 簡単なアニメーションをつくる ‣ 後半: 構造をつくる ‣ openFrameworksでのプログラムの構造について ‣ 関数、クラス ‣ パーティクルシステムをつくる
- 9.
- 10.
- 11.
- 12. openFrameworks とは? ‣ C++によるクリエイティブなコーディングのためのオープン ソースのツールキット ‣http://openframeworks.cc/ ‣ 現在のバージョンは、v0.7.4
- 13. 事前準備 ‣ 以下のファイルが手元にあるか確認 ‣ openFrameworksv.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.
- 15. 簡単な歴史 ‣ 2004年Zachary Liebermanがニューヨークのパーソンズ美術 大学での大学院のクラスの作品制作のためのツールとして開発 ‣その後、Zachary Lieberman、Theo Watson、Arturo Castroを 主要メンバーとして、世界中の開発者と協力しながら発展
- 16.
- 17. school for poeticcomputation ‣ Zachary Liebermanさん達による新しい学校 ‣ http://sfpc.io/
- 18.
- 19.
- 20. 開発のための「糊」 OpenGL GLUT FreeImageFreeType 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 FreeImageFreeType 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 FreeImageFreeType 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 FreeImageFreeType 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.
- 26.
- 27. openFrameworksをダウンロード ‣ Mac OSXの方 ‣ 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のバージョン ‣ OSX10.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.
- 33. サンプルを実行してみよう!! ‣ サンプルの内容 1of 2 ‣ 3d - 3次元表現いろいろ ‣ addons - 拡張機能のサンプル ‣ communication - 外部デバイスとの通信(シリアル通信) ‣ empty - 制作のテンプレートとなる「空」サンプル ‣ events - イベント(プログラムへの外部からのアクション)処理 ‣ gl - OpenGLの活用(Shader、VBO、カメラなど)
- 34. サンプルを実行してみよう!! ‣ サンプルの内容 2of 2 ‣ graphics - グラフィクスプログラミング ‣ math - 数式による表現、ノイズ、周期など ‣ sound - 音響生成、サウンドファイルの再生 ‣ utils - 補助的な機能の例 ‣ video - 動画の再生、カメラからの入力
- 35. サンプルを実行してみよう!! ‣ 「of_v0.7.4_osx_release/examples/」以下のフォルダ内 ‣ プロジェクトファイル「.xcodeproj」を開く ‣例えば、graphicsExample.xcodeproj ‣ プロジェクトファイルを開くと、自動的にXcodeが起動する
- 36.
- 37.
- 38.
- 39. 実習：いろいろなサンプルを実行してみる ‣ まずは、examples以下のサンプルをいろいろ実行してみま しょう! ‣ いったい何をやっているのかを類推しつつ ‣うまく実行できない場合は、質問してください
- 40.
- 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.
- 46. openFrameworks、フォルダの階層構造 ‣ oFルートフォルダ (oFroot folder) ‣ openFramewroksの一番先頭(root = 根っこ)の階層 oF root folder
- 47. openFrameworks、フォルダの階層構造 ‣ ワークスペース (Workspace) ‣プロジェクトのまとまりを分類して整理 (examples など) Workspace
- 48. openFrameworks、フォルダの階層構造 ‣ プロジェクト群 (Projects) ‣この階層に一つ一つのプロジェクトのフォルダが格納 Projects
- 49. openFrameworks、フォルダの階層構造 ‣ プロジェクト単体 (aproject) ‣ Xcodeのプロジェクトファイルを含んだ単一のプロジェクトの 中身 a project
- 50.
- 51. openFrameworksのコード構造 ‣ さしあたって編集するのは、testApp.hとtestApp.cpp OpenGL GLUTFreeImage 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.
- 53.
- 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" //-------------------------------------------------------------- voidtestApp::setup(){ } //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ } //-------------------------------------------------------------- void testApp::keyPressed(int key){ } //-------------------------------------------------------------- void testApp::keyReleased(int key){ } //--------- 後略 --------- 準備
- 62. testApp.cpp では 準備 #include "testApp.h" //-------------------------------------------------------------- voidtestApp::setup(){ } //-------------------------------------------------------------- void testApp::update(){ } //-------------------------------------------------------------- void testApp::draw(){ } //-------------------------------------------------------------- void testApp::keyPressed(int key){ } //-------------------------------------------------------------- void testApp::keyReleased(int key){ } //--------- 後略 --------- 更新
- 63. testApp.cpp では 準備 #include "testApp.h" //-------------------------------------------------------------- voidtestApp::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. やってみよう!! < 前略 > //-------------------------------------------------------------- voidtestApp::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(){ } //-------------------------------------------------------------- voidtestApp::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" classtestApp : 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.