20150610卒研進捗lt (share)
TRANSCRIPT
![Page 1: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/1.jpg)
Colours
![Page 2: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/2.jpg)
おことわり
色を扱います色盲色弱の方はごめんなさい
2
※
![Page 3: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/3.jpg)
me
Jun Kasamatsu mohemohe
mohemohe
週末に OSC Hokkaido いってきました
メモ取らずに終わりました
© 2014 Yamato Fujinaka 3
![Page 4: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/4.jpg)
まともな内容
4
![Page 5: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/5.jpg)
agenda
• 画像の要素
• 色の表現
• 色の扱い方
• 情報量
5
![Page 6: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/6.jpg)
画像の要素
画像 # とは
6
![Page 7: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/7.jpg)
7
![Page 8: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/8.jpg)
画像の要素
pic ・ ture*** / pɪktʃər / [語源は「 paint の過去分詞 ; 描かれたもの」] ( ( 形 ) picturesque ) [ 名 ] ( ( 複 ) ~ s / -z / )
1 [C] 絵 , 絵画 , 図 2 [C] 写真 ( (よりかたく) photograph)(→from[ 前 ] 3c [ 語法 ] )
3 [C] 〚通例単数形で〛(生き生きとした)描写4 [C] (テレビなどの)映像 , 画面 , 画像5 [C] 〚通例単数形で〛(心に残っている)鮮明な情景 , 光景 ; イメージ6 [C] 映画( [ ! ] 特に映画業界で用いる) ; (主に米)〚~ s 〛映画業界 ;
7 〚 the ~〛典型 , 見本 , … そのもの ; そっくりの人 [ 物 ]
8ウィズダム英和辞典
![Page 9: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/9.jpg)
画像の要素
pic ・ ture*** / pɪktʃər / [語源は「 paint の過去分詞 ; 描かれたもの」] ( ( 形 ) picturesque ) [ 名 ] ( ( 複 ) ~ s / -z / )
1 [C] 絵 , 絵画 , 図 2 [C] 写真 ( (よりかたく) photograph)(→from[ 前 ] 3c [ 語法 ] )
3 [C] 〚通例単数形で〛(生き生きとした)描写4 [C] (テレビなどの)映像 , 画面 , 画像5 [C] 〚通例単数形で〛(心に残っている)鮮明な情景 , 光景 ; イメージ6 [C] 映画( [ ! ] 特に映画業界で用いる) ; (主に米)〚~ s 〛映画業界 ;
7 〚 the ~〛典型 , 見本 , … そのもの ; そっくりの人 [ 物 ]
9ウィズダム英和辞典
![Page 10: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/10.jpg)
画像の要素
•大きさ
•被写体
•背景
•ピント
•構図
•色
10
![Page 11: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/11.jpg)
11
![Page 12: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/12.jpg)
画像の要素
•大きさ
•被写体
•背景
•ピント
•構図
•色
12
3200 x 1600 px
![Page 13: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/13.jpg)
画像の要素
•大きさ
•被写体
•背景
•ピント
•構図
•色
13
![Page 14: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/14.jpg)
画像の要素
•大きさ
•被写体
•背景
•ピント
•構図
•色
14
![Page 15: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/15.jpg)
画像の要素
•大きさ
•被写体
•背景
•ピント
•構図
•色
15
![Page 16: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/16.jpg)
色
色?
16
![Page 17: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/17.jpg)
色
色?
17
![Page 18: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/18.jpg)
色
光
18
![Page 19: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/19.jpg)
19
![Page 20: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/20.jpg)
20
![Page 21: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/21.jpg)
色
虹
21
![Page 22: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/22.jpg)
22http://ja.wikipedia.org/wiki/%E8%99%B9
![Page 23: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/23.jpg)
色
5 色
6 色
7 色23
![Page 24: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/24.jpg)
24http://ja.wikipedia.org/wiki/%E8%89%B2
![Page 25: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/25.jpg)
25http://ja.wikipedia.org/wiki/%E8%89%B2
可視光
◀ 紫外線 赤外線 ▶
![Page 26: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/26.jpg)
26http://ja.wikipedia.org/wiki/%E8%89%B2
可視光
![Page 27: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/27.jpg)
色の表現
連続した色を
どう表現するか27
![Page 28: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/28.jpg)
色の表現
RGB 色空間色を一意に表す座標空間
28
![Page 29: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/29.jpg)
29
![Page 30: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/30.jpg)
30
R : 255
G : 85
B : 170
![Page 31: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/31.jpg)
31
R : 255 FF
G : 85 55
B : 170 AA
![Page 32: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/32.jpg)
色の表現
32
256 段階
![Page 33: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/33.jpg)
色の表現
33
256 x 256 x 256
=
16777216
![Page 34: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/34.jpg)
色の表現
34
2^8 段階
![Page 35: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/35.jpg)
色の表現
35
8
![Page 36: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/36.jpg)
色とコンピューター
36
1 Byte = 8 bit処理系による
![Page 37: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/37.jpg)
色とコンピューター
37
1 Byte = R
1 Byte = G
1 Byte = B
![Page 38: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/38.jpg)
色とコンピューター
RGB 色空間色を一意に表す座標空間
38
![Page 39: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/39.jpg)
39http://ja.wikipedia.org/wiki/%E8%89%B2
加法混色投影
減法混色印刷
![Page 40: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/40.jpg)
40http://ja.wikipedia.org/wiki/%E8%89%B2
加法混色投影
減法混色印刷
![Page 41: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/41.jpg)
41
液晶
バックライト
![Page 42: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/42.jpg)
42
![Page 43: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/43.jpg)
色とコンピューター
43
![Page 44: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/44.jpg)
色とコンピューター
44
![Page 45: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/45.jpg)
色とコンピューター
45
![Page 46: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/46.jpg)
情報量
46
= 24 bit
= 3 Byte
![Page 47: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/47.jpg)
情報量
47
= 8 bit
= 1 Byte
![Page 48: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/48.jpg)
情報量
48
=
2.666666666666…
![Page 49: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/49.jpg)
情報量
49
3 2 3 bit
![Page 50: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/50.jpg)
情報量
50
8 x 4 x 8 = 256
![Page 51: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/51.jpg)
51
![Page 52: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/52.jpg)
52
![Page 53: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/53.jpg)
情報量
53
むりやり減らすと劣化
![Page 54: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/54.jpg)
情報量
54
錯覚を使う
![Page 55: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/55.jpg)
55
![Page 56: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/56.jpg)
情報量
56
ドットのパターンで
誤魔化す
![Page 57: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/57.jpg)
57
![Page 58: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/58.jpg)
58
![Page 59: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/59.jpg)
情報量
59
適切に誤魔化せば
情報量を落としても OK
![Page 60: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/60.jpg)
情報量
60
落とした情報量の
使い方
![Page 61: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/61.jpg)
情報量
61
demo
http://git.io/vIw7p
![Page 63: 20150610卒研進捗LT (share)](https://reader036.vdocuments.net/reader036/viewer/2022062515/55cbb88dbb61ebb35f8b4572/html5/thumbnails/63.jpg)
agenda
• 画像の要素
• 色の表現
• 色の扱い方
• 情報量
63
demo
http://git.io/vIw7p