OpenCV de Asobu


OpenCVで文字認識してみましたーほぼできました。

久しぶりにOpenCV使ったのでメモ。

1. 導入

VisualStudioの設定

・追加のインクルードディレクトリ
../opencv/build/include

・追加のライブラリディレクトリ
(Win32) ../opencv/build/x86/vc12/lib
(x64) ../opencv/build/x64/vc12/lib

・ビルド後イベント
(Win32) xcopy /Y “..\opencv\build\x86\vc12\bin\*.dll” “$(TargetDir)”
(x64) xcopy /Y “..\opencv\build\x64\vc12\bin\*.dll” “$(TargetDir)”

・ライブラリを追加

#ifdef _DEBUG
#pragma comment(lib, "opencv_core248d.lib")
#pragma comment(lib, "opencv_highgui248d.lib")
#pragma comment(lib, "opencv_imgproc248d.lib")
#else
#pragma comment(lib, "opencv_core248.lib")
#pragma comment(lib, "opencv_highgui248.lib")
#pragma comment(lib, "opencv_imgproc248.lib")
#endif

#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>
#include <opencv2/imgproc/imgproc.hpp>

2. API

・ファイル読み書き
cv::Mat cv::imread(filename);
bool cv::imwrite(filename, image);

・クローン
cv::Mat image.clone();

・二値化
cv::threshold(src, dst, 0, 255, cv::THRESH_BINARY | cv::THRESH_OTSU);

・輪郭抽出
std::vector<std::vector<cv::Point> > contours;
std::vector<cv::Vec4i> hierarchy;
cv::findContours(image, contours, hierarchy, cv::RETR_CCOMP, cv::CHAIN_APPROX_NONE);

・バウンディングボックス取得
cv::Rect cv::boundingRect(std::vector<cv::Point> contour);

・アフィン変換
float angle = 0.0f, scale = 1.0f;
cv::Point2f center(0, 0);
const cv::Mat matrix = cv::getRotationMatrix2D(center, angle, scale);
cv::Mat dst;
cv::warpAffine(src, dst, matrix, src.size());

・テンプレートマッチ
cv::Mat result;
cv::matchTemplate(src, tmp, result, CV_TM_CCOEFF_NORMED);
cv::Point max_pt;
double max_val;
cv::minMaxLoc(result, NULL, &max_val, NULL, &max_pt);

JavaScript Get URL Parameter


JavaScriptでURLからGETパラメータを取得するとき毎回面倒だなーって思ったので、はじめにこういうの入れとくのはどうでしょ。

こうしとけば、あとは$_GET[‘parameter’]で取得できますね!

なんとなく変数はPHP風。

$_GET = new Object();
if (window.location.search.length > 1) {
	var query = window.location.search.substring(1);
	var parameters = query.split('&');
	for (var i = 0; i < parameters.length; ++i) {
		var kv = parameters[i].split('=');
 		if (kv.length >= 2) {
			var name = decodeURIComponent(kv[0]);
			var value = decodeURIComponent(kv[1]);
			$_GET[name] = value;
		}
	}
}

Using Bower


今日はBowerの紹介です。

BowerはTwitter社が作ったフロントエンド用のパッケージマネージャです。

bowerはnpmでインストールできます。
> npm install -g bower

> bower install <パッケージ名>
と実行するだけで、大抵の有名なパッケージがインストールされます。

パッケージインストール先を変える場合は、.bowerrcというファイルをつくり、以下のように指定します。
{
“directory”: “assets/vendors”
}

依存関係のファイルを生成しておくと最新版に更新したりできて便利です。

> bower init
初期化します。初期化するといくつか質問されます。適当に答えるとbower.jsonが生成されます。

インストール時に–saveオプションを付けると自動的にbower.jsonに依存関係が追記されます。

<要約>
npm install -g bower
bower init
bower install <パッケージ名> –save

以上です!

HTML5 Style Tag


HTMLで<style>タグって<head>の中にしか書いちゃだめってずっと思ってたんです。

それが、HTML5からフローコンテンツ(ほぼ全てのbody以下のタグ)の中に<style>タグを埋めれるようになっています。条件はフローコンテンツの直下先頭にあることとscoped属性を付加することです。

scoped属性を付けるとその子要素のみにスタイルがきくようになります。(必須)

<div>ここには空白以外入れちゃダメ
    <style scoped=”scoped”>CSS</style>
   ここの要素にスタイルが適用される
</div>

ただし、現状scoped属性に対応しているブラウザFirefoxのみです。(2014/1/8現在) 対応していないブラウザだと全体適用されてしまいます。

54b062057319ba922e3f97627ebc02f8

以上!すてねこでした!

Futon de Gorogoro OptiX


2日3日と外に遊びに行ったので今日は家でのんびりごろごろです。

最近のすてねこのマイブームのOptiXを簡単に紹介したいと思います。

OptiXNVIDIAレイトレーシングエンジンです。

そもそもレイトレーシングってなんなのでしょう?

現在一般的にゲーム等で使われているのはラスタライズ法というものです。ラスタライズ法高速に3Dを描画するための手法です。

代わってレイトレーシングはより現実的(リアル)に3Dを描画するための手法です。簡単に基本を説明しますと画面の1ドットから光線を飛ばします。その光線と初めに衝突した物体の色を画面の色にします。

ここまでだとラスタライズ法とあまり描画品質は変わりません。レイトレーシングは物体の材質によって衝突した位置から更に光線を飛ばすことができます。

  • 金属や鏡などは光線を反射させて、その先の物体の色と合成してやればいいわけです。
  • ガラスなどの透過される物体の場合は、そこから光線を再追跡し次に衝突した物体と色を合成してやればいいわけです。
  • の描画も光線の再追跡で表現できます。

※ラスタライズ法で反射や透過、影などは表現されません。それぞれ独自のアルゴリズムでそれっぽく表現しています。

実はレイトレーシングは1970年代からありました。ただ処理が重すぎるのでゲームなどのリアルタイムに処理する必要があるものには全く使われていませんでした。ゲームをやっていて描画だけに数秒とかかかってたらカクカクで遊べないわけです。

ところが、最近のパソコンの進化は凄いです。レイトレーシングが高性能なパソコン(GPU)でリアルタイムに動くようになってきています。最近では一部のゲームにもレイトレーシングの技術が使われています。(ラスタライズ法との併用ですが)

NVIDIAさんはもっと簡単に(+高速に)レイトレーシングしたい。レイトレーシングにも専用のパイプラインを作ったらいいんじゃないって思うのです。登場したのがOptiXです。

レイトレーシングの簡単な説明だけで長くなってしまった。。。まだまだ説明すべきことあったのに( >⋏<。) とりあえず今日はこの辺で。

ところで・・・タイトルと内容があってないですね!

追記:タイトルがあってなかったので、タイトルの最後にOptiXを追加しました