1.
ARコンテンツ作成勉強会
はじめてのKinect
openFrameworks編
2016年7月9日
ARコンテンツ作成勉強会

2.
http://www.vizyoshinaga.sakura.ne.jp/arfukuoka/
#AR_Fukuoka

3.
今回やること
3
openFrameworks IDE(統合開発環境)
コンテンツ制作
Kinect v1
Resolume
VJソフト
連携
モテたい！

4.
Kinectとは
4
2010年、Microsoft社が発売されたXbox360専用のジェスチャー認識でき
るコントローラとして発売されたセンサー。
カラーと赤外線のカメラが搭載され、カラー、深度、身体の認識ができる。
現在は芸術や医療など、さまざまな用途で活用されている。
参照元 http://www.xbox.com/ja-JP/kinect

5.
Kinect ができること
5

6.
Kinect が使えるフレームワーク
6
※一部

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/

9.
コミュニティ
9
openFrameworks は世界中のハッカー、アーティスト、デザイナー、
学生、先生などが集まった多様性に富んだコミュニティ。

10.
事例
10
参照 http://www.creativeapplications.net/
category/openframeworks/

11.
ライブラリとアドオン
11
オリジナルで制作されたアドオン
パッケージ
http://ofxaddons.com/categories
http://openframeworks.cc/ja/documentation/

12.
12
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
of_v0.9.X_osx_release アドオン保存
プロジェクト保存
example保存
プロジェクト生成
examples example保存
examplesを触ってみよう

13.
13
examples/3d/3DPrimitivesExample
examplesを触ってみよう
フォルダ

14.
examplesを触ってみよう
14
examples/3d/3DPrimitivesExample

15.
15
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、
デバッグモードのウィンドウが立ち上がる。
examplesを触ってみよう
Debug(64 bit)

16.
16
examples/3d/3DPrimitivesExample
examplesを触ってみよう

17.
17
examples/addons/opencvExample
examplesを触ってみよう

18.
examplesを触ってみよう
18
examples/addons/opencvExample

19.
19
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、
デバッグモードのウィンドウが立ち上がる。
examplesを触ってみよう
Debug(64 bit)

20.
20
examples/addons/opencvExample
examplesを触ってみよう

21.
プロジェクトをはじめる
21
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
of_v0.9.X_osx_release アドオン保存
プロジェクト保存
example保存
プロジェクト生成projectGenerator プロジェクト生成

22.
プロジェクトをはじめる
22

23.
プロジェクトをはじめる
23
プロジェクト名(半角英数)
アドオンの追加
プロジェクトの作成
プロジェクト保存先(変更しない)

24.
フォルダ構造
24
of_v0.9.X_osx_release アドオン保存
プロジェクト保存
examples保存
プロジェクト生成
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts

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
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
of_v0.9.X_osx_release アドオン保存
プロジェクト保存
example保存
プロジェクト生成
apps プロジェクト保存
examples example保存
注意:
appsとexamples以外
に保存すると動かない

27.
プロジェクトをはじめる
27
test_01
プロジェクトの作成

28.
プロジェクトをはじめる
28
Open in IDEを選択

29.
プロジェクトをはじめる
29
ナビゲーター ツールバー ユーティリティエディター

30.
openFrameworks演習
30
演習1
演習2
演習3
円を描く
円の数を増やす
円に色を塗る

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())

36.
36
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、
デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
演習1
円の数1個

37.
演習1 完成
37
円の数1個

38.
演習2
38
円の数101個
大きさ、位置が違う

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個
大きさ、位置が違う

43.
43
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、
デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
演習2
円の数101個
大きさ、位置が違う

44.
演習2完成
44
円の数101個
大きさ、位置が違う

45.
演習3
45
円の数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個
大きさ、位置がう
円に色を塗る

49.
49
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、
デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
演習3
円の数101個
大きさ、位置がう
円に色を塗る

50.
演習3完成
50
円の数101個
大きさ、位置がう
円に色を塗る

51.
51
保存して休憩
このあとKinect演習

52.
Kinectとは
52
2010年、Microsoft社が発売されたXbox360専用のジェスチャー認識で
きるコントローラとして発売されたセンサー。
カラーと赤外線のカメラが搭載され、カラー、深度、身体の認識ができる。
現在は芸術や医療など、さまざまな用途で活用されている。
参照元 http://www.xbox.com/ja-JP/kinect

53.
Kinect v1
53
赤外線プロジェクタ
RGBカメラ
赤外線カメラ
チルトモーターマイク(4箇所)

