スライド 1

Size: px

Start display at page:

Download "スライド 1"

ゆずさままだ
5 years ago
Views:

1 グラフィックスの世界第 6 回サイバーメディアセンターサイバーコミュニティ研究部門安福健祐

2 Processing による画像処理デジタル画像についてピクセルと色情報ベクターとラスターデジタルデータについて 2 進数と 16 進数ビットとバイト画像処理の例ピクセル加工 ( モノトーンなど )

3 Processing による画像ファイル表示画像ファイルの読み込み PImage img; void setup() { img = loadimage("sample.jpg"); size(img.width, img.height); noloop(); } void draw() { image(img, 0, 0); // 元の画像 }

4 デジタル画像デジタル画像はディスプレイやプリンタから出力されるとき画素 ( ピクセル ) と呼ばれる点 ( ドット ) の集合になっている画素は 2 次元格子状に配置される ( 横方向の画素数 ) ( 縦方向の画素数 ) 画素の画像と呼ばれる (262,144) 画素の画像 64 64(4,096) 画素の画像

5 階調各画素は明るさの情報を持つ明るさは最も明るい状態と真っ暗な状態を何段階で表現するかによって何階調と呼ばれる 2 階調暗い明るい 16 階調 256 階調

6 RGB カラー画素の色赤 (Red) 緑(Green) 青(Blue) の光の3 原色 3 原色がそれぞれ階調を持ち加法混色であらゆる色が表現できるテレビやコンピュータディスプレイに使用されている 256 階調 =16,777,216 理論上約 1677 万色が表現できる

7 CMYK カラー画素の色シアン (Cyan) マゼンタ (Magenta) イエロー (Yellow) の色の 3 原色 3 原色がそれぞれ階調を持ち減法混色であらゆる色を表現するカラープリンタに利用される 3 原色を混合すると理論上は黒になるが化学的に純度 100% にはできないため実際のインクはブラック (K) を合わせて使う Y K M C

8 Brightness 画素の色 HSB(HSV) 色相 (Hue) 彩度 (Saturation) 明度 (Brightness, Value) の 3 属性人が任意の色を選択しやすいためグラフィックスソフトの色選択でよく用いられる RGB とは非線形変換になる Saturation Hue

9 Processing の Color Selector Processing における色指定方法は RGB または HSB を使う

10 データ方式の種類データ方式ラスタ ( ビットマップ ) ベクタ特徴画素の集合で表す各画素の色情報パラメータを数値で表す線の起終点の位置座標曲線であればその曲がり方線の太さ色線に囲まれた面の色それらの変化のしかた等具体例デジカメの写真イラストデータ CAD の図面データ編集用ソフト Adobe Photoshop Painter Adobe Illustrator AutoCAD

11 ラスタデータ Adobe Photoshop 写真画像を編集

12 ラスタデータ拡大すると画素の集合と分かる Adobe Photoshop 写真画像を編集

13 ベクタデータ Adobe Illustrator でイラスト画像を編集

14 ベクタデータ拡大しても滑らか但しディスプレイはラスターイメージしか表示できないのでベクターイメージを表示する際は必要な解像度にラスタライズして表示していることになる

15 デジタル画像の種類データ方式ラスタ ( ビットマップ ) ベクタ特徴画素の集合で表す各画素の色情報パラメータを数値で表す線の起終点の位置座標曲線であればその曲がり方線の太さ色線に囲まれた面の色それらの変化のしかた等具体例デジカメの写真イラストデータ CAD の図面データ編集用ソフト Adobe Photoshop Painter Adobe Illustrator AutoCAD 最終的にディスプレイへ出力される画像はビットマップ

16 デジタルデータデジタル画像処理を理解するためコンピュータ内部で画像データがどのような形式で表されどのような方法で演算されているかを知ることが重要コンピュータ内部ではすべて 2 進数の値として取り扱われるコンピュータの部品 IC IC はピン 1 本で二つの状態しか表せない ( 電流が流れる or 流れない ) IC 32 ビットは情報を入出力するためのピンが 32 本あるイメージ

17 ビットとは? 情報の最小単位ビット 0 と 1 あるかない 1ビット=2 進数の1 桁ビット 1 ビット増えるごとに 2 倍の情報が区別できる 1ビット :2 通り 2ビット :4 通り 3ビット :8 通り 8ビット :256 通り, 16ビット :65536 通り, 32ビット : 通りすべての情報はビットに置き換えることができる ( シャノン ) 数字 (10 進数 2 進数 ) 文字音映像物理現象ヒト?

18 マジックナンバー 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)

