Color Wheel

思うところがあり、カラーピッカーを作りました。

colorwheel_20150510020648

数年前の話ですが、デジタルペインティングのためにPhotoshopでカラーピッカーを作りたいと思っていたことがありました。結局作るコストが掛かりそうなのと有料でそこそこ使い勝手がよいものがあったので購入してしまいました。ただ、これぐらいなら自分で作れそうなのにな、作ってみたいな・・・とは思っていました。

そんなわけで、すぐに作れそうなXNAでやってみることにしました。HSV(色相、彩度、明度)の三角形のカラーピッカーです。

 

colorwheel_20150509150645

幾何学的な形状なので直接コードでポリゴンを描画しています。色は頂点カラーを使っています。ネットにカラーピッカーの計算式などが見当たらなかったので自分なりに考えながら実装していきました。まあ、こんなもの作る人は滅多にいないですよね。

 

color_picker_triangle_to_color_20150509

まずは出力。三角形がクリックされたときにその座標に当たる色を求める計算。三角形の交差判定を取り、得られたベクトルの比率(u, v)から三角形の各頂点の色の中間色を計算します。以前頂点カラーについて書いた記事と同じ方法です。

 

color_picker_position_from_color_20150509

つぎに入力。選択された色から座標を求めるには、選択色をHSVに変換して、v1からv2のベクトル上に彩度Sの比率で座標v3を求め、v3とv0を結んだベクトル上に明度Vの比率で目標座標を計算します。

これでカラーピッカーが入出力に連動して機能するようになりました。

 

colorwheel_20150510184929

将来的に何かツールを作るときにインターフェイスとして利用できそうです。

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中