文字からユニークなアイコン画像を作ってみるテスト

文字列から一定のアルゴリズムに従って、ユニークな画像を作れないかと思って作ってみました。
イメージとしてはGithubの「Identicon」みたいな感じで、ユーザー名から一意のデフォルトアイコンを生成してくれるやつのもっと複雑版です。

Articon

http://kimihiro-n.appspot.com/static/articon/index.html
JavascriptのCanvasを利用して作ってみたのがこちらです。文字列を入れるとリアルタイムにユニークな画像(アイコン)をを生成します。最初は記事のOGP画像的なのを生成する目的で作ったので
「Article」 + 「Icon」から「Articon」という名前を付けてみました。

文字列から一意な画像をつくるのはMD5みたいなハッシュ関数をつかって、それを元にパラメータを設定していけば簡単ですが、一番肝心な問題は生成された画像の見た目です。完全にアトランダムにしてしまうと色や形がめちゃくちゃになってしまうので実用的ではありません。そこで今回は「HSV色空間を利用する」「形の表現を2つの要素で表す」という方針で画像を生成するようにしました。

HSVという色空間を用いる事で、色の明るさや鮮やかさを変えることなく色相だけを変更することが出来ます。こちらで予め明るさを調整しておくことで、ランダムに色を生成しても変なコントラストが出ることなく画像を生成できます。

また、形に関しても、「細かくて沢山の地味な丸」と「大きくて少ない目立つ丸」の組み合わせで形を表現することで見た目の乱雑さを排除しつつ、ユニークな画像をを生成できるようになりました。

あとは光沢・シャドーを入れたり丸角でカットしたりしてそれっぽさを足しています。アプリのアイコン代わりに使える程立派な見栄えではないですが、デフォルト画像の代わりとしては十分実用的なレベルに達したのではないかと思っています。