Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編

2016年7月9日に開催しましたARコンテンツ作成勉強会の資料です。その模様はhttps://togetter.com/li/998068 をご確認ください。#AR_Fukuoka

  • Login to see the comments

ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編

  1. 1. ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編 2016年7月9日 ARコンテンツ作成勉強会
  2. 2. http://www.vizyoshinaga.sakura.ne.jp/arfukuoka/ #AR_Fukuoka
  3. 3. 今回やること 3 openFrameworks IDE(統合開発環境) コンテンツ制作 Kinect v1 Resolume VJソフト 連携 モテたい!
  4. 4. Kinectとは 4 2010年、Microsoft社が発売されたXbox360専用のジェスチャー認識でき るコントローラとして発売されたセンサー。 カラーと赤外線のカメラが搭載され、カラー、深度、身体の認識ができる。 現在は芸術や医療など、さまざまな用途で活用されている。 参照元 http://www.xbox.com/ja-JP/kinect
  5. 5. Kinect ができること 5
  6. 6. Kinect が使えるフレームワーク 6 ※一部
  7. 7. 7
  8. 8. openFrameworksとは 8 クリエイティブコーディングのためのC++のオープンソースツールキット。 教育支援ツールとして開発された。現在は、5つのOS(Windows、OSX、 Linux、iOS、Android)と4つの開発環境(XCode、Code::Blocks、 Visual Studio、Eclipse)をサポート。 openFrameworksは、MIT Licenseで配布されており、誰でも自由にいかなる状況でも (商用/ 非商用、公式/非公式、オープンソース/クローズソース) 使用できる。 参照 http://www.creativeapplications.net/ openframeworks/no_thing/
  9. 9. コミュニティ 9 openFrameworks は世界中のハッカー、アーティスト、デザイナー、 学生、先生などが集まった多様性に富んだコミュニティ。
  10. 10. 事例 10 参照 http://www.creativeapplications.net/ category/openframeworks/
  11. 11. ライブラリとアドオン 11 オリジナルで制作されたアドオン パッケージ http://ofxaddons.com/categories http://openframeworks.cc/ja/documentation/
  12. 12. 12 addons apps docs examples export libs other projectGenerator scripts of_v0.9.X_osx_release アドオン保存 プロジェクト保存 example保存 プロジェクト生成 examples     example保存 examplesを触ってみよう
  13. 13. 13 examples/3d/3DPrimitivesExample examplesを触ってみよう フォルダ
  14. 14. examplesを触ってみよう 14 examples/3d/3DPrimitivesExample
  15. 15. 15 ビルド(実行)する前に、デバッグモードにしていことを、確認。 ビルド(実行) デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。 examplesを触ってみよう Debug(64 bit)
  16. 16. 16 examples/3d/3DPrimitivesExample examplesを触ってみよう
  17. 17. 17 examples/addons/opencvExample examplesを触ってみよう
  18. 18. examplesを触ってみよう 18 examples/addons/opencvExample
  19. 19. 19 ビルド(実行)する前に、デバッグモードにしていことを、確認。 ビルド(実行) デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。 examplesを触ってみよう Debug(64 bit)
  20. 20. 20 examples/addons/opencvExample examplesを触ってみよう
  21. 21. プロジェクトをはじめる 21 addons apps docs examples export libs other projectGenerator scripts of_v0.9.X_osx_release アドオン保存 プロジェクト保存 example保存 プロジェクト生成projectGenerator プロジェクト生成
  22. 22. プロジェクトをはじめる 22
  23. 23. プロジェクトをはじめる 23 プロジェクト名(半角英数) アドオンの追加 プロジェクトの作成 プロジェクト保存先(変更しない)
  24. 24. フォルダ構造 24 of_v0.9.X_osx_release アドオン保存 プロジェクト保存 examples保存 プロジェクト生成 addons apps docs examples export libs other projectGenerator scripts
  25. 25. フォルダ構造 25 addons apps docs examples export libs other projectGenerator scripts myApps 新規プロジェクトmyAppsの中に保存 test test.xcodeproj src bin addons.make Project.xcconfig openFrameworks-Info.plist config.make Makefile
  26. 26. ファイル保存 26 addons apps docs examples export libs other projectGenerator scripts of_v0.9.X_osx_release アドオン保存 プロジェクト保存 example保存 プロジェクト生成 apps      プロジェクト保存 examples     example保存 注意: appsとexamples以外 に保存すると動かない
  27. 27. プロジェクトをはじめる 27 test_01 プロジェクトの作成
  28. 28. プロジェクトをはじめる 28 Open in IDEを選択
  29. 29. プロジェクトをはじめる 29 ナビゲーター ツールバー ユーティリティエディター
  30. 30. openFrameworks演習 30 演習1 演習2 演習3 円を描く 円の数を増やす 円に色を塗る
  31. 31. 演習1 31 円の数1個
  32. 32. 32 main.cpp ウィンドウの設定 ofApp.cpp 初期設定や描画、更新を記述 ofApp.h クラスやアドオンの設定 2つのファイルに記述していく 演習1 円の数1個
  33. 33. 演習1 33 ofApp.h class ofApp : public ofBaseApp{ public: void setup(); void update(); void draw(); }; 変更なし setup() 初期設定 update() 更新 draw() 描画 円の数1個
  34. 34. 演習1 34 ofApp.cpp void ofApp::setup(){ } void ofApp::draw(){ } //ofBackground(R, G, B) ofSetColor(255, 255, 255, 100); ofCircle(30, 30, 20); ofBackground(0, 0, 0); //ofSetColor(R, G, B, ALPHA) //ofCircle(x, y, radius) 円の数1個
  35. 35. 演習1 35 X軸(0, 0) Y軸 1,024 px 768 px ofCircle(30, 30, 20); 30px 30px radius 20px 円の数1個 (ofGetWidth(), ofGetHeight()) (ofGetWidth(), 0) (0, ofGetHeight())
  36. 36. 36 ビルド(実行)する前に、デバッグモードにしていことを、確認。 ビルド(実行) デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。 Debug(64 bit) 演習1 円の数1個
  37. 37. 演習1 完成 37 円の数1個
  38. 38. 演習2 38 円の数101個 大きさ、位置が違う
  39. 39. 演習2 39 ofApp.h class ofApp : public ofBaseApp{ public: void setup(); void update(); void draw(); }; 円の数101個 大きさ、位置が違う static const int NUM = 100; float loc_x[NUM]; float loc_y[NUM]; float radius[NUM]; //X軸の位置情報 //Y軸の位置情報 //半径の情報
  40. 40. 演習2 40 配列 NUM = 100 円の数101個 大きさ、位置が違う static const int NUM = 100; float loc_x[NUM]; float loc_y[NUM]; float radius[NUM]; NUM=0 NUM=1 NUM=2 NUM=3 NUM=4 NUM=100 loc_x[0] loc_y[0] radius[0] loc_x[1] loc_y[1] radius[1] loc_x[2] loc_y[2] radius[2] loc_x[3] loc_y[3] radius[3] loc_x[4] loc_y[4] radius[4] loc_x[99] loc_y[99] radius[99]
  41. 41. 演習2 41 ofApp.cpp void ofApp::setup(){ ofBackground(0, 0, 0);  } for (int i = 0; i < NUM; i++) { } loc_x[i] = loc_y[i] = radius[i] = ofRandom(0, ofGetWidth()); ofRandom(0, ofGetHeight()); ofRandom(4, 40); 円の数101個 大きさ、位置が違う 0~NUM個を1つずつ繰り返す X軸とY軸の位置、半径を
  42. 42. 演習2 42 ofApp.cpp void ofApp::draw(){ ofSetColor(255, 255, 255, 100); ofCircle(30, 30, 20); } ofCircle(loc_x[i], loc_y[i], radius[i]); for(int i = 0; i < NUM; i++){ } 円の数101個 大きさ、位置が違う
  43. 43. 43 ビルド(実行)する前に、デバッグモードにしていことを、確認。 ビルド(実行) デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。 Debug(64 bit) 演習2 円の数101個 大きさ、位置が違う
  44. 44. 演習2完成 44 円の数101個 大きさ、位置が違う
  45. 45. 演習3 45 円の数101個 大きさ、位置がう 円に色を塗る
  46. 46. 演習3 46 ofApp.h class ofApp : public ofBaseApp{ ・・・ static const int NUM = 100; float radius[NUM]; float loc_x[NUM]; float loc_y[NUM]; }; int red[NUM]; int green[NUM]; int blue[NUM]; int alpha[NUM]; 円の数101個 大きさ、位置がう 円に色を塗る
  47. 47. 演習3 47 ofApp.cpp void ofApp::setup(){ ・・・ for (int i = 0; i < NUM; i++) { loc_x[i] = ofRandom(0, ofGetWidth()); loc_y[i] = ofRandom(0, ofGetHeight()); radius[i] = ofRandom(4, 40); } } red[i] = ofRandom(0, 255); green[i] = ofRandom(0, 255); blue[i] = ofRandom(0, 255); alpha[i] = ofRandom(100, 200); 円の数101個 大きさ、位置がう 円に色を塗る
  48. 48. 演習3 48 ofApp.cpp void ofApp::draw(){ for(int i = 0; i < NUM; i++){ ofSetColor(255, 255, 255, 100); ofCircle(loc_x[i], loc_y[i], radius[i]); } } ofSetColor(red[i], green[i], blue[i], alpha[i]); 円の数101個 大きさ、位置がう 円に色を塗る
  49. 49. 49 ビルド(実行)する前に、デバッグモードにしていことを、確認。 ビルド(実行) デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。 Debug(64 bit) 演習3 円の数101個 大きさ、位置がう 円に色を塗る
  50. 50. 演習3完成 50 円の数101個 大きさ、位置がう 円に色を塗る
  51. 51. 51 保存して休憩 このあとKinect演習
  52. 52. Kinectとは 52 2010年、Microsoft社が発売されたXbox360専用のジェスチャー認識で きるコントローラとして発売されたセンサー。 カラーと赤外線のカメラが搭載され、カラー、深度、身体の認識ができる。 現在は芸術や医療など、さまざまな用途で活用されている。 参照元 http://www.xbox.com/ja-JP/kinect
  53. 53. Kinect v1 53 赤外線プロジェクタ RGBカメラ 赤外線カメラ チルトモーターマイク(4箇所)
  54. 54. kinect演習 54 演習1 演習2 演習3 RGBカメラを表示 RGB+深度カメラを表示 深度カメラを表示
  55. 55. Kinect 演習1 55 RGBカメラを表示
  56. 56. 56 Kinect 演習1 kinect_test_01 プロジェクトの作成 ofxkinect を追加 RGBカメラを表示
  57. 57. 57 Open in IDEを選択 Kinect 演習1 RGBカメラを表示
  58. 58. 58 Kinect 演習1 RGBカメラを表示
  59. 59. Kinect 演習1 59 open 接続開始 draw 取得 update 更新 main.cpp ウィンドウサイズの設定 ofApp.h 設定 ofApp.cpp init 初期化 exit 接続終了 RGBカメラを表示
  60. 60. Kinect 演習1 60 RGBカメラ 640×480 ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
  61. 61. Kinect 演習1 61 main.cpp #include "ofMain.h" #include "ofApp.h" int main( ){ ofSetupOpenGL(1024,768,OF_WINDOW); ofRunApp(new ofApp()); } ofSetupOpenGL(640,480,OF_WINDOW); 表示画面サイズ ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
  62. 62. Kinect 演習1 62 ofApp.h #include “ofxKinect.h” アドオンを追加した際、 必ず明示する class ofApp : public ofBaseApp{ public: void setup(); void update(); void draw ・・・ } void exit(); //終了する手続き ofxKinect kinect; kinectの名前をつける ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
  63. 63. Kinect 演習1 63 ofApp.cpp void ofApp::setup(){ } ofSetFrameRate(60); //更新を秒間60コマ kinect.open(); //Kinectを接続開始 kinect.init(); //Kinectの初期化 kinect.setRegistration(true); //RGBと赤外線カメラの位置調整 ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
  64. 64. Kinect 演習1 64 ofApp.cpp void ofApp::draw(){ } // RGBカメラから撮影した映像を取得 kinect.draw(0, 0, kinect.width, kinect.height); void ofApp::update(){ } //状態を更新 kinect.update(); ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
  65. 65. Kinect 演習1 65 ofApp.cpp void ofApp::exit(){ kinect.close(); //kinectの接続終了 } ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
  66. 66. 66 ビルド(実行)する前に、デバッグモードにしていことを、確認。 ビルド(実行) デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。 Debug(64 bit) Kinect 演習1
  67. 67. Kinect 演習2 67 RGBカメラ 640×480px RGBカメラと 深度カメラを表示 深度カメラ 640×480px
  68. 68. Kinect 演習2 68 main.cpp #include "ofMain.h" #include "ofApp.h" int main( ){ ofSetupOpenGL(640,480,OF_WINDOW); ofRunApp(new ofApp()); } ofSetupOpenGL(1280,480,OF_WINDOW); 表示画面サイズ ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
  69. 69. Kinect 演習2 69 ofApp.cpp void ofApp::draw(){ // RGBカメラから撮影した映像を取得 kinect.draw(0, 0, kinect.width, kinect.height); } // 赤外線カメラで撮影した深度カメラ映像を取得 kinect.drawDepth(kinect.width, 0, kinect.width, kinect.height); ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
  70. 70. 70 ビルド(実行)する前に、デバッグモードにしていことを、確認。 ビルド(実行) デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。 Debug(64 bit) Kinect 演習2
  71. 71. Kinect 演習2 71 RGBカメラと 深度カメラを表示 RGBカメラ 640×480px 深度カメラ 640×480px
  72. 72. Kinect 演習3 72 深度カメラ 640×480 深度カメラを表示
  73. 73. Kinect 演習3 73 main.cpp #include "ofMain.h" #include "ofApp.h" int main( ){ ofSetupOpenGL(1280,480,OF_WINDOW); ofRunApp(new ofApp()); } ofSetupOpenGL(640,480,OF_WINDOW); 表示画面サイズ ウィンドウサイズ 設定 初期化 接続開始 描画 更新 接続終了
  74. 74. Kinect 演習3 74 ofApp.cpp void ofApp::draw(){ // RGBカメラから撮影した映像を取得 kinect.draw(0, 0, kinect.width, kinect.height); } // 赤外線カメラで撮影した深度カメラ映像を取得 kinect.drawDepth(kinect.width, 0, kinect.width, kinect.height); ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了 //kinect.draw(0, 0, kinect.width, kinect.height); kinect.drawDepth(0, 0, kinect.width, kinect.height);
  75. 75. 75 ビルド(実行)する前に、デバッグモードにしていことを、確認。 ビルド(実行) デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。 Debug(64 bit) Kinect 演習3
  76. 76. Kinect 演習3 76 深度カメラ 640×480 深度カメラを表示
  77. 77. 77 保存して休憩 このあとKinect演習
  78. 78. VJツールとの連携 78
  79. 79. VJツールとの連携 79 openFrameworks IDE(統合開発環境) コンテンツ制作 KInect Resolume VJソフト 連携 様々なエフェクトを使えて、 演出の幅が広がる oFアドオン Mac/ofxSyphon Win/ofxSpout
  80. 80. VJツールとの連携 80 WindowsMac Syphon Spout http:// syphon.v002.info/ http:// spout.zeal.co/
  81. 81. Mac/ofxSyphonをダウンロード 81 https://github.com/astellato/ofxSyphon
  82. 82. Win/ofxSpoutをダウンロード 82 https://github.com/astellato/ofxSyphon
  83. 83. VJツール連携演習 83 of_v0.9.X_osx_release アドオン保存addons apps docs examples export libs other projectGenerator scripts addons  アドオンを保存
  84. 84. 84 addons apps docs examples export libs other projectGenerator scripts of_v0.9.X_osx_release プロジェクト生成projectGenerator プロジェクト生成 VJツール連携演習
  85. 85. 85 VJツール連携演習
  86. 86. VJツール連携演習 86 ofxkinect プロジェクトの作成 ofxSyphon or ofxSpout を追加 kinect_test_01
  87. 87. 87 Open in IDEを選択 VJツール連携演習
  88. 88. 88 VJツール連携演習
  89. 89. VJツール連携演習 89
  90. 90. VJツール連携演習 90 ① ②
  91. 91. 91 ofApp.h #include “ofxKinect.h” class ofApp : public ofBaseApp{ public: void exit(); ・・・ ofxKinect kinect; } Mac/ofxSyphon #include "ofxSyphon.h" //syphon set ofxSyphonServer mainOutputSyphonServer; ofxSyphonClient client; VJツール連携演習
  92. 92. 92 ofApp.h #include “ofxKinect.h” #include "ofxSpout.h" class ofApp : public ofBaseApp{ public: void exit(); ・・・ ofxKinect kinect; //kinectインスタンス int angle; //spout set ofxSpout::Sender sender; } Win/ofxSpout VJツール連携演習
  93. 93. 93 ofApp.cpp void ofApp::setup(){ ・・・ } Mac/ofxSyphon //syphon    mainOutputSyphonServer.setName("Screen Outputh"); client.setup(); client.setApplicationName("Simple Serverh"); client.setServerName(""); VJツール連携演習
  94. 94. 94 ofApp.cpp void ofApp::setup(){ ・・・ //spout ofSetWindowTitle("Sender"); sender.init("Camera"); } Win/ofxSpout VJツール連携演習
  95. 95. void ofApp::draw(){ ・・・ // 赤外線カメラで撮影した深度カメラ映像を取得 kinect.drawDepth(0, 0, kinect.width, kinect.height); } VJツール連携演習 95 ofApp.cpp //syphon client.draw(50, 50); mainOutputSyphonServer.publishScreen(); Mac/ofxSyphon
  96. 96. VJツール連携演習 96 ofApp.cpp void ofApp::update(){ ・・・ //spout sender.send(camera.getTexture()); } Win/ofxSpout
  97. 97. 97 ビルド(実行)する前に、デバッグモードにしていことを、確認。 ビルド(実行) デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。 Debug(64 bit) VJツール連携演習
  98. 98. VJツール連携演習 98
  99. 99. VJツール連携演習 99 ドラッグアンドドロップ
  100. 100. VJツール連携演習 100
  101. 101. その他との連携 101 連携 連携 ※一部※一部
  102. 102. 補足 102 ビルド(実行)する前に、デバッグモードにしていことをを、確認。 ビルド(実行) 制作 デバッグ 完成 リリース binどちらも、 の中に保存される。
  103. 103. 延長戦 104
  104. 104. 105 main.cpp #include "ofMain.h" #include "ofApp.h" int main( ){ ofSetupOpenGL(640,480,OF_WINDOW); ofRunApp(new ofApp()); } 延長戦
  105. 105. 106 ofApp.h #include “ofxKinect.h” class ofApp : public ofBaseApp{ public: void exit(); void drawPointCloud(); ・・・ ofxkinect kinect; ofEasyCam easyCam; //ドラッグで視線を変更できるカメラ } 延長戦
  106. 106. 107 ofApp.cpp void ofApp::setup(){ kinect.init(); kinect.open(); kinect.setRegistration(true); ofSetFrameRate(60); ofBackground(0); } 延長戦
  107. 107. 108 ofApp.cpp void ofApp::draw(){ // Kinectカメラから撮影した映像 // kinect.draw(0, 0, kinect.width, kinect.height); // Kinect深度情報付き映像 // kinect.drawDepth(0, 0, kinect.width, kinect.height); easyCam.begin(); drawPointCloud(); //ポイントクラウドの描画 easyCam.end(); } 延長戦
  108. 108. 109 ofApp.cpp void ofApp::drawPointCloud(){ int w = 640; int h = 480; ofMesh mesh; mesh.setMode(OF_PRIMITIVE_POINTS); int step = 2; //ポイントの間隔 for(int y = 0; y < h; y += step) { for(int x = 0; x < w; x += step) { if(kinect.getDistanceAt(x, y) > 0) { mesh.addColor(kinect.getColorAt(x,y)); mesh.addVertex(kinect.getWorldCoordinateAt(x, y)); } } } 延長戦
  109. 109. 110 ofApp.cpp void ofApp::drawPointCloud(){ glPointSize(3); //ポイントサイズを3 ofPushMatrix(); //現在の座標位置を保存する ofScale(1, -1, -1); //スケール x方向に1、y方向に-1、z方向に-1 ofTranslate(0, 0, -1000); //z方向に -1,000 ofEnableDepthTest(); //深度テストを有効に mesh.drawVertices(); //頂点を描画 ofDisableDepthTest(); //深度テストを無効に ofPopMatrix(); //座標位置を復元する } 延長戦
  110. 110. 延長戦 完成 111

×