画像で使われている色を3D散布図で表示してみた、Pythonとmatplotlibすごい

画像で使われているすべての色を表示するのは処理が重すぎたので、等間隔で色を取得

この画像で使われている100ピクセル分の色を3D散布図で表示してみた

使ったアプリと言語は

Visual Studio 2017とPythonとmatplotlib

Pythonは初めて使ったので初投稿です

Pythonの準備

Visual Studio これくしょん

Visual Studio Installerを起動してみる

f:id:gogowaten:20191213151407p:plain

Pythonはインストール済みだったけどAnacondaは入っていなかった

Pythonは問題なさそうなのでこれは閉じて

Visual Studioを起動して新しいプロジェクト作成

f:id:gogowaten:20191213151418p:plain

Pythonアプリケーションを選択

グラフを表示してくれるmatplotlibのインストール

f:id:gogowaten:20191213151428p:plain

ツール→Python→Python環境で

f:id:gogowaten:20191213151436p:plain

右側に表示される

Python 3.3 (64-bit)を選択して

下にある概要をクリックして

パッケージを選択

検索窓とその下にインストールされているパッケージ一覧が表示される

これは少し時間がかかっていたかも

matplotlibを検索

ふたつの矢印どちらでも同じだと思う

クリックでインストールが始まると

出力ウィンドウが表示されて

確認できる

右端に"Python環境"のタブがあるのでクリックで表示

検索窓のmatplotlibを消してみると一覧表示に戻るので

こっちでも確認できた

同じようにPillowというパッケージもインストール

これで準備できたはず

RGBそれぞれの値が最小値0か最大値255で表せる8色を表示

import matplotlib.pyplot as plt

from mpl_toolkits.mplot3d import Axes3D

# k w r g b y c m

red = [000,255,255,000,000,255,000,255]

green = [000,255,000,255,000,255,255,000]

blue = [000,255,000,000,255,000,255,255]

color = ["black","white","red","#00ff00","blue","yellow","cyan","magenta"]

fig = plt.figure()

ax = fig.add_subplot(111, projection = '3d')

ax.scatter(red,green,blue,c = color,s = 100,depthshade= False)

ax.set_aspect('equal', 'box')#アスペクト比、equalで正方形？

plt.show()

こんなに少ないコードだけど、これを実行すると

Pythonとmatplotlibすごい

さらにマウスでグリグリ動かせる！

下から見た感じ

よくわからん

グラフは表示されるからいいんだけど、なんか注意が出ているんだよねえ

まだなにか足りないのかなあと思って

f:id:gogowaten:20191213151538p:plain

Anacondaもインストールしたけど関係なかったみたいで

注意は消えなくて今でも緑の波線が表示されている

グラフに表示する値は配列で

RGBそれぞれの値はx, y, zのそれぞれの軸の対応させてみた

Pythonは配列のことをリストっていうみたいねえ

RGBそれぞれのリストと8行目はグラフの色のリスト

色の指定

色の指定はいろいろあって、今回は緑(0,255,0)以外は色の名前で指定

緑は名前だと違う色になったので16進数で指定してみた

他には0～255の値を0.0～1.0で指定もできる

この背景色のオレンジ色はRGB=(254，192，127)は

[0.996，0.729，0.498]で指定できる

これは254/255＝0.996192/255＝0.729、127/255＝0.498だから

10,11行目はよくわからん、グラフ自体を作っている感じかなあ

12行目が散布図グラフ、scatterが散布、飛び散るって意味だった

引数の最初の3つがx,y,zそれぞれの値で、

cは色のリスト

sは表示する丸●のサイズ指定

depthshadeは影の有無？既定値はTrueで、これだと色が変わってしまうのでFalseを指定している

13行目はグラフ全体の縦横比、なくてもいいけど横長になる、equal指定で正方形になった

14行目でグラフのウィンドウ表示

画像ファイルから色を取得して表示

import matplotlib.pyplot as plt

from mpl_toolkits.mplot3d import Axes3D

from PIL import Image

import numpy as np

fig = plt.figure()

ax = fig.add_subplot(111, projection = '3d')

#画像ファイルから色データ取得、ピクセルごとのRGBのリスト

im = np.array(Image.open('D:/ブログ用\チェック用2/NEC_6191_2019_02_03_午後わてん_.jpg'))

height = im.shape[0]

width = im.shape[1]

#1万データだと表示するのがやっと、1000個でカクカクだけど動かせる

myCount = 100#最大データ数指定

#等間隔でピクセルを拾うためのステップ数を決める

yStep = int( height / (myCount ** 0.5 - 1))#myCount**0.5は平方根を求めている

xStep = int( width / (myCount ** 0.5 - 1))

#RGBそれぞれのリストとその色のリストを作成

red =

green =

blue =

col = im / 255#色の値を255で割って0.0~1.0に変換

cc =

for y in range(0, height, yStep):

for x in range(0, width, xStep):

red.append(im[y][x][0])

green.append(im[y][x][1])

blue.append(im[y][x][2])

cc.append(col[y][x])

ax.scatter(red, green, blue, s = 20, c = cc, depthshade = False)

ax.set_aspect('equal', 'box')#アスペクト比、equalで正方形？

