Color Graph


絵の色彩を分析するツールが欲しいと思っているのですが、数日前にふと絵が粒子状になるビジュアルが思い浮かんだので取り組んでみました。上手いイラストの色彩を調べたり、自分のイラストの足りないところを気づかせてくれたりする、そんなイラストレーションの上達を支援してくれるツールを作れたらいいなと思います。

自分の絵の先生はドローイング(モノクロ)は2年で出来るようになるけれど、ペインティング(カラー)は色を理解するのに5年以上はかかると言ってました。そのとおりで、いまだに自分も色の理解には苦労しているし、わからないことばかりです。

色への理解を数学的な方向から攻略していくのも面白いかなと思って取り組んでみます。

 

image_particles

前回つくったGUIプログラムをベースに機能を追加する形で進めることにしました。まずは画像データのカラー情報を配列にするところからです。80×60ピクセルの画像を用意してこれをドットのパーティクルで構成してみるところから始めてみました。小さい画像ですが4800個もパーティクルが必要になるんですよね。縦と横のサイズを画像から取得して、その通りに空間上に並べていきます。

 

pixel_spread

せっかくなので爆発させるように分解してみました。遊び心は大事。

 

hue_graph_line

本来の目的に戻して、色相別に並べてみることにしました。これもバラバラと崩れる演出でグラフに沿って分布するようにしました。それぞれの軸が、色相、彩度、明度になっています。色彩といえばHSV形式で考えるのが自然だと思うので、RGBとHSVを相互に変換する関数をセオリーどおりに書きました。

 

graph_wave

量に合わせてグラフを描くようにもしました。これで全体的な色の偏りや、足りない色がわかります。この画像の場合だと緑色が足りないですね。個人的な主観もありますが、ライティングや色彩の綺麗な絵は大抵、全色入っているように思います。絵を直接見て何色が足りないかは感覚的にわかりますが、グラフ化してそれぞれの色に分けるとさらにハッキリするように思います。人間の目はいい加減(もしくは高機能?)なので同じ色でも隣接している色の影響で違う色に見えることが多々あります。

 

hue_graph_cylinder

色相を円状のグラフで表示してみました。カラーウィール上で分布しているので、色のバランスや配分がわかりやすくなったと思います。

 

pick_hue

色相のグラフを引っ張ればその色相のピクセルが盛り上がるようにしてみました。

 

pick_value

明度のグラフを引っ張っても同じことが出来るようにしました。どこにどんな色が使われているのかが視覚化されてわかりやすいかなと思います。

基本的な仕組みは出来たと思うので、今後は実用性を考えた機能をつくって行きたいと思います。

広告

Color Graph」への2件のフィードバック

  1. なんか色々かっこ良すぎますね^^ 色解析して足りない色を足すシェーダー(?)作って下さい。

    • 以前Aquさんから色の質問をされて上手く答えられなかったことがこれをつくるきっかけになってます。
      うまく視覚化できるように頑張ります。シェーダーのほうは難しそうですね・・・(^^;

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中