® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

9
1 1 Program S1 Reguler DTE, FTUI Lecture No. 6 Slides© 2009 Kuliah: Representasi warna, palet dan kanvas, respons mata terhadap warna, format file citra, frekuensi, model warna (RGB, CYM, HIS), aplikasi deteksi warna dan contohnya, intensitas, t f i k l 2 transformasi warna, komplemen warna, color slicing, color balancing, histogram equalization, segmentasi citra, segmentasi warna, noise pada model warna, kompresi warna. Video: “How can million of colors be generated from 3 colors?” ©www.goalfinder.com Representasi citra berwarna dalam file: palet dan kanvas Palet: kumpulan warna yang membentuk citra (melukis dengan cat warna – 1 palet = 1 warna) Setiap warna yang berbeda diberi nomor 3 Setiap warna yang berbeda diberi nomor Contoh: citra monokrom, paletnya: Warna-warna dalam palet digambar di atas kanvas Kanvas ~ matriks: setiap elemen matriks bisa 4 diisi salah satu warna dari palet Informasi palet (hubungan antara warna dengan nomor palet) disimpan di komputer File citra dalam komputer hanya perlu menyimpan angka-angka yang merepresentasikan warna 5 6

Transcript of ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

Page 1: ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

1

1

Program S1 Reguler DTE, FTUILecture No. 6Slides© 2009

Kuliah: Representasi warna, palet dan kanvas, respons mata terhadap warna, format file citra, frekuensi, model warna (RGB, CYM, HIS), aplikasi deteksi warna dan contohnya, intensitas, t f i k l

2

transformasi warna, komplemen warna, color slicing, color balancing, histogram equalization, segmentasi citra, segmentasi warna, noise pada model warna, kompresi warna. Video: “How can million of colors be generated from 3 colors?”©www.goalfinder.com

Representasi citra berwarna dalam file: palet dan kanvas

Palet: kumpulan warna yang membentuk citra (melukis dengan cat warna – 1 palet = 1 warna)Setiap warna yang berbeda diberi nomor

3

Setiap warna yang berbeda diberi nomorContoh: citra monokrom, paletnya:

Warna-warna dalam palet digambar di atas kanvasKanvas ~ matriks: setiap elemen matriks bisa

4

diisi salah satu warna dari paletInformasi palet (hubungan antara warna dengan nomor palet) disimpan di komputer File citra dalam komputer hanya perlu menyimpan angka-angka yang merepresentasikan warna

5 6

Page 2: ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

2

7

201 188 181 185 180 147 140 149 155 138 144 144 145199 200 201 188 139 132 147 150 143 123 112 102 117207 221 222 136 90 111 125 145 140 138 122 104 97231 219 200 90 65 84 84 107 95 92 92 99 89227 223 181 74 72 89 92 86 77 63 50 55 65217 211 166 85 47 75 82 83 75 42 42 39 40208 195 179 131 54 68 66 72 46 21 15 24 19198 187 181 141 53 54 55 59 37 21 37 66 90195 184 170 134 52 38 42 45 35 43 98 152 172186 175 171 169 100 34 34 27 44 85 139 170 184167 156 142 144 112 48 32 46 84 133 166 172 186142 139 131 120 108 67 30 76 102 123 153 171 178145 134 128 125 117 70 38 91 101 105 125 146 157

=

Jika citra disimpan dalam sebuah file (kucing.bmp), yang disimpan: angka-angka matriks kanvas

File kucing.bmp:Header

Angka- input

8

Angkaangka dari matriks

Informasi palet dan format file citra

Program pembuka citra(Paint, Photoshop, dll)

input

Ditampilkan di layar

Windows Bitmap Files (.bmp)Tidak dikompresiTidak cocok untuk dikirim via InternetUk t k bit (2n ti k t k b / )

9

854 ntinggilebarsize ××

+≈

Ukuran untuk n-bit (2n tingkat keabuan/warna):

Jika citra berukuran 200 200, 8 bit, besarnya file

bytes

size

400548

820020054

××+≈

Format Full name Owner File extension MIME type Application Pate

nted

AGP ArtGem Project RL Vision .agp Preferred graphics format when working with ArtGem No

AI Adobe Illustrator Document

Adobe Systems .ai application/IllustratorNot suitable for the web. Adobe Illustrator files are

editable using programs that support the format, such as Adobe Illustrator, CorelDRAW, etc.

Yes

CDR CorelDRAW Document Corel Corporation .cdr application/CorelDRAWNot suitable for the web. CorelDRAW files are editable

using programs that support the format, such as CorelDRAW, Adobe Illustrator, etc.

Yes

CPC Cartesian Perceptual Compression

Cartesian Products, Inc.

.cpc, .cpi image/cpi Highly compressed raster imaging format. Yes

GIF Graphics Interchange Format

CompuServe,Unisys

(compression algorithm)

.gif image/gifSupported by most popular web browsers. Supports

transparency and animation.

Yes (Expired)

HD Photo HD Photo Microsoft .wdp/.hdp image/vnd.ms-photo Lightweight high-performance TIFF-like container format