plt.show()

少し問題があって、24bppと32bppだけかも、ほとんどの画像は大丈夫だけど減色して4bppで保存した画像はエラーになった

色を配列で受け取っている

im = np.array(Image.open("画像ファイルパス")

この部分か、このあとの処理でなんとかすれば良さそうだけど、普通の画像なら大丈夫なので今回はスルーして

これを実行すると

最初の写真画像から100個のピクセルを等間隔で拾って、その色から作成

x,y,z軸それぞれに色を付けたほうがいいなあと

でも方法がわからないので

#軸に見立てた線グラフを3つ追加

x = [0, 255]

y = [0, 0]

ax.plot(x, y, c = 'red')

x = [0,0]

y = [0, 255]

ax.plot(x, y, c = 'green')

x = [0,0]

y = [0,0]

z = [0, 255]

ax.plot(x, y, z, c = 'blue')

#数値ラベルの色指定

ax.tick_params(axis='x', labelcolor="red")

ax.tick_params(axis='y', labelcolor="green")

ax.tick_params(axis='z', labelcolor="blue")

これを追加して

ええやん

f:id:gogowaten:20191213151643p:plain

コード全部でも1画面に収まった

別の画像で

ほとんどが青空、残りは花の赤と影部分の黒、黄色がわずか、緑はなさそうな画像

256*192=49152ピクセルから100ピクセル

いいねえ、期待通り

上から視点

うーん、おもしろい

画像は同じで1000ピクセル

これくらいならまだマウスでグリグリ動かせる

1万ピクセル

ここまで増やすと表示だけでも3～4秒かかるし

マウスで動かすのもカックカクになる

でもほんの少ししかない黄色も拾っているのがわかる

上から視点

緑色ないねえ

以前作った減色アプリで16色に減色した画像

これは平均的な方法で減色したもの

色の分布を見るとバラけるように16色を選んだ感じ

思っていた以上にバラけていた

これはピクセル数が多い色を優先的に選んで減色したもの

青系が多く選ばれているねえ

画像見ればわかるけどね

RGBそれぞれを8階調に落として減色した画像

等間隔で規則的に並んでいるはず

真横から見てみると

きれいに並んでいた！

ちゃんとできていたんだなあ

HSVのHは0固定でSVを変化させた画像

散布図でもグラデーションになったｗ

ちょっと赤の軸からずれているのが気になる

一枚の板状になっている

1万ピクセル取得して表示

ズレも直ってより板になった

グレースケール

斜め一直線

HSVのなんか

すごい広がっている

黒から白を見たところ

きれいに広がっている

Pythonのmatplotlibが作る3D散布図を…最高やな

参照したところ

The mplot3d Toolkit — Matplotlib 3.0.2 documentation
https://matplotlib.org/tutorials/toolkits/mplot3d.html#sphx-glr-tutorials-toolkits-mplot3d-py

ここがmatplotlibの公式みたい、いろんなグラフのサンプルも載っている

【python】matplotlibで3次元データを描画し、回転アニメーションにする - 静かなる名辞
https://www.haya-programming.com/entry/2018/03/24/221653

回転アニメーションはここを参考にした

#720度回転アニメーション表示

for angle in range(719,0,-1):

ax.view_init(20, angle)

plt.draw()

plt.pause(.001)

これを最後の

plt.show()

これの前の行に書く

【matplotlib】Pythonでデータを可視化する（3D散布図編） | 趣味で始める機械学習
 https://ct-innovation01.xyz/DL-Freetime/matplotlib05/

書式についても詳しい

[matplotlib 3D] 15. 3D散布図 – サボテンパイソン
https://sabopy.com/py/matplotlib_3d_15/

3D散布図以外にもたくさん

python - Change 3D background to black in matplotlib - Stack Overflow
https://stackoverflow.com/questions/51107968/change-3d-background-to-black-in-matplotlib

グラフの背景を非表示

Python matplotlibで3Dデータを可視化(散布図プロットと3次元座標での指定) - Symfoware
https://symfoware.blog.fc2.com/blog-entry-2326.html

なんでもかんでもJupyter Notebookに表示するためのチートシート　３次元プロット編 - Qiita
https://qiita.com/alchemist/items/8b5984393e9b4855a18c

Pythonで3D散布図を描く | 非IT企業に勤める中年サラリーマンのIT日記
http://pineplanter.moo.jp/non-it-salaryman/2018/02/18/python-3dgraph/

色の指定方法

matplotlib で指定可能な色の名前と一覧 – Python でデータサイエンス
https://pythondatascience.plavox.info/matplotlib/%E8%89%B2%E3%81%AE%E5%90%8D%E5%89%8D

[Matplotlib] 色と透明度、カラーマップの設定
https://python.atelierkobato.com/rgb/

Python

python 配列基礎はこれで完璧！便利なメソッド多数紹介｜Udemy メディア
https://udemy.benesse.co.jp/development/web/python-list.html

Visual Studio での Python チュートリアル、手順 1、プロジェクトの作成 | Microsoft Docs
https://docs.microsoft.com/ja-jp/visualstudio/python/tutorial-working-with-python-in-visual-studio-step-01-create-project?view=vs-2017