arコンテンツ作成勉強会 はじめてのkinect openframeworks編
TRANSCRIPT
![Page 1: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/1.jpg)
ARコンテンツ作成勉強会 はじめてのKinect
openFrameworks編
2016年7月9日ARコンテンツ作成勉強会
![Page 2: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/2.jpg)
http://www.vizyoshinaga.sakura.ne.jp/arfukuoka/
#AR_Fukuoka
![Page 3: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/3.jpg)
今回やること
3
openFrameworks IDE(統合開発環境)
コンテンツ制作
Kinect v1
Resolume
VJソフト
連携
モテたい!
![Page 4: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/4.jpg)
Kinectとは
4
2010年、Microsoft社が発売されたXbox360専用のジェスチャー認識できるコントローラとして発売されたセンサー。 カラーと赤外線のカメラが搭載され、カラー、深度、身体の認識ができる。現在は芸術や医療など、さまざまな用途で活用されている。
参照元 http://www.xbox.com/ja-JP/kinect
![Page 5: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/5.jpg)
Kinect ができること
5
![Page 6: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/6.jpg)
Kinect が使えるフレームワーク
6
※一部
![Page 7: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/7.jpg)
7
![Page 8: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/8.jpg)
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/
![Page 9: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/9.jpg)
コミュニティ
9
openFrameworks は世界中のハッカー、アーティスト、デザイナー、 学生、先生などが集まった多様性に富んだコミュニティ。
![Page 10: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/10.jpg)
事例
10参照 http://www.creativeapplications.net/
category/openframeworks/
![Page 11: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/11.jpg)
ライブラリとアドオン
11
オリジナルで制作されたアドオン
パッケージ
http://ofxaddons.com/categories
http://openframeworks.cc/ja/documentation/
![Page 12: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/12.jpg)
12
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
of_v0.9.X_osx_release アドオン保存
プロジェクト保存
example保存
プロジェクト生成
examples example保存
examplesを触ってみよう
![Page 13: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/13.jpg)
13
examples/3d/3DPrimitivesExample
examplesを触ってみよう
フォルダ
![Page 14: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/14.jpg)
examplesを触ってみよう
14
examples/3d/3DPrimitivesExample
![Page 15: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/15.jpg)
15
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。
examplesを触ってみよう
Debug(64 bit)
![Page 16: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/16.jpg)
16
examples/3d/3DPrimitivesExample
examplesを触ってみよう
![Page 17: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/17.jpg)
17
examples/addons/opencvExample
examplesを触ってみよう
![Page 18: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/18.jpg)
examplesを触ってみよう
18
examples/addons/opencvExample
![Page 19: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/19.jpg)
19
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。
examplesを触ってみよう
Debug(64 bit)
![Page 20: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/20.jpg)
20
examples/addons/opencvExample
examplesを触ってみよう
![Page 21: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/21.jpg)
プロジェクトをはじめる
21
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
of_v0.9.X_osx_release アドオン保存
プロジェクト保存
example保存
プロジェクト生成projectGenerator プロジェクト生成
![Page 22: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/22.jpg)
プロジェクトをはじめる
22
![Page 23: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/23.jpg)
プロジェクトをはじめる
23
プロジェクト名(半角英数)
アドオンの追加
プロジェクトの作成
プロジェクト保存先(変更しない)
![Page 24: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/24.jpg)
フォルダ構造
24
of_v0.9.X_osx_release アドオン保存
プロジェクト保存
examples保存
プロジェクト生成
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
![Page 25: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/25.jpg)
フォルダ構造
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
![Page 26: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/26.jpg)
ファイル保存
26
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
of_v0.9.X_osx_release アドオン保存
プロジェクト保存
example保存
プロジェクト生成
apps プロジェクト保存
examples example保存
注意: appsとexamples以外に保存すると動かない
![Page 27: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/27.jpg)
プロジェクトをはじめる
27
test_01
プロジェクトの作成
![Page 28: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/28.jpg)
プロジェクトをはじめる
28
Open in IDEを選択
![Page 29: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/29.jpg)
プロジェクトをはじめる
29
ナビゲーター ツールバー ユーティリティエディター
![Page 30: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/30.jpg)
openFrameworks演習
30
演習1 演習2 演習3
円を描く 円の数を増やす 円に色を塗る
![Page 31: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/31.jpg)
演習1
31
円の数1個
![Page 32: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/32.jpg)
32
main.cpp ウィンドウの設定
ofApp.cpp 初期設定や描画、更新を記述
ofApp.h クラスやアドオンの設定
2つのファイルに記述していく
演習1 円の数1個
![Page 33: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/33.jpg)
演習1
33
ofApp.hclass ofApp : public ofBaseApp{
public: void setup(); void update(); void draw(); }; 変更なし
setup() 初期設定
update() 更新
draw() 描画
円の数1個
![Page 34: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/34.jpg)
演習1
34
ofApp.cppvoid 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個
![Page 35: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/35.jpg)
演習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())
![Page 36: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/36.jpg)
36
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
演習1 円の数1個
![Page 37: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/37.jpg)
演習1 完成
37
円の数1個
![Page 38: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/38.jpg)
演習2
38
円の数101個 大きさ、位置が違う
![Page 39: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/39.jpg)
演習2
39
ofApp.hclass 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軸の位置情報 //半径の情報
![Page 40: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/40.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]
![Page 41: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/41.jpg)
演習2
41
ofApp.cppvoid 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軸の位置、半径を
![Page 42: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/42.jpg)
演習2
42
ofApp.cppvoid 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個 大きさ、位置が違う
![Page 43: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/43.jpg)
43
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
演習2 円の数101個 大きさ、位置が違う
![Page 44: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/44.jpg)
演習2完成
44
円の数101個 大きさ、位置が違う
![Page 45: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/45.jpg)
演習3
45
円の数101個 大きさ、位置がう 円に色を塗る
![Page 46: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/46.jpg)
演習3
46
ofApp.hclass 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個 大きさ、位置がう 円に色を塗る
![Page 47: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/47.jpg)
演習3
47
ofApp.cppvoid 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個 大きさ、位置がう 円に色を塗る
![Page 48: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/48.jpg)
演習3
48
ofApp.cppvoid 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個 大きさ、位置がう 円に色を塗る
![Page 49: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/49.jpg)
49
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
演習3円の数101個 大きさ、位置がう 円に色を塗る
![Page 50: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/50.jpg)
演習3完成
50
円の数101個 大きさ、位置がう 円に色を塗る
![Page 51: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/51.jpg)
51
保存して休憩このあとKinect演習
![Page 52: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/52.jpg)
Kinectとは
52
2010年、Microsoft社が発売されたXbox360専用のジェスチャー認識できるコントローラとして発売されたセンサー。 カラーと赤外線のカメラが搭載され、カラー、深度、身体の認識ができる。現在は芸術や医療など、さまざまな用途で活用されている。
参照元 http://www.xbox.com/ja-JP/kinect
![Page 53: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/53.jpg)
Kinect v1
53
赤外線プロジェクタ
RGBカメラ
赤外線カメラ
チルトモーターマイク(4箇所)
![Page 54: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/54.jpg)
kinect演習
54
演習1 演習2 演習3
RGBカメラを表示 RGB+深度カメラを表示 深度カメラを表示
![Page 55: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/55.jpg)
Kinect 演習1
55
RGBカメラを表示
![Page 56: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/56.jpg)
56
Kinect 演習1
kinect_test_01
プロジェクトの作成
ofxkinect を追加
RGBカメラを表示
![Page 57: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/57.jpg)
57
Open in IDEを選択
Kinect 演習1 RGBカメラを表示
![Page 58: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/58.jpg)
58
Kinect 演習1 RGBカメラを表示
![Page 59: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/59.jpg)
Kinect 演習1
59
open 接続開始
draw 取得
update 更新
main.cpp ウィンドウサイズの設定
ofApp.h 設定
ofApp.cpp init 初期化
exit 接続終了
RGBカメラを表示
![Page 60: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/60.jpg)
Kinect 演習1
60
RGBカメラ 640×480
ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
![Page 61: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/61.jpg)
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);
表示画面サイズ
ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
![Page 62: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/62.jpg)
Kinect 演習1
62
ofApp.h#include “ofxKinect.h” アドオンを追加した際、
必ず明示する
class ofApp : public ofBaseApp{ public: void setup(); void update(); void draw
・・・
}
void exit(); //終了する手続き
ofxKinect kinect; kinectの名前をつける
ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
![Page 63: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/63.jpg)
Kinect 演習1
63
ofApp.cppvoid ofApp::setup(){
}
ofSetFrameRate(60); //更新を秒間60コマ
kinect.open(); //Kinectを接続開始kinect.init(); //Kinectの初期化
kinect.setRegistration(true); //RGBと赤外線カメラの位置調整
ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
![Page 64: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/64.jpg)
Kinect 演習1
64
ofApp.cppvoid ofApp::draw(){
}
// RGBカメラから撮影した映像を取得 kinect.draw(0, 0, kinect.width, kinect.height);
void ofApp::update(){
}
//状態を更新 kinect.update();
ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
![Page 65: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/65.jpg)
Kinect 演習1
65
ofApp.cpp
void ofApp::exit(){
kinect.close(); //kinectの接続終了
}
ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
![Page 66: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/66.jpg)
66
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
Kinect 演習1
![Page 67: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/67.jpg)
Kinect 演習2
67
RGBカメラ 640×480px
RGBカメラと 深度カメラを表示
深度カメラ 640×480px
![Page 68: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/68.jpg)
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);
表示画面サイズ
ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
![Page 69: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/69.jpg)
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);
ウィンドウサイズ 設定 初期化 接続開始 取得 更新 接続終了
![Page 70: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/70.jpg)
70
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
Kinect 演習2
![Page 71: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/71.jpg)
Kinect 演習2
71
RGBカメラと 深度カメラを表示
RGBカメラ 640×480px 深度カメラ 640×480px
![Page 72: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/72.jpg)
Kinect 演習3
72
深度カメラ 640×480
深度カメラを表示
![Page 73: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/73.jpg)
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);
表示画面サイズ
ウィンドウサイズ 設定 初期化 接続開始 描画 更新 接続終了
![Page 74: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/74.jpg)
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);
![Page 75: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/75.jpg)
75
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
Kinect 演習3
![Page 76: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/76.jpg)
Kinect 演習3
76
深度カメラ 640×480
深度カメラを表示
![Page 77: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/77.jpg)
77
保存して休憩このあとKinect演習
![Page 78: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/78.jpg)
VJツールとの連携
78
![Page 79: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/79.jpg)
VJツールとの連携
79
openFrameworks IDE(統合開発環境)
コンテンツ制作
KInect
Resolume
VJソフト
連携
様々なエフェクトを使えて、演出の幅が広がる
oFアドオン Mac/ofxSyphon Win/ofxSpout
![Page 80: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/80.jpg)
VJツールとの連携
80
WindowsMac
Syphon Spout
http://syphon.v002.info/
http://spout.zeal.co/
![Page 81: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/81.jpg)
Mac/ofxSyphonをダウンロード
81
https://github.com/astellato/ofxSyphon
![Page 82: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/82.jpg)
Win/ofxSpoutをダウンロード
82
https://github.com/astellato/ofxSyphon
![Page 83: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/83.jpg)
VJツール連携演習
83
of_v0.9.X_osx_release アドオン保存addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
addons アドオンを保存
![Page 84: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/84.jpg)
84
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
of_v0.9.X_osx_release
プロジェクト生成projectGenerator プロジェクト生成
VJツール連携演習
![Page 85: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/85.jpg)
85
VJツール連携演習
![Page 86: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/86.jpg)
VJツール連携演習
86
ofxkinect
プロジェクトの作成
ofxSyphon or ofxSpout を追加
kinect_test_01
![Page 87: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/87.jpg)
87
Open in IDEを選択
VJツール連携演習
![Page 88: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/88.jpg)
88
VJツール連携演習
![Page 89: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/89.jpg)
VJツール連携演習
89
![Page 90: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/90.jpg)
VJツール連携演習
90
①
②
![Page 91: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/91.jpg)
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ツール連携演習
![Page 92: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/92.jpg)
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ツール連携演習
![Page 93: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/93.jpg)
93
ofApp.cppvoid ofApp::setup(){
・・・
}
Mac/ofxSyphon
//syphon mainOutputSyphonServer.setName("Screen Outputh"); client.setup(); client.setApplicationName("Simple Serverh"); client.setServerName("");
VJツール連携演習
![Page 94: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/94.jpg)
94
ofApp.cppvoid ofApp::setup(){
・・・
//spout ofSetWindowTitle("Sender"); sender.init("Camera"); }
Win/ofxSpout VJツール連携演習
![Page 95: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/95.jpg)
void ofApp::draw(){ ・・・
// 赤外線カメラで撮影した深度カメラ映像を取得 kinect.drawDepth(0, 0, kinect.width, kinect.height);
}
VJツール連携演習
95
ofApp.cpp
//syphon client.draw(50, 50); mainOutputSyphonServer.publishScreen();
Mac/ofxSyphon
![Page 96: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/96.jpg)
VJツール連携演習
96
ofApp.cppvoid ofApp::update(){ ・・・
//spout sender.send(camera.getTexture()); }
Win/ofxSpout
![Page 97: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/97.jpg)
97
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、 デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
VJツール連携演習
![Page 98: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/98.jpg)
VJツール連携演習
98
![Page 99: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/99.jpg)
VJツール連携演習
99
ドラッグアンドドロップ
![Page 100: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/100.jpg)
VJツール連携演習
100
![Page 101: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/101.jpg)
その他との連携
101
連携 連携
※一部※一部
![Page 102: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/102.jpg)
補足
102
ビルド(実行)する前に、デバッグモードにしていことをを、確認。
ビルド(実行)
制作 デバッグ
完成 リリース
binどちらも、 の中に保存される。
![Page 103: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/103.jpg)
![Page 104: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/104.jpg)
延長戦
104
![Page 105: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/105.jpg)
105
main.cpp#include "ofMain.h" #include "ofApp.h"
int main( ){ ofSetupOpenGL(640,480,OF_WINDOW); ofRunApp(new ofApp());
}
延長戦
![Page 106: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/106.jpg)
106
ofApp.h#include “ofxKinect.h”
class ofApp : public ofBaseApp{ public:
void exit(); void drawPointCloud(); ・・・
ofxkinect kinect; ofEasyCam easyCam; //ドラッグで視線を変更できるカメラ
}
延長戦
![Page 107: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/107.jpg)
107
ofApp.cppvoid ofApp::setup(){
kinect.init(); kinect.open();
kinect.setRegistration(true); ofSetFrameRate(60);
ofBackground(0);
}
延長戦
![Page 108: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/108.jpg)
108
ofApp.cppvoid 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();
}
延長戦
![Page 109: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/109.jpg)
109
ofApp.cppvoid 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)); } } }
延長戦
![Page 110: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/110.jpg)
110
ofApp.cppvoid 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(); //座標位置を復元する }
延長戦
![Page 111: ARコンテンツ作成勉強会 はじめてのKinect openFrameworks編](https://reader030.vdocuments.mx/reader030/viewer/2022013106/58ced3be1a28abd4098b5241/html5/thumbnails/111.jpg)
延長戦 完成
111