午後わてんのブログ

ベランダ菜園とWindows用アプリ作成(WPFとC#)

画像の色相の状態をレーダーチャートふうに表示してみた

WPF、C# .NET #ソフトウェア WPF 色彩 画像処理
 
イメージ 1
画像の上にあるくしゃくしゃしたのがそれ
想像していたのよりしょんぼりした感じなのができあがった
要素数は360で作成
 
レーダーチャート

f:id:gogowaten:20191214102551p:plain

エクセルのレーダーチャート
これの要素数は11
 
イメージ 4
HSVのSとVをMAXにしてH(色相)を際立たせた感じにする
ニセサーモグラフィティって名前がアレだけど
イメージ 3
こうしてみるとピンク～赤～黄色系が多くて青系も少し、緑はわずか
なのでさっきのレーダーチャートはあっていると思う
しょんぼりした感じなのは要素数が多すぎたせいもあるので
要素数を360から36に下げてみると
 
要素数36
イメージ 5
こっちのほうがいいねえ
もっと下げて
要素数6
イメージ 6
これでもいいくらい
 
 
 
作るまで
イメージ 7
この色相の四角形を作ってレーダーチャート型に切り抜く
この前の色相環作成と同じで
WriteableBitmapで色相の四角形を作ってPathGeometryで切り抜いて作る
違うのはPathGeometryの中、Segmentの作成
これを画像の色相をカウントしたものから作る
 
ピクセルの色を色相ごとにカウント
360分割の場合1度ごとのカウントになる
要素数は360になる
色相	カウント数
0	645
1	987
2	0
3	754
…
179	500
…
359	939
 
 
色相環画像のサイズが100ｘ100なら
中心点は(50,50)
半径は50
のとき
色相の座標

f:id:gogowaten:20191214102734p:plain

色相3の中心点からの距離は？
カウント数最大値を色相環画像の半径に合わせたいので、これを基準(1.0)にする
色相1の987が最大値なので、これを1.0とすると
色相3の754の中心点からの距離は754/987＝0.763
これに半径をかけると38.1196555
これが色相3の中心点からの距離になる
754/987＊50＝38.196555
 
色相3の位置は？
cos、sinはラジアンを使うので角度からラジアンに変換して使う
ラジアン ＝ パイ/180*角度
色相の値はそのまま角度になるので色相3のラジアンは
3.14/180*3=0.052333...

x=cos(色相3のラジアン)*距離+中心点x
y=sin(色相3のラジアン)*距離+中心点y

cos(0.052333)＝0.9986295
x=0.9986295*38.19655+50=88.144202
 
こうして色相ごとの座標をつなげたPathGeometryで色相の四角形を切り抜けばレーダーチャートみたいなのができる
 
 
 
分割数4の場合
イメージ 9
360/4＝90で90度毎の
0，90，180，270の色相になる
この4つのどれかに分けていく場合
例えば色相80はどこにするのか
0～90の間だから0か90になるわけだけど
近いのは90だから90にカウントするのが良さそう
そうすると境目は90度毎の中間45度ずらしたところになる
 
イメージ 10
0度でカウントする色相範囲は315～45度
90度でカウントする色相範囲は45～135度
180度でカウントする色相範囲は135～225度
270度でカウントする色相範囲は225～315度
これで色相80は45～135に入るから90度でカウントされる
あとはこれをどう書けばいいのか
 
イメージ 11
-45度傾けていたから、元の色相に45足してから計算
それを90で割った値の小数点以下切り捨て
その値が分割数以上なら0
これに90をかければちょうどよくなる
 
色相200は180度でカウントしたい
計算してみると
(200+45)/90=2.72...
切り捨てて2
2は分割数4より小さいのでそのままで
2*90=180
おk
 
色相316は色相0でカウントしたい
(316+45)/90=4.0111...
切り捨てて4
4は分割数より小さくないので0
0*90=0
おk
 
分割数6なら
360/6＝60なので
0,60,120,180,240,300に分けることになる
範囲の境目は60/2＝30で30度傾けた
0の範囲は330～30
60の範囲は30～90
120の範囲は90～150
180の範囲は150～210
240の範囲は210～270
300の範囲は270～330

色相190は180でカウントしたい
(190+30)/60=3.6666...
切り捨てて3
3は分割数6より小さいのでそのまま
3*60＝180
おk
 
 
コード全部で1万文字超えたので要になる
clipにするPathGeometryを作成するとこだけ画像で
イメージ 12
↑微妙に間違っていたので
↓修正した(2019/04/02)画像だと修正するのめんどくさいいいいい
イメージ 23
レーダーチャートの要素の値になる部分、座標リスト作成
 

f:id:gogowaten:20191214102806p:plain

BitmapクラスのCopyPixelsで得られる色のbyte配列から、色相を分割数に応じてカウント
RGBからHSVの計算はDLLファイルを参照に追加したのを使っている
 
イメージ 14
できあがった座標リストからPathGeometryを作成
これで色相画像の画像をクリップすればレーダーチャート型に切り抜きになる
 
 
 
 
360分割(要素数)
イメージ 15
どの画像も思った以上に極端なグラフになる
見た目の印象だともっと緑が多くても良さそうなんだけどねえ
 
イメージ 16
220(青色)辺りに集中、次に多い80(緑)でも青の1/10、ほかは2桁とかになっていた
 
 
12分割
イメージ 17
7が多い、7の色相は
360/12＝30、7*30＝210、青
 
 
12分割
イメージ 18
どの色相も同じ数だけあるはずなんだけど微妙に違うなあ

360分割
イメージ 19
よりバラついた
できあがったレーダーチャートがかっこいい
 
720分割
イメージ 22
たんぽぽみたいになった
3分割と4分割
イメージ 20
普通の写真画像で3分割と4分割
イメージ 21
 
 
 
画像の色相をレーダーチャートってのはできたわけだけど、なんか違うかなあ
良かったのは色相環画像からはかっこいいレーダーチャートができたこと
 
レーダーチャートっていうんだ…
ヒストグラムは棒グラフを並べた感じだから、それを円形に並べたら円形のヒストグラムだろうと思っていたら、どうも違っていてレーダーチャートっていうのがわかったのは、今回のを作り始めたあとだったからプロジェクト名がヒストグラムになっている
 
 
 
ギットハブ
HSV.dllを使っているので参照に追加しないと動かない
HSV.dllは同じところにある
 
 
 
 
関連記事
2019/3/25は1週間前
色相環画像作成、WriteableBitmapとImage.Clip ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15913863.html
 
2019/04/04は3日後
画像の色相を円形ヒストグラム、扇形(パイ型)グラフで表示するアプリできた ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15923169.html
イメージ 24