Processingによる画像処理

グラフィックスの世界 第6回
サイバーメディアセンター
サイバーコミュニティ研究部門 安福 健祐
Processingによる画像処理
 デジタル画像について
– ピクセルと色情報
– ベクターとラスター
 デジタルデータについて
– 2進数と16進数
– ビットとバイト
 画像処理の例
– ピクセル加工（モノトーンなど）
Processingによる画像ファイル表示
 画像ファイルの読み込み
PImage img;
void setup()
{
img = loadImage("sample.jpg");
size(img.width, img.height);
noLoop();
}
void draw()
{
image(img, 0, 0); // 元の画像
}
デジタル画像
 デジタル画像は、ディスプレイやプリンタから出力されるとき、
画素 (ピクセル) と呼ばれる点（ドット）の集合になっている
 画素は２次元格子状に配置される
 （横方向の画素数）×（縦方向の画素数）画素の画像と呼ばれる
512×512（262,144）画素の画像
64×64（4,096）画素の画像
階調
 各画素は明るさの情報を持つ
– 明るさは最も明るい状態と真っ暗な状態を何段階で表現するか
によって何階調と呼ばれる
2階調
暗い
明るい
16階調
256階調
画素の色
 RGBカラー
– 赤(Red)、緑(Green)、青(Blue)の光の3原色
– 3原色がそれぞれ階調を持ち、加法混色であらゆる色が表現できる
– テレビやコンピュータディスプレイに使用されている
256階調
256×256×256=16,777,216
理論上、約1677万色が表現できる
画素の色
 CMYKカラー
–
–
–
–
シアン(Cyan)、マゼンタ(Magenta)、イエロー(Yellow)の色の3原色
3原色がそれぞれ階調を持ち、減法混色であらゆる色を表現する
カラープリンタに利用される
3原色を混合すると理論上は黒になるが、化学的に純度100%にはでき
ないため、実際のインクはブラック(K)を合わせて使う
Y
K
M
C
画素の色
 HSB(HSV)
– 色相(Hue)、彩度(Saturation)、明度(Brightness, Value)の３属性
– 人が任意の色を選択しやすいため、グラフィックスソフトの色選択で
よく用いられる
– RGBとは非線形変換になる
Brightness
Saturation
Hue
ProcessingのColor Selector
 Processingにおける色指定方法はRGBまたはHSBを使う
データ方式の種類
データ
方 式
ラスタ（ビットマップ）
ベクタ
特
画素の集合で表す。
パラメータを数値で表す。
各画素の色情報
線の起終点の位置座標
曲線であればその曲がり方
線の太さ・色
線に囲まれた面の色
それらの変化のしかた 等
具体例
デジカメの写真
イラストデータ
CADの図面データ
編集用
ソフト
Adobe Photoshop
Painter
Adobe Illustrator
AutoCAD
徴
ラスタデータ
Adobe Photoshop写真画像を編集
ラスタデータ
拡大すると画素の集合と分かる
Adobe Photoshop写真画像を編集
ベクタデータ
Adobe Illustratorでイラスト画像を編集
ベクタデータ
拡大しても滑らか
但し、ディスプレイはラスターイメージしか表示できないので、ベクターイメージを表
示する際は、必要な解像度にラスタライズして表示していることになる。
デジタル画像の種類
データ
方 式
ラスタ（ビットマップ）
ベクタ
特
画素の集合で表す。
パラメータを数値で表す。
各画素の色情報
線の起終点の位置座標
曲線であればその曲がり方
線の太さ・色
線に囲まれた面の色
それらの変化のしかた 等
具体例
デジカメの写真
イラストデータ
CADの図面データ
編集用
ソフト
Adobe Photoshop
Painter
Adobe Illustrator
AutoCAD
徴
☆ 最終的にディスプレイへ出力される画像はビットマップ
デジタルデータ
 デジタル画像処理を理解するため、コンピュータ内部で画像データ
がどのような形式で表され、どのような方法で演算されているかを
知ることが重要
 コンピュータ内部ではすべて2進数の値として取り扱われる
