突然ですが、上の画像は GitHub の初期アイコンです。先日、某氏との Twitter でのやりとりで、ふとこの画像の生成方法について気になったので、いろいろと調べてみました。そのまとめです。
まず、以下が GitHub のブログで紹介されていた記事です。
5×5 ピクセルで、ユーザの ID に基づいてハッシュを生成して、偶数だったらオン、奇数だったらオフ、色もハッシュから決定している、位しか分かりません。
さて、ググりましょう。役だったのは以下の 2 つのページです。
infinitemule/github-identicons
dgraham/identicon
1 つ目のページは、形の生成方法を知るのに役立ちましたが、色が分かりませんでした。そして、 2 つ目のページは、 1 つ目のページで形は出来ていたので、色の生成方法のみ参考にしました。結局、生成方法をまとめると以下の通りです。
- ユーザ ID （ユーザ名じゃなくてシステムが作る連番）を MD5 します。ユーザのアイコンの URL に用いられていたりするので、すぐに分かると思います。
- MD5 の先頭 15 文字を使って形を作ります。偶数ならばオン、奇数ならばオフで、順番は真ん中の列の上から下、その左右の列の上から下、そして両サイドの列の上から下となっています。
- 色は MD5 の末尾 7 文字を使います。 HSL 色空間で、色相 3 文字、彩度 2 文字、輝度 2 文字の順番です。色相の範囲を 0 から 360 まで、彩度と輝度の範囲を 0 から 100 までとします。このとき、色相は 0 から 4095 までを 0 から 360 までの範囲に変換して、そのまま用います。彩度と輝度は 0 から 255 までを 0 から 20 の範囲に変換して、それぞれ 65 と 75 から減算した値を用います。
と、こんな感じになっています。 HSL 色空間から RGB 色空間に変換するときは、以下のページを参考にしました。
RGBとHSLの相互変換ツールと変換計算式 – PEKO STEP
一応、この流れで画像を生成するものを作りましたので、参考まで。
