JavaScriptでHarrisオペレータによるコーナー検出

ひさしぶりのブログ。 ブラウザの処理能力の進化を測るには個人的に画像処理が一番わかりやすいです。 今回は画像内にあるオブジェクトのコーナー(corner:頂点, エッジの交点)を検出をしてみます。コーナー検出に用いられる特徴点検出法はいくつか提案されていますが、今回はブラウザ上で実行することを考慮し計算量とメモリ使用量の観点からHarrisオペレータを採用します。 コーナー検出法についてはWikipediaを参考に。 コーナー検出法 – Wikipedia Harrisオペレータは微…

JavaScriptで2D-FFTによるハイパス/ローパスフィルタ

これまでにJavaScriptとHTML5 Canvas APIでいくつかの画像処理を試してきましたが、今回は二次元離散フーリエ変換(2D-DFT、実装上では2D-FFT)で得られた周波数スペクトルにハイパス/ローパスフィルタ(HPF/LPF)を適用します。 「フーリエ変換」は音声処理でよく耳にする単語かと思います。音声データをフーリエ変換してHTML5 Canvas上でビジュアライズするデモもたくさん公開されています(例: Visualizing an audio spectrum &#821…

JavaScriptでステレオ画像処理

過去、OpenCVやFlashで簡単なステレオ画像処理を試してきましたが (ステレオ画像処理, Flashでステレオビジョン入門)、今回はJavaScriptとCanvas APIで同じものを作ってみます。 Demo: HTML5 Stereo Vision Source Code: cv/stereo_matching at master from wellflat/jslib – GitHub ここではKinectのように赤外線センサーはもちろん利用できないので、純粋な画像解析の…

JavaScriptで決定木

前回のAS3でNaive Bayesによる文書分類に関連して機械学習による分類問題を扱います。 今回は決定木(Decision Tree)をCanvasに描いてみます。前回のナイーブベイズよりも決定木の方が解釈が簡単で、分類過程が見た目にも分かりやすいので手軽に試すことができました。今回も理論的な部分はWebや書籍の方を参考にしてもらって、ここでは試したことだけ書きます。 今回扱う問題は集合知プログラミングにある「サインアップを予測する」を取り上げます。これは、あるユーザーがあるWebサービスの…

CanvasとBitmapとよもやま話

久しぶりにフロントエンド寄りのこと。 ウチの会社の制作本部の人達と久しぶりに飲みに行ったので、彼/彼女らの仕事の進め方みたいなものを聞いてきた。一般的なWebサイト制作はもちろん、FlashやJavaScriptなどの技術力も僕より数倍上な人達だ。大きな組織の内でプロのデザイナーとしてたくさんの人と競争し続けてきたわけだから優秀で当たり前なのかもしれない。趣味程度にやってる僕なんかとは違う。 * CanvasとBitmapについて 彼らはしばらくCanvasを使ったアニメーションやゲームなどの案…

HLAC: 高次局所自己相関特徴

今回は画像特徴量の1つである高次局所自己相関特徴 (HLAC: Higher-order Local AutoCorrelation)について。 HLACは画像認識に対する基本的な要望としての位置不変性および加法性を満たすものであり、一次にとどまらない高次の相関に基づく統計的特徴量になっています。現在では様々なHLACの発展系が生まれていますが、今回はその基本となるアルゴリズムについて整理したいと思います。 基本アルゴリズム 自己相関関数を高次に拡張したN次の自己相関関数は、対象となる画像領域内…

Flash, HTML5 Canvas + OpenCV

前回はWSGIアプリケーションからOpenCVを利用する例を挙げましたが、今回はクライアントをFlashとHTML5の両方で試してみます。といっても特別なことをする必要はなくて、公開されたURIからリソースを取得すればいいだけです。 、、 ということで既に先が見えて飽きてしまいましたが、簡単なデモと方針だけでも気力を振り絞って書いておきます。後はアプリ層の方々におまかせ;; OpenCVはPythonバインディングを使いますので、この部分は前回と同じくFlaskを使うことにします。クライアントが…