グラフィックスの世界 第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）画素の画像

階調

各画素は明るさの情報を持つ – 明るさは最も明るい状態と真っ暗な状態を何段階で表現するか

によって何階調と呼ばれる

明るい 暗い

16階調

256階調

2階調

画素の色

RGBカラー

– 赤(Red)、緑(Green)、青(Blue)の光の3原色

– 3原色がそれぞれ階調を持ち、加法混色であらゆる色が表現できる

– テレビやコンピュータディスプレイに使用されている

256階調

256×256×256=16,777,216 理論上、約1677万色が表現できる

画素の色

CMYKカラー

– シアン(Cyan)、マゼンタ(Magenta)、イエロー(Yellow)の色の3原色

– 3原色がそれぞれ階調を持ち、減法混色であらゆる色を表現する

– カラープリンタに利用される

– 3原色を混合すると理論上は黒になるが、化学的に純度100%にはできないため、実際のインクはブラック(K)を合わせて使う

C

Y

M

K

画素の色

HSB(HSV)

– 色相(Hue)、彩度(Saturation)、明度(Brightness, Value)の３属性

– 人が任意の色を選択しやすいため、グラフィックスソフトの色選択でよく用いられる

– RGBとは非線形変換になる

Saturation

Bri

gh

tne

ss

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ビットが重要な意味を持つ

– 英文字1文字を8ビットで表現した

• アルファベット大文字・小文字：52種類

• その他の記号

• 8ビットが2の3乗なのでなにかと都合がよい

8ビット＝1バイト

– 8桁の2進数のことを「バイト(byte)」と呼ぶ

– 1バイトは情報の基本単位

• USBメモリなどにはバイト単位でデータを保存する

マジックナンバー「8ビット」

1024バイト = 1キロバイト（KB）

1024キロバイト = 1メガバイト(MB)

1024メガバイト = 1ギガバイト(GB)

1024ギガバイト = 1テラバイト(TB)

2進数 – ビット単位のデータを表すのに便利

– 桁数が多くなり見づらい

16進数 – 2進数の4桁（4ビット）が16進数の1桁に相当（1バイトは16進数2桁）

– 変換が10進数より簡単

（例）24ビットの16進数（9A9D34）

1001 1010 1001 1101 0011 0100

9 A 9 D 3 4

2進数と16進数

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

RGBカラーなどの表記には 16進数がよく使われる – R=12 (#0C)

– G=245 (#F5)

– B=118 (#76)

– RGB = #0CF576

16進数(1000)のいろんな表記方法

– #1000, 0x1000, 1000h,

2進数と16進数

文字のデジタル化

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の羅列（ビットデータ）を検出できる

1画素あたり3バイト（RGB＝各1バイト＝256階調）

1000万画素のデジカメ→3000万バイト→30Mバイト！？

– JPEG形式で保存するとサイズは1/10ほどになる（非可逆圧縮）

– RAW形式（非圧縮か可逆圧縮）

デジタル画像のデータサイズ計算

規格 画素数 用途 サイズ

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バイト

可逆圧縮

– （例）ランレングス圧縮

• 同じ文字が続くと続いた数に置き換える

• 文字列圧縮前「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による画像処理

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[0]

img.width (8)

img.height (8)

#909090

img[1]

#e5adcc

img[2]

#909090

img[3]

・・・・・・・・・ #909090

img[63]

ピクセルの操作１（赤成分のみを表示）

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による画像処理

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[0]

img.width (8)

img.height (8)

#909090

img[1]

#000000

img[2]

#909090

img[3]

・・・・・・・・・ #909090

img[63]

ピクセルの操作２

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

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

0 1 2 3 4 5 6 7 x

0

1

2

3

4

5

6

7

y

#909090 データ配列

img[22]

#909090

img[23]

#909090

img[24]

#909090

img[25]

・・・・・・・・・ #909090

img[31]

#909090

img[32]

ピクセル＝配列データ

Processingによる画像処理

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

0 1 2 3 4 5 6 7 x

0

1

2

3

4

5

6

7

y

#909090 データ配列

img[22]

#909090

img[23]

#000000

img[24]

#000000

img[25]

・・・・・・・・・ #000000

img[31]

x + y*img.width

#909090

img[32]