with HDR encoding for photographic imagesYes

IMA .ima .ima team .ima Format for photographic images with HDR encoding. No

10

ILBM InterLeaved BitMapElectronic Arts

and Commodore Amiga

.iff, .ilbm, .lbm

image/x-ilbmPlanar graphics format designed for Amiga graphics

hardware.No

JPEG Joint Photographic Experts Group

Joint Photographic Experts Group

.jpg, .jpeg (containers:

.jfif, .jfi)image/jpeg

Photographic images. Supported by most popular web browsers.

Yes (disputed)

JPEG 2000

Joint Photographic Experts Group 2000

Joint Photographic Experts Group

.jp2, .j2c image/jp2 Photographic images, eventual replacement for JPEG. Yes

PICT PICT Apple Computer.pict, .pic, .

pctimage/pict Metafile for Mac OS, not meant for print publishing. Yes

PNG Portable Network Graphics

World Wide Web Consortium

.png image/pngW3C endorsed replacement for GIF. Supported by most

web browsers.No

PSD Photoshop Document Adobe Systems.psd, .psb, .

pdd

image/psd, image/photoshop, image/x-photoshop

Used mainly for storing image manipulation & editing data, not meant for the Web

Yes

PSP Paint Shop Pro Document

Corel Corporation .psp image/pspNot suitable for the web. It can only be opened in

programs that support the format, such as Paint Shop Pro, The GIMP, etc.

?

Format Full name Owner File extension MIME type Application Pate

nted

SVG Scalable Vector Graphics

World Wide Web Consortium

.svg, .svgz (compressed

)image/svg+xml Scriptable vector image format; supported by some web

browsers, often via plug-in.No

11

TGA Truevision Targa Truevision Inc. .tga, .tpic image/tga Used by many 3D rendering applications and 3d games. Yes?

TIFF Tagged Image File Format

Adobe Systems .tiff, .tif image/tiff Document scanning and imaging format, also functions as a container.

No

Windows bitmap Windows bitmap Microsoft .bmp image/x-bmp

Simple, usually uncompressed format for use primarily within Microsoft Windows. No

Citra ambil 1 baris plot (sumbu x: nomor baris, sumbu y: intensitas keabuan/warna)

Columns 1-9 : 71 70 70 70 73 77 81 83 73 ……………………..Columns 307-315: 92 93 84 93 96 79 121 218 232Columns 316-324: 233 74 0 11 24 14 14 13 11……………………..Columns 397 through 400 : 24 8 13 15

12

Page 3: ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

3

Frekuensi dapat dilihat per baris dan per kolom atau per bidang

13

atau per bidang

Review:Citra: F(x,y) nilai piksel pada posisi (x,y)Citra hitam putih: F(x,y) nilai tunggal tingkat keabuan di titik (x,y)Citra berwarna: F(x y) warna dalam suatu

14

Citra berwarna: F(x,y) warna dalam suatu sistem warna

Model warna: metoda menentukan warna dengan memperhatikan kerangka acuan

Model aditifkombinasi dua atau lebih warna menghasilkan warna yang lebih cemerlang

15

gContoh: warna pada CRT/TVGabungan seluruh warna menjadi putih

Model substraktifkombinasi dua atau lebih warna menghasilkan warna yang lebih rendah luminasinyaContoh: water color Gabungan seluruh warna menjadi hitam

Model warna yang paling banyak digunakan: RGB, CYM dan HSI

Memiliki tiga warna dasar (primer) : merah (R), hijau (G), dan biru (B)Warna-warna lainnya diperoleh dengan

16

y p gmenggabung ketiganya (aditif)Ilustrasi: kubus dimana RGB menempati 3 sudut yang berseberangan

17

CYM (Cyan-Yellow-Magenta) bersifat substraktif (pengurangan)Warna sekunder RGB adalah warna primer

18

Warna sekunder RGB adalah warna primer CYMTransformasi dari RGB ke CYM:

Digunakan pada industri percetakan (dikenal dengan CYMK (Cyan-Magenta-Yellow-BlacK).

⎥⎥⎥

⎢⎢⎢

−−−

=⎥⎥⎥

⎢⎢⎢

GBR

MYC

255255255

Page 4: ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

4

Didesain mengikuti cara pikir para desainer dan seniman grafis:

Saturation kemurnian warnaHue warna itu sendiri

19

Hue warna itu sendiriIntensity kecerahan warna

Bidang warna tidak ortogonal, warna diwakili vektor:

H (Hue): sudut vektor di atas segitiga dasar, mulai dari 0o (merah)S (Saturation): ukuran proporsional modul proyeksi vektor di atas segitiga dasarI (Intensity): jarak dari ujung vektor ke segitiga dasar

20

21 22

23 24

Page 5: ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

5

25 26

27 28

29 30

Page 6: ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

6

31 32

33 34

35 36

Page 7: ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

7

37 38

39 40

41 42

Page 8: ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

8

43

Bandingkan!

44

45 46

47 48

Page 9: ® Kuliah: Representasi warna, palet dan kanvas, respons mata ...

9

49 50

51