はじめに
いつもは「創活ノート」でマンガを描いている柳井です。その裏ではゴリゴリとコードを書いています。
今回公開したライブラリ「crocro.jscam」は、Webカメラの情報を取得したり、マーカー情報を取得したりするためのライブラリです。
簡単な設定で「2値化」「ラベリング」「マーカーの取得」を行えます。また、コールバック設定で「Webカメラの画素データ」や「ラベル情報」「マーカー情報」など、多彩な情報を取得できます。
最新のライブラリやサンプルコード、リファレンスは、下記のサイトで公開されています。ソースコード付きのサンプルを見れば、どういったことが行えるのか、イメージがつかめると思います。
というわけで、どういったことができるのかイメージをつかんでもらうために、キャプチャした画像を掲載します。これらは、すべて「フィルター設定」でカメラの挙動を切り替えて行います。
キャプチャ
まずは単純なキャプチャです。Webカメラの画像を取得して、HTML5のCanvas上に描画します。また画像を取得した際は、画素の配列を受け取っています。そのため、グラフィック処理を行いたい際は、直接画素配列を処理対象にすることもできます。
2値化
次は「2値化」です。Webカメラから取得した画像を、白黒の画像に変換します。白黒が反転しているのは、黒い領域の部分をラベルと見なして、あとで色付けを行うためです。
ラベリング
次は「ラベリング」です。2値化した画像を解析して、領域分割を行います。本ライブラリではこの際に、直交座標（正座標）と45度回転した座標（45度座標）での上下左右の端点を取得します。この座標の意味は、後で説明します。
マーカー検出
次は「マーカー検出」です。ラベリングした画像を解析して、マーカーを検出します。ARToolKitとは違い、マーカーの外周をたどって内部を切り抜く形式ではありません。そのため、枠がきれいな四角でなくても、マーカーとして認識させることができます。この仕組みについても後述します。
ドット・パターン検出
最後は「ドット・パターン検出」です。ラベリングした画像を解析して、点のパターンを検出します。柳井オリジナルのマーカー方式です。大きい丸を1、小さい丸を0として、ドットのパターンを検出します。
対象読者
JavaScriptをある程度使いこなせる人、およびHTMLに関して基本的な知識がある人を対象にしています。JavaScript初心者の方は、拙作の「マンガで分かるJavaScript プログラミング講座」も参考にしてください。
必要な環境
Webブラウザとテキストエディタが必要です。また、「crocro.jscam」をダウンロードして入手する必要があります（本記事のファイルよりも最新版の可能性があります）。
本ライブラリは、Webカメラの取得に「jscam.swf」というFlashファイルを、JavaScriptのライブラリとして「jscam.js」というJavaScriptファイルを利用します。
これらのファイルは、HTMLファイルと同じフォルダに置きます（変更の方法はありますが、ここでは解説いたしません）。
