openframeworksでの輪郭線の表示のされ方に困っています

Question

前提・実現したいこと

openframeworksで輪郭線が壁の役割となって落ちてくるボールを弾きたい。輪郭線はポリゴン図形だと計算量が多くコマ落ちが発生してしまうらしいので、輪郭線に等間隔に円を配置してその円に当たるとボールが弾くようにしたい。画面のサイズや描画の問題かと思いまいしたが分からないのでご教授お願い致します。
visual studio 2017使用
openframeworks0.10.1使用　アドオンはofxBox2DとofxOpenCVを使用

発生している問題・エラーメッセージ

輪郭線に円を配置するが、その表示が画面の左上に表示されてしまう。
以下のように左上に輪ゴムの輪郭に円を配置したものが表示される。また、輪郭が二つ出てしまっている。実際は実際の輪ゴムの周りに等間隔に配置した円が表示されるようにしたい。

該当のソースコード

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup() {
	ofSetFrameRate(60);
	ofBackground(0, 0, 0);

	vidGrabber.listDevices();//デバイスリスト
	vidGrabber.setDeviceID(0);//デバイスのID選択

	//幅320pixel、高さ240pixelでビデオ取り込み初期化
	vidGrabber.initGrabber(320, 240);
	//OpenCVで解析する320pixel x 240pixelのカラー画像の領域を確保
	colorImg.allocate(320, 240);
	//OpenCVで解析する320pixel x 240pixelのグレースケール画像の領域を確保
	grayImage.allocate(320, 240);
	//背景画像として320pixel x 240pixelのグレースケール画像の領域を確保
	grayBg.allocate(320, 240);
	//背景との差分画像として320pixel x 240pixelのグレースケール画像の領域を確保
	grayDiff.allocate(320, 240);
	//閾値を100に
	threshold = 100;

	//Box2D初期設定
	box2d.init(); //Box2Dの世界を初期化
	box2d.setGravity(0, 5); //重力を設定、下に5の力
	box2d.createBounds(0, 0, ofGetWidth(), ofGetHeight()); //画面を壁で囲む
	box2d.setFPS(30); //30fpsで表示
	box2d.checkBounds(true);
}

//--------------------------------------------------------------
void ofApp::update() {
	//box2d更新
	box2d.update();

	//新規にフレームを取り込んだかを判定する変数
	bool bNewFrame = false;
	//最後に取り込んだフレームから変化があったかを判定
	vidGrabber.update();
	bNewFrame = vidGrabber.isFrameNew();

	//新規のフレームの場合とりこみ実行
	if (bNewFrame) {
		//OpenCVで解析するカラー画像領域に取得した映像を格納
		colorImg.setFromPixels(vidGrabber.getPixels().getData(), 320, 240);
		//取り込んだカラー映像をグレースケールに変換
		grayImage = colorImg;
		//背景画像と現在の画像の差分の絶対値を取得
		grayDiff.absDiff(grayBg, grayImage);
		//差分画像を設定した閾値を境に二値化
		grayDiff.threshold(threshold);
		//二値化した差分画像から、輪郭を抽出する(最小領域 20 ピクセルで最大領域は画面の 1/3 となる連続領域（blob）から最大のものを 10 個まで取り出す)
		contourFinder.findContours(grayDiff, 20, (320 * 240) / 3, 10, false);
		//境界線の円をクリア
		for (int i = 0; i < contourCircles.size(); i++) {
			contourCircles[i].get()->destroy();
		}
		contourCircles.clear();
		//検出された物体(Blobs)の数だけ分析
		for (int i = 0; i < contourFinder.nBlobs; i++) {
			for (int j = 0; j < contourFinder.blobs[i].pts.size(); j += 4) {
				//輪郭線にそって等間隔に座標を抽出
				ofPoint pos = contourFinder.blobs[i].pts[j];
				//輪郭線に並べるofxBox2dCircleを追加
				ofPtr<ofxBox2dCircle> ContourCircles = ofPtr<ofxBox2dCircle>(new ofxBox2dCircle);
				ContourCircles.get()->setup(box2d.getWorld(), pos.x, pos.y, 4);
				//Vector配列contourCirclesに追加
				contourCircles.push_back(ContourCircles);
			}
		}
	}
}

//--------------------------------------------------------------
void ofApp::draw() {
	//画面に対する映像の比率を計算
	float ratioX = ofGetWidth() / 320;
	float ratioY = ofGetHeight() / 240;


	//検出した解析結果を表示
	ofPushMatrix();
	//画面サイズいっぱいに表示されるようリスケール
	ofScale((float)ofGetWidth() / (float)grayDiff.width, (float)ofGetHeight() / (float)grayDiff.height);
	//ソースの映像を描画
	ofSetColor(255, 255, 255);
	colorImg.draw(0, 0);
	//解析結果を描画
	contourFinder.draw();
	//境界線の円を描画
	ofNoFill();
	ofSetColor(255, 0, 0);
	for (int i = 0; i < contourCircles.size(); i++) {
		contourCircles[i]->draw();
		for (int i = 0; i < contourFinder.nBlobs; i++) {
			contourFinder.blobs[i].draw(360, 540);
		}

Answer 1

位置がずれているのは描画する画像と解析結果の描画のスケールが合っていないことが原因の一つかと思われます。
一度 ofScale((float)ofGetWidth() / (float)grayDiff.width, (float)ofGetHeight() / (float)grayDiff.height)をコメントアウトして実行してみてください。

ソース全文がないので推測ですが、輪郭が二つ描画されているのはおそらく描画する関数を別の場所で2回呼び出している可能性が高いです。
ソースコードは書いた通りに動きますので、前回と同様一つ一つの関数の役割を理解していくと解決が早くなります。

Comments

[nggn64]

返信ありがとうございます。
ofScale((float)ofGetWidth() / (float)grayDiff.width, (float)ofGetHeight() / (float)grayDiff.height)のコメントアウトとモニタ画面表示を調節したところ上手く表示されるようになりました。
また、境界線の円を描画の
for (int i = 0; i < contourFinder.nBlobs; i++) {
contourFinder.blobs[i].draw(360, 540);
}
のところをコメントアウトにして実行したところ輪郭を１つだけ出すことができました。
毎回的確に問題の原因を指摘してくださり、本当に勉強になります。ありがとうございました。