2019/02/22に開催したハンズオンの資料。

1. ももち浜TECHカフェ
OpenCVとKinectで作ろう壁面タッチパネル

2. 事前準備

3. Kinect for Windows SDK v1.8
ダウンロード&インストール
https://www.microsoft.com/en-us/download/details.aspx?id=40278

4. Processing 2.2.1
2.2.1をダウンロード&わかりやすい場所に解凍
https://processing.org/download/
バージョン指定あり。要注意

5. SimpleOpenNI-1.96
SimpleOpnNI-2.2.1.zipをダウンロード&
わかりやすい場所に解凍
https://code.google.com/archive/p/simple-openni/downloads
SimpeOpenNI-1.96.zip

6. OpenCV for Processing 0.5.4
バージョン0.5.4のopencv_processing.zipを
ダウンロード&わかりやすい場所に解凍
https://github.com/atduskgreg/opencv-processing/releases
Opencv_processing.zip
(必ずここからDL)

7. SimpleOpenNIとOpenCVのインストール
(1) Processingを一度起動させる
(2) ドキュメントフォルダに[Processing]フォルダができて
いることを確認後、Processingを終了
(3) 上記フォルダ内の[libraries]の中に先ほど解凍した
[opencv_processing]と[SimpleOpenNI]
をフォルダごと移動。
この2つがあればOK

8. 本編

9. 本日のテーマ
KinectなどのRGB-Dセンサを使って壁面をタッチスクリーン化
https://youtu.be/BnFehKnV8Ps

10. Kinect
 Kinect（キネクト）とはMicrosoft社のゲーム機、XBOX360
専用のジェスチャー入力コントローラとして発売された機器
 カラー画像・深度(Depth)情報・身体の認識等が可能
深度センサ(赤外線プロジェクタ＋赤外線カメラ)
カラーカメラ

11. Kinectを用いたコンテンツ開発
↑ カラー画像+距離画像+3D計測
人体認識 →
とC# or C++を使えば開発可能
結構敷居が高い SimpleOpenNIと を使うともっと簡単

12. processingとは
 processingとは、デジタルアートとビジュアルデザインのための
プログラミング言語であり、統合開発環境
 視覚的な表示を簡単に行えるため初心者のプログラミング
学習にも向いている。文法はJavaとほぼ同じ。

13. 今回作成するコンテンツ
https://youtu.be/1AKsLG5tGWE

14. 本日の技術的なテーマ
Depth情報と画像処理による接触検知で骨格追跡の弱点を解決しよう

15. セットアップ
Kinect
壁に平行な
面をスキャン
プロジェクタ

16. 考え方
上向きのKinectに手をかざす Point Cloudで3D化
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
特定平面(垂直)でスキャン
+
Kinectで取得した点群(Point Cloud)と画像処理で壁面をタッチパネル化

17. 準備
まずはProcessingの使い方

18. Processingを起動
実行
テキストエディタ
ここにソースコードを記述
保存
【起動】
 processing
のアイコンを
クリック
【保存】
 保存ボタンを
クリック
 Sample1と
して保存

19. processingでウィンドウを表示させよう
//setup関数内で初期設定
void setup(){
size(256,256); //ウィンドウ内部のサイズ
background(200,200,200); //ウィンドウ内部の色
}
デフォルトでは色をRGBで表現(それぞれ0～255)

20. 基本図形を描画しよう
void setup(){
/*省略(前ページ参照)*/
}
//描画のための関数
void draw(){
//枠線の色
stroke(255,0,0);
//枠線の太さ(pixel)
strokeWeight(10);
//塗りつぶしの色
fill(0,255,255);
//四角形(rectangle)を描画
//rect(x座標,y座標,横幅,縦幅)
rect(10,10,50,50);
}
(x,y)=(10,10)
枠線の色：(255,0,0)=赤
枠線の太さ：10px
塗り色：
(0,255,255)=シアン

21. 他の図形も描いてみよう
void draw(){
//枠線の色
stroke(255,0,0);
//枠線の太さ(pixel)
strokeWeight(10);
//塗りつぶしの色
fill(0,255,255);
//四角形(rectangle)を描画
//rect(x座標,y座標,横幅,縦幅)
rect(10,10,50,50);
}
塗りつぶした円を描画
多角形(三角形)を描画

22. 頂点を指定して図形を描画
【三角形】
strokeWeight(2); //枠線の幅
beginShape(TRIANGLES);
vertex(70, 10);
vertex(70, 60);
vertex(150, 60);
endShape();
(70,10)
(70,60) (150,60)
【点(塗りつぶし円)】
strokeWeight(60); //点の幅(=円の直径)
beginShape(POINTS);
vertex(35,100); //点の中心位置(x,y)
endShape(); 60
60
(35,100)
詳細 https://processing.org/reference/beginShape.html

