Quantcast
Channel: 午後わてんのブログ
Viewing all articles
Browse latest Browse all 420

画像の色相を円形ヒストグラム、扇形(パイ型)グラフで表示するアプリできた

$
0
0
イメージ 1
できた



イメージ 2
アプリのウィンドウに画像ファイルをドロップで

イメージ 3
画像とその色相のグラフが表示される


色相範囲分割数
イメージ 4
12分割は360/12=30度区切り

イメージ 5
360分割、こっちのほうがより正確なはず、だけど見た目的には72くらいが面白いかな



イメージ 6
色相がない無彩色画像は

イメージ 7
グラフが表示されない



イメージ 8
色相0(赤)の単色画像の
12分割表示
イメージ 9
360/12=30度区切りになって
色相0の範囲は、0を中心にプラスマイナス15度なので
0-15=-15=-15+360=345
0+15=15
345度から時計回りに15度までの範囲で表示している

360分割表示だと
イメージ 10
359.5~0.5度になっているはず


イメージ 11
色相90のSVグラデーション

イメージ 12
中心付近が太くなっているから色相90から少し外れた色があるみたい
これはHSVとRGBの変換誤差なのかも


イメージ 13
いつもの画像

12分割
イメージ 14
いいねえ、真円に近い
でも

72分割
イメージ 15
がたがたになる

360分割で詳しく
イメージ 16
やっぱりこの画像はこうなっているんだなあ

720分割
イメージ 17



前回はレーダーチャートふうに表示してイマイチだった
イメージ 18
これと同じ画像を同じ360分割で

イメージ 19
いいねえ

イメージ 20
こういうのを表示してみたかった
表示方法は前回のレーダーチャートとほとんど同じ、違うのは切り抜き方を扇形(パイ型)にしただけなんだよねえ


イメージ 27
イメージ 28
青系は全体の10~20%って言われるとあっているけど、少なく見えるのは中心からの距離が遠いほどグラフの面積が大きくなるからだねえ

イメージ 29
これももっと緑が多くてもいいような
もしかして扇形(パイ型)じゃなくて円や四角形のほうがいいのかも?


今回に至るまで
色相分割範囲ごとにピクセル数を集計する方法は
2019/4/1は3日前の
画像の色相の状態をレーダーチャートふうに表示してみた ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15920156.html
イメージ 24
このときのを元に

色相の集計と仕分け
イメージ 25
266行目のGetHueListの
引数PixelsはBitmapSourceクラスのCopyPixelsで得られる色情報byte配列、今回もPixelFormatsはBgra32だけが対象
RGBからHSVの変換にはMyHSV.DLLファイルを参照に追加したものを使っている、273行目
これで全ピクセルの色相のリスト完成
これをもとに切り抜き用のPathGeometryを作る


この画像を扇形(パイ型)に切り抜くための
PathGeometryを作成は
2019/4/3は昨日の
WPFで図形の円弧☽🌛、🍕扇形パイ形、🍩ドーナツ型(アーチ形)を表示してみた、ArcSegment ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15922445.html
イメージ 22
分割範囲ごとの扇形(パイ型)PathGeometryを作成して、全部を連結

さっきの色相リストをMakeClipに渡して作成
イメージ 26
MyRadiusは切り抜く画像の半径
98行目、扇形(パイ型)PathGeometry作成のPieGeometryは昨日と全く同じ
連結は98行目PathGeometryクラスのAddGeometryメソッドを使ってできたので

2019/4/2はおとといのこれは必要なかった
切り抜きClip、GeometryGroupとCombinedGeometry ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15921152.html
イメージ 23
必要なかった



扇形(パイ型)を連結したPathGeometryで切り抜きClipする色相環画像作成は
2019/3/25は10日前の
色相環画像作成、WriteableBitmapとImage.Clip ( ソフトウェア ) - 午後わてんのブログ - Yahoo!ブログ
https://blogs.yahoo.co.jp/gogowaten/15913863.html
イメージ 21
この色相環画像を表示したImageのClipに指定すれば完成になる



ギットハブ
こういうグラフの名前がわからないから棒グラフになっている

アプリダウンロード先(ヤフーボックス)



Viewing all articles
Browse latest Browse all 420

Trending Articles