PRML読書録（その0）

コンスタントに書く習慣をつけたい今日このごろ。

前回の記事（→WebGLでk-meansをビジュアライズ）ですが、当初の予定ではこれにDirichlet Process Mixtureによるクラスタリングを追加する予定でした。
学生の頃から気になる手法ではあったのですが、ちゃんと追えていなかったので、ここでやろうと。
が、どうにも基礎知識が足りなさすぎて実装の手がかりすらつかめない状況に陥ったので、方針を変えることに。

何をするかといえば、これまた学生の頃から(ry　な、Pattern Recognition and Machine Learning（PRML）^*1をちゃんと読んで、しばらくの間基礎知識の補強期間にしようと思います。
で、その過程で色々実装したものを使って遊んだり、アウトプットしていって、最終的に最近の新しい話題に関するネタをやれる状況を作ろうかなー、と。

ただ、このあたりは既に偉大な先駆者（PRML 読んでやってみた（上巻編）、PRML 読んでやってみた（下巻編））がいらっしゃるので、ちょっと違う観点で実装したり出来ればなぁと考えていたり。^*2

ということで、本来は順番通りに読んでいくべきでしょうけど、DPMに関係の深そうな、HMMとかその辺を中心にやっていこうと思います。
果たして最初のアウトプットはいつになるのか

• *1：amazonだと和書が中古でしか流通していないので、手元にあるのはなぜか洋書。無駄にハードルが…
• *2：実装に使われている言語はRがメインのようなので、numpyで書いてみるとか、実装したお試しコード全部ビジュアライズするとか。

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で可視化する）を発見して(´・ω・｀)ｼｮﾝﾎﾞﾘ
なんか作るときはちゃんと調べてからやりましょうねということで…

プレゼン・各種発表用タイムキーパーツール

月イチとか言いつつ週イチくらいでアウトプットできていて非常によい傾向です。

さて今日は深夜テンションでぱぱっと作ったツールを公開しようかと思います。
https://gist.github.com/lazykyama/5477836
プレゼンや発表会などで使う、タイムキーパー用のツールです。
特徴としては、

1. HTMLファイル一つ（とjQuery）で動くので、特別なインストール作業が不要
2. 背景色で残り時間をお知らせ

といったところでしょうか。
まぁ正直、何番煎じだかすらわかりませんが。

使い方

肝心の使い方ですが、とっても簡単！

1. 上記gistにアクセス
2. HTMLファイルをダウンロード
1. 画面左側の「Download Gist」ボタンをクリックし、ダウンロードした.tar.gzファイルを解凍する
2. または、画面右側の小さい「<>」ボタンからファイルの内容を表示し、右クリックで「ファイルに保存」など
3. ダウンロードしたファイルをGoogle Chromeなどのブラウザにドラッグ＆ドロップ

と、たったこれだけ。

ブラウザで開いた直後の画面はこんな感じで↓

右上の小さい「start/stop」ボタンを押すと、

こんな感じに。

残り1分を切ると、

背景が黄色になって、

制限時間をオーバーすると赤くなります。

最近はブラウザにフルスクリーンモードがあったりするので、発表者の前にPCなどを置いてデカデカと表示してあげるといいんではないでしょうか。

今後ですが、せっかくHTML5で書いているので、この手のツールに必須の音を出す機能を追加したいなと思っていたりします。

が、このへんの予定は未定です。

あと、一晩でぱっと書いたのでコードが汚いのも早いうちにどうにか

複数の色を均等に生成する

コンスタントに色々やる体制が整いつつあるkyamaです。こんばんは。
目指せ月イチアウトプット。

さて今日のお題は、「複数の要素に区別しやすい色を割り当てる方法」です。

いくつかの要素をカテゴリ分けして表示する際などに、カテゴリごとの色を作らないといけない、と言うことはそれなりにあると思います。
プラットフォームやフレームワークなどで提供されていれば悩む必要はないのですが、そういうものがない場合は当然自前で書くことになります。

このとき手っ取り早い方法は、以下の様なコードでランダムに色を選ぶことでしょうか。

var color = {r: 255, g: 255, b: 255};
color.r = Math.round(Math.random() * 255);
color.g = Math.round(Math.random() * 255);
color.b = Math.round(Math.random() * 255);

ただしこれは、重複した色や類似した色が生成されてしまい、実際には使いにくい場面もあります。
そのため、以下の様なコードで、色相を均等に分割して色を割り当てるのが妥当な落とし所ではないかと思っています。

// splitSize: 分割数
// index: 分割されたうちの何番目か
// return: RGBのオブジェクト。0から1までの値をとる。
function pickRGBColorOnCircle(splitSize, index) {
    var interval = 360.0 / splitSize;
    var hue = (index * interval);
    var sat = 1.0;
    var val = 1.0;
 
    // this code written in reference to the following site and Wikipedia.
    // http://www.technotype.net/tutorial/tutorial.php?fileId=%7BImage%20processing%7D&sectionId=%7B-converting-between-rgb-and-hsv-color-space%7D
    var hi = Math.floor(hue / 60.0) % 6;
    var f  = (hue / 60.0) - hi;
    var p  = val * (1.0 - sat);
    var q  = val * (1.0 - sat * f);
    var t  = val * (1.0 - sat * (1.0 - f));
 
    switch(hi) {
    case 0:
        return {
            r: val,
            g: t,
            b: p
        };
    case 1:
        return {
            r: q,
            g: val,
            b: p
        };
    case 2:
        return {
            r: p,
            g: val,
            b: t
        };
    case 3:
        return {
            r: p,
            g: q,
            b: val
        };
    case 4:
        return {
            r: t,
            g: p,
            b: val
        };
    case 5:
        return {
            r: val,
            g: p,
            b: q
        };
    default:
        throw new Error('unexpected error: args = ' + splitSize + ', ' + index);
    }
}

色相を分割する関係上、HSV表色系で色を特定した後にRGBに変換するようにしています。
現状は色相の開始位置を固定していますが、引数にoffsetなどを追加して変更できるようにすれば任意の位置から色の選択を開始できるはずです。

また上記のコードはGistにも置いているので、使いたい方はご自由にお使いください。
　https://gist.github.com/lazykyama/5429907
ライセンスは要らない気もしましたが、一応MITにしています。
ファイル名の変更などもご自由に。

しかしもう完全に備忘録ではなくなってきてますね…

Eclipseの設定デフォルト値（行番号表示・文字コード）を変えたお話

気づけば前回の更新から半年以上…^*1

さて、今回はEclipseのデフォルト設定を変更するところでうまく検索できなかったので、情報を集約すべく記事を書いています。
というか備忘録なので自分用にまとめているだけのはずですが

今回変更したデフォルト設定は以下の2つです。

1. 行番号（行数）表示
2. 文字コード

どちらもワークスペースを切り替えると、逐一変更する必要があって面倒な項目ではないでしょうか？
ということで、以下に内容を記述します。
ほぼ参照元の内容そのままですが。

なお、今回の環境は以下の通り^*2です。

• MacOSX 10.7.5 Lion
• Eclipse 4.2 Juno

行番号表示

行番号表示のデフォルト設定を変更するためには、eclipse.iniの書き換えとplugin_customization.iniの作成（ないし書き換え）が必要とのこと。
以下、具体的な手順です。

1. $(eclipseインストールディレクトリ)/Eclipse.app/Contents/MacOS/直下のeclipse.iniに以下の内容を追加する。追加位置は-vmargsより前。

-pluginCustomization
plugin_customization.ini

2. plugin_customization.iniを、eclipse.iniと同じ場所に作成する。内容は以下の通り。

# line number ruler (default: false)
org.eclipse.ui.editors/lineNumberRuler=true

plugin_customization.iniは、$(eclipseインストールディレクトリ）/plugins/にインストール済みの場合もあるようなので、その場合はコピペ（ないし移動）して使うとよい。

ほかにも色々と設定できるようですが、詳細については参考サイトの方をご覧ください。

参考サイト

• Eclipseの設定のデフォルト値を変更する方法
• [java]Eclipse環境(Java)の設定の手間を省く

文字コード

文字コードのデフォルト値変更は、eclipse.iniを変更するだけでよいようです。
以下のパラメータを-vmargsの直後に追加^*3してください。

-Dfile.encoding=UTF-8

※ UTF-8以外の文字コードを利用される方は、Shift-JISなど、適当な文字列を使ってください

参考サイト

• _ Android開発を行う際の eclipse の便利設定
• Text file encodingの項に記載

以上の設定が完了したら、Eclipseを起動しましょう。
おそらくエディタの左端に行番号が表示され、新規に作成するファイルの文字コードがすべて指定のものになっているはずです。

• *1：この半年で職場が変わったりと色々ありましたが、私は元気ですｗ
• *2：WindowsやLinuxでも、パスを読み替えれば同じ手順で変更できるはずです。
• *3：意味がわかっている方は直後でなくとも良いと思います。