23. void draw(){
//枠線を描かない
noStroke( );
//以下の図形を半透明の白で塗る
fill(255,255,255,10);
//ウィンドウサイズの四角形
rect(0,0,width,height);
//円を描画
strokeWeight(60);
beginShape(POINTS);
//マウスの位置に描画
vertex(mouseX,mouseY);
endShape(POINTS);
}
インタラクション：マウスに追従
Rectで四角形を描画
自由な多角形(三角形)を描画
薄い白で塗る 円を描く
薄い白で塗る 円を描く
薄い白で塗る 円を描く
draw()
draw()
座標指定
方法を変更

24. 次のプロジェクトの作成
保存新規作成 【新規作成】
 新規ボタンをクリック
 Sample1の内容を
コピー＆ペースト
 setup関数とdraw関数
の内側のコードを消す
【保存】
 保存ボタンをクリック
 Sample2として保存

25. 考え方
上向きのKinectに手をかざす Point Cloudで3D化
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
特定平面(垂直)でスキャン
+

26. 考え方
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
特定平面(垂直)でスキャン
+
上向きのKinectに手をかざす Point Cloudで3D化

27. 準備
PCとKinectを接続

28. Kinectを起動させよう
import SimpleOpenNI.*; //SimpleOpenNIを読み込む
SimpleOpenNI kinect; //Kinectを扱うための変数
void setup(){
//OpenNIおよびKinectを初期化
kinect = new SimpleOpenNI(this);
if(kinect.isInit() == false){
exit();
return;
}
}

29. 確認
赤外線の照射が始まる場合も
エラーが出なければOK

30. KinectのDepth取得と表示の準備
void setup(){
size(640, 480); //640*480で表示
kinect = new SimpleOpenNI(this);
if(kinect.isInit() == false){
exit();
return;
}
kinect.enableDepth(); //Depth画像取得をON
}
void draw(){
kinect.update(); //Kinectから最新情報を取得
PImage depth = kinect.depthImage(); //Depth画像取得
image(depth, 0, 0 ); //Depth画像表示
}

31. 考え方
上向きのKinectに手をかざす
スキャン結果を2値画像化中心っぽい位置を算出投影面に描画
+
Point Cloudで3D化 特定平面(垂直)でスキャン

32. スキャンするラインを表示(補助)
int scanHeight=240; //スキャンする位置(単位：pixel)
void setup(){
/*記述省略*/
}
void draw(){
kinect.update();
PImage depth = kinect.depthImage();
image(depth, 0, 0 );
//スキャンするラインを表示(開発補助のため)
stroke(255,255,255); //線の色=白
strokeWeight(1); //線の太さ=1pixel
line(0, scanHeight, depth.width, scanHeight);
}
始点 終点

33. 動作確認

34. 3次元データ(Point Cloud)を取得
int scanHeight=240; //スキャンする位置(単位：pixel)
void setup(){
/*記述省略*/
}
void draw(){
kinect.update();
PImage depth = kinect.depthImage();
image(depth, 0, 0 );
//スキャンするラインを表示(開発補助のため)
stroke(255,255,255);
strokeWeight(1);
line(0, scanHeight, depth.width, scanHeight);
//Depth画像を3次元データに変換
PVector[] realWorld = kinect.depthMapRealWorld();
}

35. このあと必要な知識
PVector[] realWorld = kinect.depthMapRealWorld();
3次元的に分布している点を一列の配列にどうやって格納している？
[0] [1] [2] [3] [4] ・・・ [n-3] [n-2] [n-1]realWorld

36. 距離画像のデータの並び
P00
(x,y,z)
P01
(x,y,z)
P02
(x,y,z)
P10
(x,y,z)
P11
(x,y,z)
P12
(x,y,z)
P20
(x,y,z)
P21
(x,y,z)
P23
(x,y,z)
【ポイント】
 3次元座標は一次
元配列realWorld
に格納されている
 任意のi,jにおける
のx,y,zを知るには
計算が必要
P00 P01 P02 P10 P11 P12 P20 P21 P22 ・・・
0 1 2
j
0
1
2
i
realWorld
[0] [1] [2] [3] [4] [5] [6] [7] [8] ・・・
j = 0 段目 j = 1 段目 j = 2 段目
ピクセル i, j での3次元座標 → realWorld[ j＊画像の横幅 + i ]
【距離画像】

