Gunma.web #14で発表したスライド「canvasで遊ぼう！」

遅くなりましたがGunma.web #14で発表したスライドです。

「canvasで遊ぼう！」

HTML5のcanvas要素についての発表を行いました。

スライド内で発表したデモについての簡単な説明。
多分、Chromeでしかうごきません。

・画像処理
canvasを使ってモノクロのコミック画像に自働的に色を付けます。
コアライブラリとしてPixasticを使い、そのプラグインとして「autocolor」を作成しました。
参考
JavaScriptでフォトレタッチ(画像処理）を行うライブラリ「Pixastic」

・動画処理
canvasを15枚ならべて、videoタグから読み込んだ動画のデータをそれぞれ位置をずらして流し込んでいます。
わりと初期の頃に書いたコードなので、いろいろと書き直したいところですが、メンドウなのでそのまま。
canvasを使うと、動画にいろいろな処理を行うことができるので面白いですね。

・Webカメラ処理
webカメラから取り込んだデータをcanvas上で処理し顔検出とヘッドトラッキングを行うライブラリを使って地球儀を回しています。
詳しくは以下で。
JavaScriptでヘッドトラッキング

以上。