– コンピュータの部品「IC」
– ICはピン1本で二つの状態しか表せない（電流が流れるor流れない）
IC
32ビット は情報を入出力するためのピンが32本あるイメージ
ビットとは？
 情報の最小単位「ビット」
– 「0」と「1」、「ある」か「ない」
– 1ビット＝2進数の1桁
• 1001 0101 0010 1010 → 16ビット
– 1ビット増えるごとに2倍の情報が区別できる
• 1ビット：2通り
• 2ビット：4通り
• 3ビット：8通り
・・・
• 8ビット：256通り, 16ビット：65536通り, 32ビット：4294967296通り
 「すべての情報はビットに置き換えることができる」（シャノン）
• 数字（10進数→2進数）
• 文字
• 音、映像
• 物理現象、ヒト？
マジックナンバー「8ビット」
 コンピュータの世界では8ビットが重要な意味を持つ
– 英文字1文字を8ビットで表現した
• アルファベット大文字・小文字：52種類
• その他の記号
• 8ビットが2の3乗なのでなにかと都合がよい
 8ビット＝1バイト
– 8桁の2進数のことを「バイト(byte)」と呼ぶ
– 1バイトは情報の基本単位
• USBメモリなどにはバイト単位でデータを保存する
1024バイト
= 1キロバイト（KB）
1024キロバイト
= 1メガバイト(MB)
1024メガバイト
= 1ギガバイト(GB)
1024ギガバイト
= 1テラバイト(TB)
2進数と16進数
 2進数
– ビット単位のデータを表すのに便利
– 桁数が多くなり見づらい
 16進数
– 2進数の4桁（4ビット）が16進数の1桁に相当（1バイトは16進数2桁）
– 変換が10進数より簡単
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
0
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F
0000
0001
0010
0011
0100
0101
0110
0111
1000
1001
1010
1011
1100
1101
1110
1111
（例）24ビットの16進数（9A9D34）
1001 1010 1001 1101 0011 0100
9
A
9
D
3
4
2進数と16進数
 RGBカラーなどの表記には
