arコンテンツ作成勉強会はじめてのkinect openframeworks編

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

openFrameworks編

2016年7月9日ARコンテンツ作成勉強会

http://www.vizyoshinaga.sakura.ne.jp/arfukuoka/

#AR_Fukuoka

今回やること

3

openFrameworks IDE(統合開発環境)

コンテンツ制作

Kinect v1

Resolume

VJソフト

連携

モテたい！

Kinectとは

4

2010年、Microsoft社が発売されたXbox360専用のジェスチャー認識できるコントローラとして発売されたセンサー。カラーと赤外線のカメラが搭載され、カラー、深度、身体の認識ができる。現在は芸術や医療など、さまざまな用途で活用されている。

参照元 http://www.xbox.com/ja-JP/kinect

Kinect ができること

5

Kinect が使えるフレームワーク

6

※一部

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

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

事例

10参照　http://www.creativeapplications.net/

category/openframeworks/

ライブラリとアドオン

11

オリジナルで制作されたアドオン

パッケージ

http://ofxaddons.com/categories

http://openframeworks.cc/ja/documentation/

12

addons

apps

docs

examples

export

libs

other

projectGenerator

scripts

of_v0.9.X_osx_release アドオン保存

プロジェクト保存

example保存

プロジェクト生成

examples　　　　 example保存

examplesを触ってみよう

13

examples/3d/3DPrimitivesExample


フォルダ


14


15

ビルド(実行)する前に、デバッグモードにしていことを、確認。

ビルド(実行)

デバッグがなければ、無事に成功。Build Succeededが表示され、デバッグモードのウィンドウが立ち上がる。


Debug(64 bit)

16



17

examples/addons/opencvExample



18


19


ビルド(実行)



Debug(64 bit)

20



プロジェクトをはじめる

21

addons

apps

docs

examples

export

libs

other

projectGenerator

scripts



example保存

プロジェクト生成projectGenerator プロジェクト生成


22


23

プロジェクト名(半角英数)

アドオンの追加

プロジェクトの作成

プロジェクト保存先(変更しない)

フォルダ構造

24



examples保存


addons

apps

docs

examples

export

libs

other

projectGenerator

scripts

フォルダ構造

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

addons

apps

docs

examples

export

libs

other

projectGenerator

scripts



example保存


apps　　　　　　プロジェクト保存

examples　　　　 example保存

注意: appsとexamples以外に保存すると動かない


27

test_01



28

Open in IDEを選択


29

ナビゲーターツールバーユーティリティエディター

openFrameworks演習

30

演習1 演習2 演習3

円を描く円の数を増やす円に色を塗る

演習1

31

円の数1個

32

main.cpp ウィンドウの設定

ofApp.cpp 初期設定や描画、更新を記述

ofApp.h クラスやアドオンの設定

２つのファイルに記述していく

演習1 円の数1個

演習1

33

ofApp.hclass ofApp : public ofBaseApp{

public: void setup(); void update(); void draw(); }; 変更なし

setup() 初期設定

update() 更新

draw() 描画

円の数1個

演習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個

演習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


ビルド(実行)


Debug(64 bit)

演習1 円の数1個

演習1 完成

37

円の数1個

演習2

38

円の数101個大きさ、位置が違う

演習2

39

ofApp.hclass ofApp : public ofBaseApp{

public: void setup();

void update(); void draw();

};


static const int NUM = 100; float loc_x[NUM]; float loc_y[NUM]; float radius[NUM];

//X軸の位置情報 //Y軸の位置情報 //半径の情報

演習2

40

配列 NUM = 100


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]






演習2

41


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


0～NUM個を1つずつ繰り返す

X軸とY軸の位置、半径を

演習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++){

}


43


ビルド(実行)


Debug(64 bit)

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

演習2完成

44


演習3

45

円の数101個大きさ、位置がう円に色を塗る

演習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];


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


演習3

48


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


49


ビルド(実行)


Debug(64 bit)

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

演習3完成

50


51

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

Kinectとは

52

2010年、Microsoft社が発売されたXbox360専用のジェスチャー認識できるコントローラとして発売されたセンサー。カラーと赤外線のカメラが搭載され、カラー、深度、身体の認識ができる。現在は芸術や医療など、さまざまな用途で活用されている。

参照元 http://www.xbox.com/ja-JP/kinect

Kinect v1

53

赤外線プロジェクタ

RGBカメラ

赤外線カメラ

チルトモーターマイク(4箇所)

kinect演習

54

演習1 演習2 演習3

RGBカメラを表示 RGB+深度カメラを表示深度カメラを表示

Kinect 演習1

55

RGBカメラを表示

56

Kinect 演習1

kinect_test_01


ofxkinect を追加


57


Kinect 演習1 RGBカメラを表示

58

Kinect 演習1 RGBカメラを表示

Kinect 演習1

59

open 接続開始

draw 取得

update 更新

main.cpp ウィンドウサイズの設定

ofApp.h 設定

ofApp.cpp init 初期化

exit 接続終了


Kinect 演習1

60

RGBカメラ 640×480

ウィンドウサイズ設定初期化接続開始取得更新接続終了

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

表示画面サイズ


Kinect 演習1

62