19 2 進数と 16 進数 2 進数ビット単位のデータを表すのに便利桁数が多くなり見づらい 16 進数 2 進数の4 桁 (4ビット) が16 進数の1 桁に相当 (1バイトは16 進数 2 桁 ) 変換が10 進数より簡単 A B C D E F ( 例 )24 ビットの 16 進数 (9A9D34) A 9 D 3 4

20 2 進数と 16 進数 RGB カラーなどの表記には 16 進数がよく使われる R=12 (#0C) G=245 (#F5) B=118 (#76) RGB = #0CF 進数 (1000) のいろんな表記方法 #1000, 0x1000, 1000h,

21 文字のデジタル化

22 アナログとデジタルアナログとデジタルアナログコード化されてない情報 ( レコードビデオテープ ) 連続的で切れ目がないのデータデジタルデジタル : コード化された情報 (CD, DVD) 不連続でとびとびのデータ数値データに変換 ( 量子化 ) 音のアナログ波形 0 0 1/44100 秒でサンプリング

23 CD の構造 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.

24 デジタル画像のデータサイズ計算規格画素数用途サイズ VGA ( 約 30 万 ) だいぶ昔のPC 900Kバイト NTSC ( 約 35 万 ) DVD 1Mバイト XGA ( 約 80 万 ) ちょっと昔のPC 2.25Mバイト SXGA ( 約 130 万 ) 最近までのPC 3.75Mバイト HDTV ( 約 200 万 ) フルHDテレビ 5.93Mバイト 1 画素あたり 3 バイト (RGB= 各 1 バイト =256 階調 ) 1000 万画素のデジカメ 3000 万バイト 30M バイト!? JPEG 形式で保存するとサイズは 1/10 ほどになる ( 非可逆圧縮 ) RAW 形式 ( 非圧縮か可逆圧縮 )

25 データ圧縮の考え方可逆圧縮 ( 例 ) ランレングス圧縮同じ文字が続くと続いた数に置き換える文字列圧縮前 RRRRRRABDDDDDGG (15 文字 ) 文字列圧縮後 R6ABD5G2 (8 文字 ) 圧縮前に戻しても ( 解凍 ) データは全く同じ ( 可逆 ) 圧縮率はそれほど高くない (1/2 程度?) 非可逆圧縮 ( 例 )JPEG 圧縮画像を8x8のブロックに分けて離散コサイン変換により周波数領域に変換量子化によって情報量を落としハフマン符合により圧縮圧縮前に戻しても ( 解凍 ) データは全く同じにならない ( 非可逆 ) 圧縮率は高い (1/10 程度?)

26 画素数と解像度解像度 =1 インチあたりの画素数 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

27 Processing による画像ファイル表示画像ファイルの読み込み PImage img; void setup() { img = loadimage("sample.jpg"); size(img.width, img.height); noloop(); } void draw() { image(img, 0, 0); // 元の画像 }

28 Processing による画像処理ピクセル = 配列データ img.width (8) img.height (8) データ配列 # # #e5adcc # # img[0] img[1] img[2] img[3] img[63]

29 Processing による画像処理ピクセルの操作 1( 赤成分のみを表示 ) 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); // 元の画像 }

30 Processing による画像処理ピクセル = 配列データ img.width (8) img.height (8) データ配列 # # # # # img[0] img[1] img[2] img[3] img[63]

loadpixels(); for ( int y = 0; y < img.height; y++) { for ( int x = 0; x < img.

31 Processing による画像処理ピクセルの操作 2 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); // 元の画像 }

32 Processing による画像処理ピクセル = 配列データ x y データ配列 # # # # # # img[22] img[23] img[24] img[25] img[31] img[32]

Processing による画像処理ピクセル = 配列データ 0 1 2 3 4 5 6 7 x 0 1 2 3 4 5 6 7 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

33 Processing による画像処理ピクセル = 配列データ x y データ配列 # # # # # # img[22] img[23] img[24] img[25] img[31] img[32] x + y*img.width

johokiso-graphics

johokiso-graphics 1 2 (pixe) (Picture Eement) (dot) http://kayoo.org/home/mext/joho- kiki/ 3 4 (Jaggy) : = NTSC ( TV) 4:3 ( ) 16:9 iphone6 ipad2 Air 1334x750 (326dpi) 2048x1536 (264dpi) VGA 640 480 4:3 SVGA 800 600 4:3