16進数がよく使われる
–
–
–
–
R=12 (#0C)
G=245 (#F5)
B=118 (#76)
RGB = #0CF576
 16進数(1000)のいろんな表記方法
–
#1000, 0x1000, 1000h,
文字のデジタル化
http://www.sugilab.net/jk/joho-kiki/2106/index.html
アナログとデジタル
 アナログとデジタル
– アナログ
• コード化されてない情報（レコード、ビデオテープ）
• 連続的で切れ目がないのデータ
– デジタル
• デジタル：コード化された情報（CD, DVD）
• 不連続でとびとびのデータ
数値データに変換（量子化）
音のアナログ波形
0
0
1/44100秒でサンプリング
CDの構造
http://www.sugilab.net/jk/joho-kiki/1509/
CDにレーザ光を当てて、その反射光を検出してデータを読み出す。
・記録層にピットなし
・記録層にピットあり
→
→
光を反射する
光を反射しない
→
→
1
0
CDが回転することで0と1の羅列（ビットデータ）を検出できる
デジタル画像のデータサイズ計算
規格
画素数
用途
サイズ
VGA
640×480
（約30万）
だいぶ昔のPC
900Kバイト
NTSC
720×480
（約35万）
DVD
1Mバイト
XGA
1024×768 （約80万）
ちょっと昔のPC
2.25Mバイト
SXGA
1280×1024（約130万）
最近までのPC
3.75Mバイト
HDTV
1920×1080（約200万）
フルHDテレビ
5.93Mバイト
 1画素あたり3バイト（RGB＝各1バイト＝256階調）
 1000万画素のデジカメ→3000万バイト→30Mバイト！？
– JPEG形式で保存するとサイズは1/10ほどになる（非可逆圧縮）
– RAW形式（非圧縮か可逆圧縮）
データ圧縮の考え方
 可逆圧縮
– （例）ランレングス圧縮
• 同じ文字が続くと続いた数に置き換える
• 文字列圧縮前「RRRRRRABDDDDDGG」（15文字）
• 文字列圧縮後「R6ABD5G2」（8文字）
– 圧縮前に戻しても（解凍）データは全く同じ（可逆）
– 圧縮率はそれほど高くない（1/2程度？）
 非可逆圧縮
– （例）JPEG圧縮
• 画像を8x8のブロックに分けて離散コサイン変換により周波数領域に変換
• 量子化によって情報量を落とし、ハフマン符合により圧縮
– 圧縮前に戻しても（解凍）データは全く同じにならない（非可逆）
– 圧縮率は高い（1/10程度？）
画素数と解像度
 解像度＝１インチあたりの画素数
– iPhone4の場合
• 画素数は960x640
• 画面サイズは3.5インチ（3x2インチ）
• 解像度は300dpi以上
– 32インチTVの場合
• 画素数は1920x1080
• 画面サイズは32インチ（約27.9インチx15.7）
• 解像度は約70dpi
– プリンタで印刷するとき
• 解像度300dpi
• 用紙サイズ（A4）は297 x210cm（約11.7 x8.2 インチ）
• 画素数は約3510 x 2460
Processingによる画像ファイル表示
 画像ファイルの読み込み
PImage img;
void setup()
{
img = loadImage("sample.jpg");
size(img.width, img.height);
noLoop();
}
void draw()
{
image(img, 0, 0); // 元の画像
}
Processingによる画像処理
img.width (8)
 ピクセル＝配列データ
データ配列
#909090
#909090
#e5adcc
#909090
img[0]
img[1]
img[2]
img[3]
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
・・・・・・・・・
#909090
img[63]
img.height
(8)
Processingによる画像処理
 ピクセルの操作１（赤成分のみを表示）
PImage img;
void setup()
{
img = loadImage("sample.jpg");
size(img.width, img.height);
noLoop();
}
void draw()
{
color c;
img.loadPixels();
int n = img.width * img.height;
for ( int i = 0; i < n; i++) {
c = img.pixels[i];
img.pixels[i]=color(red(c), 0, 0);
}
image(img, 0, 0); // 元の画像
}
Processingによる画像処理
img.width (8)
 ピクセル＝配列データ
データ配列
#909090
#909090
#000000
#909090
img[0]
img[1]
img[2]
img[3]
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
・・・・・・・・・
#909090
img[63]
img.height
(8)
Processingによる画像処理
 ピクセルの操作２
PImage img;
void setup()
{
img = loadImage("sample.jpg");
size(img.width, img.height);
noLoop();
}
void draw()
{
img.loadPixels();
for ( int y = 0; y < img.height; y++) {
for ( int x = 0; x < img.width; x++) {
int i = x + y*img.width;
if(y%2==0) img.pixels[i] = color( 0,0,0 );
}
}
image(img, 0, 0); // 元の画像
}
Processingによる画像処理
 ピクセル＝配列データ
0
1
2
3
4
5
6
7
0
0
1
2
3
4
5
6
7
1
8
9
10
11
12
13
14
15
2
16
17
18
19
20
21
22
23
3
24
25
26
27
28
29
30
31
4
32
33
34
35
36
37
38
39
5
40
41
42
43
44
45
46
47
6
48
49
50
51
52
53
54
55
7
56
57
58
59
60
61
62
63
y
データ配列
#909090
#909090
#909090
#909090
img[22]
img[23]
img[24]
img[25]
・・・・・・・・・
#909090
#909090
img[31]
img[32]
x
Processingによる画像処理
 ピクセル＝配列データ
0
1
2
3
4
5
6
7
0
0
1
2
3
4
5
6
7
1
8
9
10
11
12
13
14
15
2
16
17
18
19
20
21
22
23
3
24
25
26
27
28
29
30
31
4
32
33
34
35
36
37
38
39
5
40
41
42
43
44
45
46
47
6
48
49
50
51
52
53
54
55
7
56
57
58
59
60
61
62
63
y
データ配列
#909090
#909090
#000000
#000000
img[22]
img[23]
img[24]
img[25]
・・・・・・・・・
x + y*img.width
#000000
#909090
img[31]
img[32]
x