![Timerを用いた更新周期の設定
①Form上をクリック
②Timerが追加される
➂Intervalを30[ms]
に変更(なんでもOK)](https://image.slidesharecdn.com/arfukuokaopencvslideshare-170422071346/85/AR-C-OpenCV-18-320.jpg)
![Formが表示されたらTimerをスタートさせる
①Form1[Design]
②Form1をクリック](https://image.slidesharecdn.com/arfukuokaopencvslideshare-170422071346/85/AR-C-OpenCV-21-320.jpg)
![二値化(ImageProcessing関数内)
src = bgr.CvtColor(ColorConversionCodes.BGR2GRAY);
dst = new Mat(bgr.Height, bgr.Width, MatType.CV_8U);
MatOfByte b_src = new MatOfByte(src);
MatOfByte b_dst = new MatOfByte(dst);
var index_src = b_src.GetIndexer();
var index_dst = b_dst.GetIndexer();
for(int y = 0; y < src.Height; y++)
{
for(int x = 0; x < src.Width; x++)
{
if (index_src[y, x] >= 100)
{
index_dst[y, x] = 255;
}
else
{
index_dst[y, x] = 0;
}
}
}
追加](https://image.slidesharecdn.com/arfukuokaopencvslideshare-170422071346/85/AR-C-OpenCV-35-320.jpg)
![GUIでしきい値(Threshold)を変化させよう
Mat src;
Mat dst;
int th1;
/*省略*/
private void ImageProcessing ()
{
/*省略*/
for(int y = 0; y < src.Height; y++){
for(int x = 0; x < src.Width; x++){
if (index_src[y, x] >= th1){
index_dst[y, x] = 255;
}
else{
index_dst[y, x] = 0;
}
}
}
}
private void trackBar1_Scroll(object sender, EventArgs e)
{
th1 = trackBar1.Value;
}
しきい値をth1に変更
trackBar1_Scroll関数が追加される](https://image.slidesharecdn.com/arfukuokaopencvslideshare-170422071346/85/AR-C-OpenCV-41-320.jpg)
![複数のしきい値を設定しよう
int th1;
int th2 = 255;
/*省略*/
private void ImageProcessing (){
/*省略*/
for(int y = 0; y < src.Height; y++){
for(int x = 0; x < src.Width; x++){
if (index_src[y, x] >= th1 && index_src[y, x] <= th2){
index_dst[y, x] = 255;
}
else{
index_dst[y, x] = 0;
}
}
}
}
/*省略*/
private void trackBar2_Scroll(object sender, EventArgs e){
th2 = trackBar2.Value;
}
2つめのしきい値を設定
trackBar2_Scroll関数が追加される](https://image.slidesharecdn.com/arfukuokaopencvslideshare-170422071346/85/AR-C-OpenCV-45-320.jpg)
![HSV変換と指定範囲の二値化
private void ImageProcessing2()
{
src = bgr.CvtColor(ColorConversionCodes.BGR2HSV);
dst = new Mat(bgr.Height, bgr.Width, MatType.CV_8U);
MatOfByte3 b_src = new MatOfByte3(src);
MatOfByte b_dst = new MatOfByte(dst);
var index_src = b_src.GetIndexer();
var index_dst = b_dst.GetIndexer();
for (int y = 0; y < src.Height; y++)
{
for (int x = 0; x < src.Width; x++)
{
if (index_src[y, x][0] >= th1 && index_src[y, x][0] <= th2)
{
index_dst[y, x] = 255;
}
else
{
index_dst[y, x] = 0;
}
/*以下省略*/
①変換方法を変更
②MatOfByte3に変更
③ index_src[y, x][0]](https://image.slidesharecdn.com/arfukuokaopencvslideshare-170422071346/85/AR-C-OpenCV-49-320.jpg)
![複数のしきい値を設定しよう
int th2 = 255;
int th3;
/*省略*/
private void ImageProcessing2 (){
/*省略*/
for(int y = 0; y < src.Height; y++){
for(int x = 0; x < src.Width; x++){
if (index_src[y, x][0] >= th1 && index_src[y, x][0] <= th2
&& index_src[y, x][1] >= th3){
index_dst[y, x] = 255;
}
else{
index_dst[y, x] = 0;
}
}
}
}
/*省略*/
private void trackBar3_Scroll(object sender, EventArgs e){
th3 = trackBar3.Value;
}
3つめのしきい値を設定
trackBar3_Scroll関数が追加される](https://image.slidesharecdn.com/arfukuokaopencvslideshare-170422071346/85/AR-C-OpenCV-53-320.jpg)
![線を描く
List<OpenCvSharp.Point2d> list = new List<OpenCvSharp.Point2d>();
private void ImageProcessing2(){
/*省略(HSV変換から二値化、ノイズ除去まで)*/
ConnectedComponents cc = Cv2.ConnectedComponentsEx(dst);
if (cc.Blobs.Count > 0){
ConnectedComponents.Blob blob = cc.GetLargestBlob();
if (blob.Area > 2000){
list.Add(blob.Centroid);
for (int i = 1; i < list.Count; i++)
{
bgr.Line(list[i - 1], list[i], Scalar.Red, 3);
}
if (list.Count > 20)
{
list.RemoveAt(0);
}
}
}
this.Text = th1 * 2 + "~" + th2 * 2+": "+th3;
}
追
加](https://image.slidesharecdn.com/arfukuokaopencvslideshare-170422071346/85/AR-C-OpenCV-59-320.jpg)
ARコンテンツ作成勉強会：C#ではじめようOpenCV(カラートラッキング編)
- 2. 今回の内容 (for Slide Share) OpenCVを使ったカラートラッキングをやります ただし・・・ 画像処理プログラミングの基礎も勉強するため ストレートに目的コンテンツには到達しません あらかじめご了承ください
- 6. プロジェクトを作成 (2/2) ①VisualC# ②Windows ③Windows Form Application ④OK
- 7. 動作確認 Start
- 8. OpenCvSharpの導入 (1/4) ①Tools ②NuGet Package Manager ③Manage Nuget Package...
- 23. Formが表示されたらTimerをスタートさせる namespace CVTest { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void timer1_Tick(object sender, EventArgs e) { } private void Form1_Shown(object sender, EventArgs e) { timer1.Start(); //タイマーの動作を開始 } } } ①Form1_Shownが追加される ②自分で追加
- 24. Webカメラの画像を取得 using OpenCvSharp; //OpenCvSharpの機能をインポート using OpenCvSharp.Extensions; namespace CVTest { public partial class Form1 : Form { VideoCapture video = new VideoCapture(0); //Videoキャプチャ Mat bgr; //カラー画像を扱うクラス public Form1() { InitializeComponent(); } private void timer1_Tick(object sender, EventArgs e) { } /*****以下省略*****/
- 25. Webカメラの画像を取得 VideoCapture video = new VideoCapture(0);; Mat bgr; public Form1() { InitializeComponent(); } private void timer1_Tick(object sender, EventArgs e) { bgr = video.RetrieveMat(); //カメラから画像を取得しbgrに記録 pictureBox1.BackgroundImage = bgr.ToBitmap(); bgr.Release(); //画像を記録したメモリを開放 } private void Form1_Shown(object sender, EventArgs e) { timer1.Start(); }
- 26. 画像を左右反転させよう private void timer1_Tick(object sender, EventArgs e) { bgr = video.RetrieveMat(); bgr=bgr.Flip(FlipMode.Y); pictureBox1.BackgroundImage = bgr.ToBitmap(); bgr.Release(); } x y Flip
- 29. 画像処理用の画像を作成 VideoCapture video; Mat bgr; Mat src; //画像処理に用いる画像を保持 public Form1(){ /*省略*/ } private void timer1_Tick(object sender, EventArgs e) { bgr = video.RetrieveMat(); bgr=bgr.Flip(FlipMode.Y); ImageProcessing(); pictureBox1.BackgroundImage = bgr.ToBitmap(); pictureBox2.BackgroundImage = src.ToBitmap(); bgr.Release(); src.Release(); } //以下の関数に画像処理のコードを書いていく private void ImageProcessing() { src = bgr.Clone(); }
- 30. 動作確認
- 31. OpenCVに慣れよう：グレースケール変換 Mat bgr; Mat src; //画像処理に用いる画像を保持 public Form1(){ /*省略*/ } private void timer1_Tick(object sender, EventArgs e) { bgr = video.RetrieveMat(); bgr=bgr.Flip(FlipMode.Y); ImageProcessing(); pictureBox1.BackgroundImage = bgr.ToBitmap(); pictureBox2.BackgroundImage = src.ToBitmap(); bgr.Release(); src.Release(); } private void ImageProcessing() { src = bgr.Clone(); src = bgr.CvtColor(ColorConversionCodes.BGR2GRAY); } CvtColorで画像変換
- 32. 動作確認
- 34. 二値化の下準備 dstを表示 Mat src; //画像処理に用いる画像を保持 Mat dst; //二値化結果を保持 private void timer1_Tick(object sender, EventArgs e) { bgr = video.RetrieveMat(); bgr=bgr.Flip(FlipMode.Y); ImageProcessing(); pictureBox1.BackgroundImage = bgr.ToBitmap(); pictureBox2.BackgroundImage = dst.ToBitmap(); bgr.Release(); src.Release(); dst.Release(); } private void ImageProcessing() { src = bgr.CvtColor(ColorConversionCodes.BGR2GRAY); dst = new Mat(bgr.Height, bgr.Width, MatType.CV_8U); } 符号なし8bit(0~255)
- 35. 二値化(ImageProcessing関数内) src = bgr.CvtColor(ColorConversionCodes.BGR2GRAY); dst = new Mat(bgr.Height, bgr.Width, MatType.CV_8U); MatOfByte b_src = new MatOfByte(src); MatOfByte b_dst = new MatOfByte(dst); var index_src = b_src.GetIndexer(); var index_dst = b_dst.GetIndexer(); for(int y = 0; y < src.Height; y++) { for(int x = 0; x < src.Width; x++) { if (index_src[y, x] >= 100) { index_dst[y, x] = 255; } else { index_dst[y, x] = 0; } } } 追加
- 36. 動作確認
- 41. GUIでしきい値(Threshold)を変化させよう Mat src; Mat dst; int th1; /*省略*/ private void ImageProcessing () { /*省略*/ for(int y = 0; y < src.Height; y++){ for(int x = 0; x < src.Width; x++){ if (index_src[y, x] >= th1){ index_dst[y, x] = 255; } else{ index_dst[y, x] = 0; } } } } private void trackBar1_Scroll(object sender, EventArgs e) { th1 = trackBar1.Value; } しきい値をth1に変更 trackBar1_Scroll関数が追加される
- 45. 複数のしきい値を設定しよう int th1; int th2 = 255; /*省略*/ private void ImageProcessing (){ /*省略*/ for(int y = 0; y < src.Height; y++){ for(int x = 0; x < src.Width; x++){ if (index_src[y, x] >= th1 && index_src[y, x] <= th2){ index_dst[y, x] = 255; } else{ index_dst[y, x] = 0; } } } } /*省略*/ private void trackBar2_Scroll(object sender, EventArgs e){ th2 = trackBar2.Value; } 2つめのしきい値を設定 trackBar2_Scroll関数が追加される
- 46. 動作確認
- 47. 色の抽出をしよう 【問題点】 GrayScaleの場合は1変数なので抽出が容易 色をR(赤)G(緑)B(青)での組み合わせで表現 した場合、特定の色の抽出はちょっと面倒。 RGBでは色の境目を直線的に引くことも困難 【解決策】 色空間としてHSVを使用する H(Hue)は色相で0~360°で表現される ※OpenCVの場合0~180 S(Saturation)は彩度、0~100％で表現。 値が大きいほうがその色らしさが強い。 ※OpenCVの場合0~255 V(Value)は明度、 0~100％で表現。 値が大きいほど明るい ※OpenCVの場合0~255 GrayScale RGB HSV
- 48. 色検出用の関数を作成 private void timer1_Tick(object sender, EventArgs e) { bgr = video.RetrieveMat(); bgr=bgr.Flip(FlipMode.Y); ImageProcessing2(); pictureBox1.BackgroundImage = bgr.ToBitmap(); pictureBox2.BackgroundImage = dst.ToBitmap(); bgr.Release(); src.Release(); dst.Release(); } private void ImageProcessing() { /*二値化処理*/ } private void ImageProcessing2() { /*二値化処理*/ } GrayScaleの二値化を行うImageProcessing関数をサンプルとして取っておく場合 ②ImageProcessing2に変更 ①コピペした後、関数名を ImageProcessing2に変更
- 49. HSV変換と指定範囲の二値化 private void ImageProcessing2() { src = bgr.CvtColor(ColorConversionCodes.BGR2HSV); dst = new Mat(bgr.Height, bgr.Width, MatType.CV_8U); MatOfByte3 b_src = new MatOfByte3(src); MatOfByte b_dst = new MatOfByte(dst); var index_src = b_src.GetIndexer(); var index_dst = b_dst.GetIndexer(); for (int y = 0; y < src.Height; y++) { for (int x = 0; x < src.Width; x++) { if (index_src[y, x][0] >= th1 && index_src[y, x][0] <= th2) { index_dst[y, x] = 255; } else { index_dst[y, x] = 0; } /*以下省略*/ ①変換方法を変更 ②MatOfByte3に変更 ③ index_src[y, x][0]
- 50. 抽出したい色のHueの確認 private void ImageProcessing2() { src = bgr.CvtColor(ColorConversionCodes.BGR2HSV); dst = new Mat(bgr.Height, bgr.Width, MatType.CV_8U); MatOfByte3 b_src = new MatOfByte3(src); MatOfByte b_dst = new MatOfByte(dst); /*省略(二値化処理など)*/ this.Text = th1 * 2 + “~” + th2 * 2; //Hueの範囲を表示 } 抽出したい色に 関するHueの範囲を メモしておこう
- 53. 複数のしきい値を設定しよう int th2 = 255; int th3; /*省略*/ private void ImageProcessing2 (){ /*省略*/ for(int y = 0; y < src.Height; y++){ for(int x = 0; x < src.Width; x++){ if (index_src[y, x][0] >= th1 && index_src[y, x][0] <= th2 && index_src[y, x][1] >= th3){ index_dst[y, x] = 255; } else{ index_dst[y, x] = 0; } } } } /*省略*/ private void trackBar3_Scroll(object sender, EventArgs e){ th3 = trackBar3.Value; } 3つめのしきい値を設定 trackBar3_Scroll関数が追加される
- 54. 抽出したい色のSaturationの確認 private void ImageProcessing2() { src = bgr.CvtColor(ColorConversionCodes.BGR2HSV); dst = new Mat(bgr.Height, bgr.Width, MatType.CV_8U); MatOfByte3 b_src = new MatOfByte3(src); MatOfByte b_dst = new MatOfByte(dst); /*省略(二値化処理など)*/ this.Text = th1 * 2 + "~" + th2 * 2 + ": " + th3; } 抽出したい色に 関するSの値を メモしておこう
- 55. 動作確認 ノイズが残ることもある
- 56. Erodeを用いたノイズ除去 private void ImageProcessing2() { src = bgr.CvtColor(ColorConversionCodes.BGR2HSV); dst = new Mat(bgr.Height, bgr.Width, MatType.CV_8U); /*省略(二値化処理など)*/ dst = dst.Erode(null,null,2); this.Text = th1 * 2 + "~" + th2 * 2+": "+th3; } 白画素の縮小を2回行う http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/index.html 成功例 やり過ぎ例
- 57. 白画素の中から面積最大のもの(Blob)を探す private void ImageProcessing2() { /*省略(HSV変換から二値化まで)*/ dst = dst.Erode(null, null, 2); ConnectedComponents cc = Cv2.ConnectedComponentsEx(dst); if (cc.Blobs.Count > 0) //0で落ちる場合は1に変更 { ConnectedComponents.Blob blob = cc.GetLargestBlob(); if (blob.Area > 2000) { bgr.Circle(blob.Centroid, 30, Scalar.Cyan, 4); } } this.Text = th1 * 2 + "~" + th2 * 2+": "+th3; } 追 加
- 58. 動作確認 円がついてくるはず
- 59. 線を描く List<OpenCvSharp.Point2d> list = new List<OpenCvSharp.Point2d>(); private void ImageProcessing2(){ /*省略(HSV変換から二値化、ノイズ除去まで)*/ ConnectedComponents cc = Cv2.ConnectedComponentsEx(dst); if (cc.Blobs.Count > 0){ ConnectedComponents.Blob blob = cc.GetLargestBlob(); if (blob.Area > 2000){ list.Add(blob.Centroid); for (int i = 1; i < list.Count; i++) { bgr.Line(list[i - 1], list[i], Scalar.Red, 3); } if (list.Count > 20) { list.RemoveAt(0); } } } this.Text = th1 * 2 + "~" + th2 * 2+": "+th3; } 追 加
- 60. 完成