Color Palette #2

画像から代表色のカラーパレットをつくるプロセスを改良しました。前回はHSV空間を利用していたのですが、今回はこれを改めてRGB空間とHSL空間を使いました。前回の反省点はこれです。

・K-Meansで色を混ぜ過ぎて結果の彩度が落ちていた
・HSV空間の軸の単位が違うことをあまり気にせず、しかも立方体モデルを使っていた

HSVを利用していたのはHue(色相)をもとに画素を分けたい思惑があったからなのですが、色相、彩度、明度、とそれぞれの軸の単位が違うので結果に偏りが出ます。RGBはそれぞれが同じ単位なので意外としっかりした結果が返ってきます。この辺も面倒くさがらずに検証しておくべきでした。

 

基本的な流れは前回と一緒です。初めに画像を縮小して画素を6400個ぐらいに減らします。大体80×80ピクセルぐらいの密度ですね。画像は分かりやすくパーティクルで表現してみました。

 

そこからRGB空間内で6400個の画素をメディアンカットでキューブに分けていきます。だいたい64個に分けます。このキューブの中心座標をK均等法でクラスタリングするための初期座標に使います。

 

次にRGB空間はそのままにK均等法で6400個の画素をクラスタリングします。クラスタの数は64個で、初期座標にメディアンカットで作ったキューブの中心座標を使います。この初期位置が大事で、これをランダムにしたりするとどの画素にも選ばれないクラスタが生まれる可能性があります。なのでなるべく画素の分布に合わせて配置するためにメディアンカットを使っています。だいたい4~8回ぐらいクラスタリングを繰り返せば十分な精度が得られます。この段階で64個のクラスタを作りました。前回はここまでで終わっていましたが今回は続きます。

 

今回追加したクラスタリングのプロセスです。K均等法で作った64個のカラーからさらにクラスタリングして8色を選んでいます。クラスタリングした画素の平均値を求めると色が混ざってグレーに近づいてしまうため、画素の平均座標は求めつつも混ぜることはせずに平均座標から最短距離の画素の色を選択するようにしました。この処理は色空間内の距離で行われるので、使う色空間次第で結果が微妙に変わってきます。

RGB空間、HSV空間、HSL空間と試してみましたが、自分好みのはっきりした分かりやすい色を選ぶために明度軸の両端に近づくにつれて空間が狭くなるHSL空間を採用しました。8色だけ選ぶとなると、一番明るい色、一番暗い色、そして残りは様々な色相という組み合わせにしたかったのでHSL空間が最適な形でした。また中心からベクトルを加算して少し外側に押し出すことで、彩度や明度が強い画素が選ばれやすくなるように工夫しています。HSLは中心がグレーで球状に近い立体なのでこのような場合に都合がよかったのもあります。

 

最近WPFで作成した画像ビューワにもこのアルゴリズムを搭載してみました。表は二次元でも裏側では三次元的な処理が走っています。

 

開発環境:VIsual Studio Express 2008, XNA 3.1

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中