ofApp.h#include “ofxKinect.h” アドオンを追加した際、

必ず明示する

class ofApp : public ofBaseApp{ public: void setup(); void update(); void draw

・・・

}

void exit(); //終了する手続き

ofxKinect kinect; kinectの名前をつける


Kinect 演習1

63


}

ofSetFrameRate(60); //更新を秒間60コマ

kinect.open(); //Kinectを接続開始kinect.init(); //Kinectの初期化

kinect.setRegistration(true); //RGBと赤外線カメラの位置調整


Kinect 演習1

64


}

// RGBカメラから撮影した映像を取得 kinect.draw(0, 0, kinect.width, kinect.height);

void ofApp::update(){

}

//状態を更新 kinect.update();


Kinect 演習1

65

ofApp.cpp

void ofApp::exit(){

kinect.close(); //kinectの接続終了

}


66


ビルド(実行)


Debug(64 bit)

Kinect 演習1

Kinect 演習2

67

RGBカメラ 640×480px

RGBカメラと深度カメラを表示

深度カメラ 640×480px

Kinect 演習2

68



}




Kinect 演習2

69

ofApp.cpp

void ofApp::draw(){


}

// 赤外線カメラで撮影した深度カメラ映像を取得 kinect.drawDepth(kinect.width, 0, kinect.width, kinect.height);


70


ビルド(実行)


Debug(64 bit)

Kinect 演習2

Kinect 演習2

71

RGBカメラと深度カメラを表示

RGBカメラ 640×480px 深度カメラ 640×480px

Kinect 演習3

72

深度カメラ 640×480

深度カメラを表示

Kinect 演習3

73



}



ウィンドウサイズ設定初期化接続開始描画更新接続終了

Kinect 演習3

74

ofApp.cpp

void ofApp::draw(){


}

// 赤外線カメラで撮影した深度カメラ映像を取得 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


ビルド(実行)


Debug(64 bit)

Kinect 演習3

Kinect 演習3

76

深度カメラ 640×480

深度カメラを表示

77

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

VJツールとの連携

78


79

openFrameworks IDE(統合開発環境)

コンテンツ制作

KInect

Resolume

VJソフト

連携

様々なエフェクトを使えて、演出の幅が広がる

oFアドオン Mac/ofxSyphon Win/ofxSpout


80

WindowsMac

Syphon Spout

http://syphon.v002.info/

http://spout.zeal.co/

Mac/ofxSyphonをダウンロード

81

https://github.com/astellato/ofxSyphon

Win/ofxSpoutをダウンロード

82

https://github.com/astellato/ofxSyphon

VJツール連携演習

83

of_v0.9.X_osx_release アドオン保存addons

apps

docs

examples

export

libs

other

projectGenerator

scripts

addons 　アドオンを保存

84

addons

apps

docs

examples

export

libs

other

projectGenerator

scripts

of_v0.9.X_osx_release

プロジェクト生成projectGenerator プロジェクト生成


85



86

ofxkinect


ofxSyphon or ofxSpout を追加

kinect_test_01

87



88



89


90

①

②

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;


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


・・・

}

Mac/ofxSyphon

//syphon 　　 mainOutputSyphonServer.setName("Screen Outputh"); client.setup(); client.setApplicationName("Simple Serverh"); client.setServerName("");


94


・・・

//spout ofSetWindowTitle("Sender"); sender.init("Camera"); }

Win/ofxSpout VJツール連携演習

void ofApp::draw(){ ・・・

// 赤外線カメラで撮影した深度カメラ映像を取得 kinect.drawDepth(0, 0, kinect.width, kinect.height);

}


95

ofApp.cpp

//syphon client.draw(50, 50); mainOutputSyphonServer.publishScreen();

Mac/ofxSyphon


96

ofApp.cppvoid ofApp::update(){ ・・・

//spout sender.send(camera.getTexture()); }

Win/ofxSpout

97


ビルド(実行)


Debug(64 bit)



98


99

ドラッグアンドドロップ


100

その他との連携

101

連携連携

※一部※一部

補足

102

ビルド(実行)する前に、デバッグモードにしていことをを、確認。

ビルド(実行)

制作デバッグ

完成リリース

binどちらも、の中に保存される。

延長戦

104

105



}

延長戦

106

ofApp.h#include “ofxKinect.h”

class ofApp : public ofBaseApp{ public:

void exit(); void drawPointCloud(); ・・・

ofxkinect kinect; ofEasyCam easyCam; //ドラッグで視線を変更できるカメラ

}

延長戦

107


kinect.init(); kinect.open();

kinect.setRegistration(true); ofSetFrameRate(60);

ofBackground(0);

}

延長戦

108


// Kinectカメラから撮影した映像 // kinect.draw(0, 0, kinect.width, kinect.height);

// Kinect深度情報付き映像 // kinect.drawDepth(0, 0, kinect.width, kinect.height);

easyCam.begin(); drawPointCloud(); //ポイントクラウドの描画 easyCam.end();

}

延長戦

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

延長戦

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(); //座標位置を復元する }

延長戦

延長戦完成

111

arコンテンツ作成勉強会 はじめてのkinect openframeworks編

Education

arコンテンツ作成勉強会はじめてのkinect openframeworks編