54.
kinect演習
54
演習1
演習2
演習3
RGBカメラを表示
RGB+深度カメラを表示
深度カメラを表示

55.
Kinect 演習1
55
RGBカメラを表示

56.
56
Kinect 演習1
kinect_test_01
プロジェクトの作成
ofxkinect を追加
RGBカメラを表示

57.
57
Open in IDEを選択
Kinect 演習1
RGBカメラを表示

58.
58
Kinect 演習1
RGBカメラを表示

59.
Kinect 演習1
59
open 接続開始
draw 取得
update 更新
main.cpp ウィンドウサイズの設定
ofApp.h 設定
ofApp.cpp init 初期化
exit 接続終了
RGBカメラを表示

60.
Kinect 演習1
60
RGBカメラ 640×480
ウィンドウサイズ
設定
初期化
接続開始
取得
更新
接続終了

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の接続終了
}
ウィンドウサイズ
設定
初期化
接続開始
取得
更新
接続終了

66.
66
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、
デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
Kinect 演習1

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);
ウィンドウサイズ
設定
初期化
接続開始
取得
更新
接続終了

70.
70
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、
デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
Kinect 演習2

71.
Kinect 演習2
71
RGBカメラと
深度カメラを表示
RGBカメラ 640×480px 深度カメラ 640×480px

72.
Kinect 演習3
72
深度カメラ 640×480
深度カメラを表示

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);

75.
75
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、
デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
Kinect 演習3

76.
Kinect 演習3
76
深度カメラ 640×480
深度カメラを表示

77.
77
保存して休憩
このあとKinect演習

78.
VJツールとの連携
78

79.
VJツールとの連携
79
openFrameworks IDE(統合開発環境)
コンテンツ制作
KInect
Resolume
VJソフト
連携
様々なエフェクトを使えて、
演出の幅が広がる
oFアドオン
Mac/ofxSyphon
Win/ofxSpout

80.
VJツールとの連携
80
WindowsMac
Syphon Spout
http://
syphon.v002.info/
http://
spout.zeal.co/

81.
Mac/ofxSyphonをダウンロード
81
https://github.com/astellato/ofxSyphon

82.
Win/ofxSpoutをダウンロード
82
https://github.com/astellato/ofxSyphon

83.
VJツール連携演習
83
of_v0.9.X_osx_release アドオン保存addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
addons アドオンを保存

84.
84
addons
apps
docs
examples
export
libs
other
projectGenerator
scripts
of_v0.9.X_osx_release
プロジェクト生成projectGenerator プロジェクト生成
VJツール連携演習

85.
85
VJツール連携演習

86.
VJツール連携演習
86
ofxkinect
プロジェクトの作成
ofxSyphon or ofxSpout を追加
kinect_test_01

87.
87
Open in IDEを選択
VJツール連携演習

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ツール連携演習

94.
94
ofApp.cpp
void ofApp::setup(){
・・・
//spout
ofSetWindowTitle("Sender");
sender.init("Camera");
}
Win/ofxSpout
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

96.
VJツール連携演習
96
ofApp.cpp
void ofApp::update(){
・・・
//spout
sender.send(camera.getTexture());
}
Win/ofxSpout

97.
97
ビルド(実行)する前に、デバッグモードにしていことを、確認。
ビルド(実行)
デバッグがなければ、無事に成功。Build Succeededが表示され、
デバッグモードのウィンドウが立ち上がる。
Debug(64 bit)
VJツール連携演習

98.
VJツール連携演習
98

99.
VJツール連携演習
99
ドラッグアンドドロップ

100.
VJツール連携演習
100

101.
その他との連携
101
連携 連携
※一部※一部

102.
補足
102
ビルド(実行)する前に、デバッグモードにしていことをを、確認。
ビルド(実行)
制作
デバッグ
完成
リリース
binどちらも、 の中に保存される。

103.
延長戦
104

104.
105
main.cpp
#include "ofMain.h"
#include "ofApp.h"
int main( ){
ofSetupOpenGL(640,480,OF_WINDOW);
ofRunApp(new ofApp());
}
延長戦

105.
106
ofApp.h
#include “ofxKinect.h”
class ofApp : public ofBaseApp{
public:
void exit();
void drawPointCloud();
・・・
ofxkinect kinect;
ofEasyCam easyCam; //ドラッグで視線を変更できるカメラ
}
延長戦

106.
107
ofApp.cpp
void ofApp::setup(){
kinect.init();
kinect.open();
kinect.setRegistration(true);
ofSetFrameRate(60);
ofBackground(0);
}
延長戦

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.
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.
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.
延長戦 完成
111