37. スキャンラインの3次元データを可視化
void draw(){
/*記述省略*/
//Depth画像を3次元データに変換
PVector[] realWorld = kinect.depthMapRealWorld();
stroke(255,0,0); //赤
beginShape(POINTS); //これから点を描画
strokeWeight(10); //サイズは10pixel
for(int i = 0; i < depth.width; i++){ //横一列スキャン
int index = depth.width * scanHeight + i;
PVector p = realWorld[index]; //指定位置の3D座標を取得
vertex(p.x,p.z); //この座標に描く
}
endShape(POINTS); //点の描画終了
}
scanHeight

38. スキャンラインの3次元データを可視化
void draw(){
/*記述省略*/
//Depth画像を3次元データに変換
PVector[] realWorld = kinect.depthMapRealWorld();
stroke(255,0,0); //赤
beginShape(POINTS); //これから点を描画
strokeWeight(10); //サイズは10pixel
for(int i = 0; i < depth.width; i++){ //横一列スキャン
int index = depth.width * scanHeight + i;
PVector p = realWorld[index]; //指定位置の3D座標を取得
vertex(p.x, p.z); //この座標に描く
}
endShape(); //点の描画終了
}
Zは奥行き
X
Y
Z

39. 理想
実際はまだ
表示されない

40. この後やること
Width [pixel]
(x, y, z) [mm]
描画領域の単位[pixel]とPoint Cloudで使われる座標系の単位[mm]を統一
※ z > 400

41. この後やること
(x, y, z) [mm]
nearからfarの距離[mm]をウィンドウや画像の縦のサイズHeight [pixel]に合わせる
near[mm]
far[mm]
Top View
検索領域内の相対位置
p.z − near
far − near

42. スキャンラインの3次元データを可視化
int near=500;
int far=1200;
void draw(){
/*記述省略*/
for(int i = 0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = (p.z - near) / (far - near); //near-far間の相対位置
y = y * height; //ウィンドウの縦方向の座標に変換
vertex(p.x,p.z); //y座標を書き換える
}
endShape(); //点の描画終了
}
vertex(p.x, y); //y座標を書き換える
near[mm]
p.z[mm]
p.z – near [mm]

43. 動作確認
横方向の位置が合わない

44. この後やること
(x, y, z) [mm]
rightからleftの距離[mm]をウィンドウや画像の横のサイズWidth [pixel]に合わせる
right [mm]
Width [pixel]
left [mm]
(right-left) [mm]
検索領域内の相対位置
p.x − left
right − left

