WebGLでk-meansをビジュアライズ

久しぶりの連休！
ということで月イチどころか、週イチでの更新です。珍しい。
多分続かないですが

さて今日は少し前からちまちま作っていたものが形になったので公開してみます。

WebGLでk-meansをビジュアライズ
http://www.lazykyama.jp/ClusteringVisualizer/contents/
はい。タイトルのまんまです。

どういうものかというと、てっく煮ブログさんの以下の記事をパクったにインスパイアされたコンテンツです。

３Ｄ版！「K-Means法」ビジュアライズしてみた

http://tech.nitoyon.com/ja/blog/2009/04/13/kmeans-visualize-3d/ 

内容は機械学習やクラスタリングなどでお馴染み、k-meansの結果をWebGLで可視化する、ということで、インスパイア元とほぼ同じ^*1です。
ちなみに動作確認はChromeでしかやっていないので、他のブラウザの方はご覧頂けないかもしれません。

このコンテンツですが、実際にアクセスすると、

こんな感じで表示されます。

で、nextボタンをポチポチ押していくとクラスタの割り当てが変わっていき、最終的に、

こうなります。
当然回転するので、くるくる回しているだけでも結構楽しいかもしれませんｗ


最後に実装について少し。
今回はWebGLを使ったと書きましたが、実際の描画などはthree.jsを使っています。
色々調べているとWebGLを直で触るのがしんどそうだったので、ライブラリの力を借りました。
OpenGLを少し触っていた事もありますが、サンプルが充実しているので、このくらいの規模なら割と簡単に作れるなー、というのが率直な感想です。
今後はWebGLを使ったサイトも増えてくるんでしょうかね。

• *1：うちの方がアニメーションなどもろもろしょぼいので、正しくは劣化コピー

2013/05/14 追記：
「関連キーワードでググったらどのくらい上に来るかな〜」と、嬉々としてググったところ、全く同じ事をやっている方のブログ（K-means法をHTML5 canvasで可視化する）を発見して(´・ω・｀)ｼｮﾝﾎﾞﾘ
なんか作るときはちゃんと調べてからやりましょうねということで…