ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編
2 likes1,822 views
2016年7月9日に開催しましたARコンテンツ作成勉強会の資料です。その模様はhttps://togetter.com/li/998068 をご確認ください。#AR_Fukuoka
![演習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軸の位置情報
//半径の情報](https://image.slidesharecdn.com/kinect160709-170224012148/85/AR-Kinect-openFrameworks-39-320.jpg)
![演習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]](https://image.slidesharecdn.com/kinect160709-170224012148/85/AR-Kinect-openFrameworks-40-320.jpg)
![演習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軸の位置、半径を](https://image.slidesharecdn.com/kinect160709-170224012148/85/AR-Kinect-openFrameworks-41-320.jpg)
![演習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個
大きさ、位置が違う](https://image.slidesharecdn.com/kinect160709-170224012148/85/AR-Kinect-openFrameworks-42-320.jpg)
![演習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個
大きさ、位置がう
円に色を塗る](https://image.slidesharecdn.com/kinect160709-170224012148/85/AR-Kinect-openFrameworks-46-320.jpg)
![演習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個
大きさ、位置がう
円に色を塗る](https://image.slidesharecdn.com/kinect160709-170224012148/85/AR-Kinect-openFrameworks-47-320.jpg)
![演習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個
大きさ、位置がう
円に色を塗る](https://image.slidesharecdn.com/kinect160709-170224012148/85/AR-Kinect-openFrameworks-48-320.jpg)
ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編
- 7. 7
- 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/
- 22. プロジェクトをはじめる 22
- 31. 演習1 31 円の数1個
- 32. 32 main.cpp ウィンドウの設定 ofApp.cpp 初期設定や描画、更新を記述 ofApp.h クラスやアドオンの設定 ２つのファイルに記述していく 演習1 円の数1個
- 33. 演習1 33 ofApp.h class ofApp : public ofBaseApp{ public: void setup(); void update(); void draw(); }; 変更なし setup() 初期設定 update() 更新 draw() 描画 円の数1個
- 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. 演習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())
- 37. 演習1 完成 37 円の数1個
- 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. 演習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. 演習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. 演習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個 大きさ、位置が違う
- 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. 演習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. 演習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個 大きさ、位置がう 円に色を塗る
- 57. 57 Open in IDEを選択 Kinect 演習1 RGBカメラを表示
- 59. Kinect 演習1 59 open 接続開始 draw 取得 update 更新 main.cpp ウィンドウサイズの設定 ofApp.h 設定 ofApp.cpp init 初期化 exit 接続終了 RGBカメラを表示
- 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. 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. Kinect 演習1 63 ofApp.cpp void ofApp::setup(){ } ofSetFrameRate(60); //更新を秒間60コマ kinect.open(); //Kinectを接続開始 kinect.init(); //Kinectの初期化 kinect.setRegistration(true); //RGBと赤外線カメラの位置調整 ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
- 64. Kinect 演習1 64 ofApp.cpp void ofApp::draw(){ } // RGBカメラから撮影した映像を取得 kinect.draw(0, 0, kinect.width, kinect.height); void ofApp::update(){ } //状態を更新 kinect.update(); ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
- 65. Kinect 演習1 65 ofApp.cpp void ofApp::exit(){ kinect.close(); //kinectの接続終了 } ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
- 67. Kinect 演習2 67 RGBカメラ 640×480px RGBカメラと 深度カメラを表示 深度カメラ 640×480px
- 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. 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); ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
- 71. Kinect 演習2 71 RGBカメラと 深度カメラを表示 RGBカメラ 640×480px 深度カメラ 640×480px
- 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. 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);
- 78. VJツールとの連携 78
- 85. 85 VJツール連携演習
- 86. VJツール連携演習 86 ofxkinect プロジェクトの作成 ofxSyphon or ofxSpout を追加 kinect_test_01
- 88. 88 VJツール連携演習
- 89. VJツール連携演習 89
- 90. VJツール連携演習 90 ① ②
- 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 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 ofApp.cpp void ofApp::setup(){ ・・・ } Mac/ofxSyphon //syphon mainOutputSyphonServer.setName("Screen Outputh"); client.setup(); client.setApplicationName("Simple Serverh"); client.setServerName(""); VJツール連携演習
- 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
- 98. VJツール連携演習 98
- 100. VJツール連携演習 100
- 104. 延長戦 104
- 105. 105 main.cpp #include "ofMain.h" #include "ofApp.h" int main( ){ ofSetupOpenGL(640,480,OF_WINDOW); ofRunApp(new ofApp()); } 延長戦
- 106. 106 ofApp.h #include “ofxKinect.h” class ofApp : public ofBaseApp{ public: void exit(); void drawPointCloud(); ・・・ ofxkinect kinect; ofEasyCam easyCam; //ドラッグで視線を変更できるカメラ } 延長戦
- 108. 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(); } 延長戦
- 109. 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)); } } } 延長戦
- 110. 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(); //座標位置を復元する } 延長戦
- 111. 延長戦 完成 111