45. スキャンラインの3次元データを可視化
int right = 500;
int left = -500;
void draw(){
/*記述省略*/
for(int i = 0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = (p.z - near) / (far - near);
float x = (p.x - left) / (right - left); //left-right間の相対位置
y = y * height;
x = x * width; //ウィンドウの横方向の座標に変換
vertex(p.x, y); //y座標を書き換える
}
/*以下省略*/
vertex(x, y); //x座標を書き換える

46. 動作確認
Kinectを上向きにすると
上下の動きが一致しない
横方向の位置も一致

47. この後やること
p.z − near
far − near
1 -
p.z − near
far − near
ウィンドウ原点
Kinectを中心とした座標からウィンドウ原点(左上)を原点にした座標に変換

48. スキャンラインの3次元データを可視化
int right=500;
int left=-500;
void draw(){
/*記述省略*/
for(int i = 0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = (p.z - near) / (far - near);
float x = (p.x-left) / (right-left);
y = y * depth.height;
x = x * depth.width;
vertex(x, y);
}
/*以下省略*/
float y = 1 - (p.z - near) / (far - near); //上下反転

49. 次のステップに進む前に・・・
保存新規作成 【新規作成】
 新規ボタンをクリック
 Sample2の内容を
コピー＆ペースト
【保存】
 保存ボタンをクリック
 Sample3して保存

50. 考え方
上向きのKinectに手をかざす
中心っぽい位置を算出投影面に描画
+
Point Cloudで3D化
スキャン結果を2値画像化
特定平面(垂直)でスキャン

51. 動作確認用の可視化コードを削除
PVector[] realWorld = kinect.depthMapRealWorld();
stroke(255,0,0);
beginShape(POINTS); //これから点を描画
strokeWeight(10);//サイズは10pixel
for(int i = 0; i < depth.width; i++){ //横一列スキャン
int index = depth.width * scanHeight + i;
PVector p = realWorld[index]; //指定位置の3次元座標を取得
float y = 1 - (p.z - near) / (far - near);
float x = (p.x - left) / (right - left);
y = y * depth.height;
x = x * depth.width;
vertex(x, y); //この座標に描く
}
endShape( ); //点の描画終了
削除
削除
削除

52. スキャンデータの画像化
PImage img = createImage(320, 240, ALPHA); //1ch画像を作成
void draw(){
/*記述省略(Kinect画像を取得したり線を引いたり)*/
img.loadPixels(); //Pixelの読み込み
for (int i = 0; i < img.pixels.length; i++) {
img.pixels[i] = color(0); //画像処理用の画像を黒で初期化
}
PVector[] realWorld = kinect.depthMapRealWorld();
for(int i=0;i<depth.width;i++){
/*画像のスキャンと座標変換処理*/
}
img.updatePixels(); //処理結果を反映
image(img,0,0); //画像を描画
}

53. スキャンデータの画像化
void draw(){
/*記述省略*/
PVector[] realWorld = kinect.depthMapRealWorld();
for(int i = 0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = 1 - (p.z - near) / (far - near);
float x = (p.x - left) / (right - left);
y = y * height;
x = x * width;
}
/*以下省略*/
if(x>0 && x<1 && y>0 && y<1){
}
0 1
0
1
imgのサイズに変更
y = y * img.height; //画像処理用の画像のY座標に変換
x = x * img.width; //画像処理用の画像のX座標に変換

54. スキャンデータの画像化
for(int i =0; i < depth.width; i++){
int index = depth.width * scanHeight + i;
PVector p = realWorld[index];
float y = 1 - (p.z - near) / (far - near);
float x = (p.x - left) / (right - left);
if(x>0 && x<1 && y>0 && y<1){
y = y * img.height;
x = x * img.width;
//画像処理で使う画像の一次元配列のindexに変換
index = ((int)y * img.width + (int)x);
//Depthが検出された箇所を白く塗る
img.pixels[index] = color(255);
}
}

55. 動作確認
もうちょっと太くしたい

56. OpenCVを使用する準備
import SimpleOpenNI.*;
import gab.opencv.*; //OpenCVをインポート
OpenCV cv; //OpenCVを扱う変数
SimpleOpenNI kinect;
PImage img = createImage(320, 240, ALPHA); //処理用画像
void setup(){
size(640,480);
kinect = new SimpleOpenNI(this);
if(kinect.isInit() == false){
exit();
return;
}
kinect.enableDepth();
cv = new OpenCV(this, img.width, img.height);
}
処理する画像の
width,heightを指定

57. 膨張処理による画素の連結
for(int i =0; i < depth.width; i++){
/*省略：座標変換と画像への白画素書き込み*/
}
img.updatePixels();
cv.loadImage(img);
cv.dilate();
cv.dilate();
img = cv.getSnapshot();
image(img,0,0);
http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/index.html
【モルフォロジー演算】
近傍の画素を見比べて白画素の膨張や収縮
を行う処理。(※二値画像の場合)
膨張のことをDilation、収縮のことをErosion
という。また、収縮→膨張の順に処理した場合
をOpening、逆の処理をClosingと呼ぶ。

58. 考え方
上向きのKinectに手をかざす
投影面に描画
Point Cloudで3D化 特定平面(垂直)でスキャン
スキャン結果を2値画像化中心っぽい位置を算出
+

59. 膨張処理による画素の連結
img.updatePixels();
cv.loadImage(img);
cv.dilate();
cv.dilate();
img = cv.getSnapshot();
image(img,0,0);
ArrayList<Contour> contours = cv.findContours(false,true);
if(contours.size() > 0){
java.awt.Rectangle rect = contours.get(0).getBoundingBox();
double cx = rect.getCenterX();
double cy = rect.getCenterY();
cx = width * cx / img.width; //画像処理用の画像→スクリーン変換
cy = height * cy / img.height; //画像処理用の画像→スクリーン変換
fill(255, 0, 0);
ellipse((float)cx, (float)cy ,60 ,60);
}
第1引数：内側の輪郭の検出の有無
第2引数：面積の大きい順にソート

60. いい感じにする
void draw(){
noStroke();
fill(255,255,255,5);
rect(0,0,width,height);
kinect.update();
PImage depth = kinect.depthImage();
image(depth, 0, 0 );
stroke(255,255,255);
strokeWeight(1);
line(0, scanHeight, depth.width, scanHeight);
img.loadPixels();
for (int i = 0; i < img.pixels.length; i++) {
img.pixels[i] = color(0);
}
PVector[] realWorld = kinect.depthMapRealWorld();

61. いい感じにする
void draw(){
noStroke();
fill(255,255,255,5);
rect(0,0,width,height);
kinect.update();
PImage depth = kinect.depthImage();
image(depth, 0, 0 );
stroke(255,255,255);
strokeWeight(1);
line(0, scanHeight, depth.width, scanHeight);
img.loadPixels();
for (int i = 0; i < img.pixels.length; i++) {
img.pixels[i] = color(0);
}
PVector[] realWorld = kinect.depthMapRealWorld();
削除

62. 壁のサイズに合わせる
int near = 550;
int far = 1730;
int right = 960;
int left = -960;
void setup(){
size(1280,800);
/*以下省略*/
}
550
1730

63. 完成