Slide 1

Slide 1 text

コンピュータ画像うんちく 2015/11/13   “よや”  [email protected]

Slide 2

Slide 2 text

自己紹介 •  公開プロフィール    h4ps://osdn.jp/users/yoya/   •  職歴   – 富士通:  交換機、IP電話   – IIJ:  CDN     – i-­‐revo(KONAMI系列):  携帯サイト   – GREE:  SNSアプリ(ゲーム、又は画像周辺)   – リタイアして神奈川の片田舎に隠棲中  

Slide 3

Slide 3 text

今日のお話 •  デジタル画像のうんちく   – 光とは   – 視覚   – モニタ表示   – 座標系   – 色空間   – リサイズ補完  

Slide 4

Slide 4 text

光は電磁波の一種 h4ps://www.sugatsune.co.jp/technology/illumi-­‐l.php

Slide 5

Slide 5 text

???

Slide 6

Slide 6 text

発光 •  物体は温度に応じて電磁波(光)を出す     – Jet  engine  aRerburner  test  with  DIY  Gasturbine   •  h4ps://www.youtube.com/watch?v=WHEHMFbEH8I

Slide 7

Slide 7 text

光から温度を測る例 •  刀鍛冶は刀を水で冷やすタイミングを色で判 断した h4p://www.tenki.jp/suppl/yasukogoto/2015/11/08/7561.html

Slide 8

Slide 8 text

色温度 (モニタ設定のあれ) •  色の応じた電磁波スペクトル (太陽は6000K) h4p://www.thermo-­‐lab.com/first/emi4ance/

Slide 9

Slide 9 text

分光スペクトル •  光の屈折率の違いにより分光できる h4ps://www.nippondenshoku.co.jp/web/japanese/colorstory/05_spectrum.htm

Slide 10

Slide 10 text

分光分布 •  光源により波長ごとの光の強さが違う h4p://y-­‐ok.com/eye/eyesight/eyesight-­‐2.html

Slide 11

Slide 11 text

視覚  (網膜と錐体) •  ひとの五感のひとつ。視覚   •  目のセンサー h4p://www.me-­‐kaiteki.com/eye-­‐mechanism/eye-­‐structure/visual-­‐cell.html h4p://www.kiriya-­‐chem.co.jp/q&a/q52.html

Slide 12

Slide 12 text

3種類の色しか見ていない •  錐体センサーは3つ (R,  G,  B) h4p://y-­‐ok.com/eye/eyesight/eyesight-­‐2.html

Slide 13

Slide 13 text

条件等色(メタメリズム) •  光のスペクトル分布が近くても R,G,B  の錐体 センサーが同じ刺激なら、同じ色に見える h4p://www.konicaminolta.jp/instruments/knowledge/color/part2/08.html

Slide 14

Slide 14 text

色合成の基本 h4p://www.trickprint.com/trickprint/cmykrgb-­‐color.html •  加法混色と減法混色   – 重ねると黒に近づく  (インク方式)   – 重ねると白に近づく h4p://www.ccs-­‐inc.co.jp/s2_ps/s1/s_04/column/light_color/vol16.html

Slide 15

Slide 15 text

モニタ •  今時の人は RGB  が並んでる事を知らない   – 昔のモニタは普通にRGBの点が見えた   h4p://torano-­‐maki.net/capture/custom/monitor.html

Slide 16

Slide 16 text

R,G,B配列 •  R,G,Bの配列で表現するのが自然   – (右側にあるように例外もある) h4ps://www.displaybank.com/_jpn/research/print_contents_m.html?cate=column&id=4228

Slide 17

Slide 17 text

座標の取り方の違い •  左上を  (0,  0)  として右下に  x,  y  展開   (0,  0) (0,  1) (0,  2) (0,  3) (0,  4) (1,  0) (1,  1) (1,  2) (1,  3) (1,  4) (2,  0) (2,  1) (2,  2) (2,  3) (2,  4) (3,  0) (3,  1) (3,  2) (3,  3) (3,  4) (4,  0) (4,  1) (4,  2) (4,  3) (4,  4) (0,  0) (5,  5)

Slide 18

Slide 18 text

座標の取り方の違い •  (2,0) から (2,4)に線を引く   (0,  0) (0,  1) (0,  2) (0,  3) (0,  4) (1,  0) (1,  1) (1,  2) (1,  3) (1,  4) (2,  0) (2,  1) (2,  2) (2,  3) (2,  4) (3,  0) (3,  1) (3,  2) (3,  3) (3,  4) (4,  0) (4,  1) (4,  2) (4,  3) (4,  4) (0,  0) (5,  5) (2,  0) (2,  4)

Slide 19

Slide 19 text

HTML5  Canvas  の例 •  アンチエイリアスがかかって結果的にボケる   – なので0.5足すというTipsが生まれてる

Slide 20

Slide 20 text

色空間 •  色は R,G,B  の3軸で表現できるので3次元 h4ps://msdn.microsoR.com/ja-­‐jp/library/windows/desktop/aa511283.aspx

Slide 21

Slide 21 text

ゲーテの色彩論 •  色相のはじめ h4ps://ja.wikipedia.org/wiki/色彩論

Slide 22

Slide 22 text

色票 •  マンセル、PCCS h4p://www.toryo.or.jp/cgi-­‐bin/SPCSS/search/resources/munsell.html h4p://www.wsj21.net/ghp/ghp0c_03.html

Slide 23

Slide 23 text

HSV,  HSL  (CSS  でも使える) HSV(HSB),  HSL  の円錐  (カラーピッカーでお馴染 みの) h4p://www.kanazawa-­‐net.ne.jp/~pmansato/wpf/wpf_custom_ColorPicker.htm

Slide 24

Slide 24 text

YCbCr •  テレビ信号、動画、JPEG   – 輝度が大事 h4ps://en.wikipedia.org/wiki/YCbCr

Slide 25

Slide 25 text

リサイズについて •  数が合わないので補完が必要 h4p://csharpimage.blog60.fc2.com/blog-­‐entry-­‐18.html

Slide 26

Slide 26 text

リサイズのアルゴリズム  (少しだけ) •  ImageMagick を例に   – h4p://www.imagemagick.org/Usage/filter/   •  BOX   •  Bilinear   •  Lanczos,  Mitchell  

Slide 27

Slide 27 text

次回予告 •  リサイズアルゴリズムの詳細   •  減色アルゴリズム諸々   •  印刷のインクと色合成 (高演色インク等)