AKT 361Multimedia Technology

2 - Representasi Graphics/Image

Semester Genap 2010/2011

Muhammad Ghifary, S.T., M.T.

Overview

1. Tipe Data Graphics/Image 1-bit image 8-bit gray-level image Bitplane Dithering Color Image

2. Format File Graphics/Image Populer

1. Tipe Data Graphics/Image

Jumlah format file pada multimedia terus berkembang

Tabel di bawah ini merupakan daftar format file yang digunakan pada Adobe Director

1-bit Image Pixel atau pel : picture element

Setiap pixel disimpan sebagai sebuah bit (0 atau 1) => binary image

Gambar tanpa warna => 1-bit monochrome

“Lena” in 1-bit monocrhome

8-bit Gray-level Image Setiap pixel memiliki gray-value antara 0 –

255, direpresentasikan dengan sebuah byte

Semakin besar gray-value, semakin terang / bright

Bitmap: array 2 dimensi dari nilai pixel yang merepresentasikan data graphics/image

Resolusi => jumlah pixel pada suatu gambar digital

Semakin besar resolusi, semakin detail gambar yang dibentuk / berkualitas baik

e.g. 1.600 x 1.200 (high resolution), 640 x 480 (lower resolution)

8-bit Gray-level Image (2)

Frame buffer: perangkat keras untuk menyimpan bitmap

e.g. Video Card / Graphic Card

Resolusi pada video card tidak harus cocok dengan resolusi gambar. Jika resolusi tidak mencukupi, data gambar dipertukarkan (“shift”) dengan RAM untuk keperluan display

8-bit image : a set of 1-bit bitplanes

setiap plane terdiri dari representasi 1-bit

higher and higher levels of “elevation” : a bit is “turned” on if the image pixel has a nonzero value at or above that bit level

Bitplane / Bidang bit

Setiap plane memiliki nilai 0 atau 1 pada setiap pixel

Sebuah “lorong” yang menelusuri kedelapan bidang tersebut membentuk sebuah rangkaian bit yang disebut byte sehingga memiliki rentang nilai 0 - 255

“Lena” in 8-bit grayscale

Multimedia Presentation

Karena setiap pixel tersimpan dalam sebuah byte (0 - 255), sehingga sebuah gambar grayscale beresolusi 640x480 membutuhkan penyimpanan sebesar 300 kB (640 x 480 = 307200 bytes)

Ketika sebuah gambar dicetak, strategi dasar yang digunakan adalah dithering, yang mengandalkan intensity resolution untuk memungkinkan pencetakan multi-level images pada printer 2-level (1-bit)

Dithering 1-bit printer/plotter hanya tau “cetak” atau “tidak

cetak”, sehingga kemungkinan warna hanyalah “hitam” atau “tidak hitam”

Digunakan untuk mengkalkulasi pola titik/dots yang berkorepondensi dengan nilai 0 – 255

Semakin “kecil” nilai, semakin “rapat/banyak/tebal” yang dicetak

Ilusi untuk menciptakan warna “baru”

e.g. pada mode grayscale : abu-abu

e.g. pada mode RGB : kuning <= merah + hijau

Strategi : timpa (replace) sebuah nilai pixel dengan pola titik yang lebih besar, misal, 2 x 2 atau 4 x 4

Dithering (2) Dither Matrix

Matriks segiempat yang berisi nilai threshold yang digunakan untuk membentuk suatu pola nilai baru pada sebuah image

Dibuat secara ”heuristik”

Misal: terdapat matriks 1-bit titik berukuran n x n, dapat direpresentasikan n^2 + 1 levels of intensity resolution

Ilustrasi : 3 buah filled-dot dihitung sebagai 1 intensity resolution

Contoh, menggunakan 2 x 2 dither matrix :

Dithering (3) Jika menggunakan dither matriks 2 x 2

tersebut, re-map image value dari 0 – 255 ke 0 – 4 (dengan interval 256/5). Lalu, e.g. :

jika nilai pixel 0 maka “jangan cetak” pada area 2 x 2 pada printer output

Jika nilai pixel 4, “cetak” semua 4 titik

Aturan main :

Jika intensitas > nilai entri pada dither matrix, maka cetak sebuah “on dot” pada lokasi entri tersebut: replace setiap pixel dengan sebuah matriks titik berukuran n x n

Ukuran dithered image lebih besar dari aslinya

Kondisi ekstrim: jika me-replace sebuah nilai pixel dengan matriks 10 x 10, maka ukuran gambar menjadi 100x lebih besar !

Dithering (4) Terdapat sebuah trik untuk mengatasi masalah

terlalu besarnya dithered image. Misal, digunakan sebuah dither matrix berukuran 4 x 4 sbb ;

Triknya adalah menggunakan teknik ordered dither

Menghasilkan output yang terdiri atas nilai turning on untuk printer output bit jika level intensitas dari gambar > nilai elemen matriks pada posisi pixel tersebut

Mempertahankan ukuran gambar output agar sama dengan gambar aslinya

Dithering (5) Algoritma untuk ordered dither, dengan

dither matrix berukuran n x n :

Again…. “Lena” (in dithered version)

a) 8-bit grey image

b) Dithered version of the image

c) Detail of dithered version

To be continued ….

Tugas 1 – dikumpulkan senin, 31 Januari 2010

1. Carilah informasi mengenai sebuah proyek/teknologi/konsep multimedia terkini (state-of-the-art), dan tulis penjelasannya seinformatif mungkin (jangan lupa sebutkan pula informasi mengenai sumbernya)

2. Buat sebuah program kecil yang mensimulasikan algoritma untuk “ordered dithered”

3. Sebutkan dan jelaskan teknik dithering lainnya (min. 1 buah) selain ordered dithering yang konvensional

Tipe Data Image

Yang paling banyak digunakan : 24-bit color dan 8-bit color

Ada yang hardware/OS restricted, ada yang cross-platform

Untuk yang tidak cross platform, biasanya ada konversi (translasi format dari suatu sistem ke sistem yang lain)

Sebagian besar format image menggunakan teknik kompresi untuk menghemat storage.

Gambar Berwarna 24-bit

1 pixel = 3 bytes (RGB)

Mampu menyediakan 256 x 256 x256 = 16.777.216 kombinasi warna yang mungkin

Trade off : Sebuah gambar berwarna 24-bit yang berukuran 640 x 480 membutuhkan tempat penyimpanan sebesar 912.6 kB (tanpa kompresi)

Gambar berwarma 24-bit kebanyakan disimpan sebagai gambar 32-bit, dengan tambahan byte ekstra untuk setiap pixel-nya yang digunakan untuk nilai alpha / transparency

Gambar 24-bit (“.bmp”)

a) : Contoh gambar bewarna 24-bit dalam format “.BMP”

b) c) d) : channel warna R,G, dan B untuk gambar a)

Gambar Berwarna 8-bit

Banyak sistem yang menggunakan informasi warna 8 bit / “256 colors” untuk memproduksi screen image.

Menggunakan lookup table untuk menyimpan informasi warna

Gambar tidak menyimpan informasi warna, tetapi hanya kumpulan bytes yang masing-masing merupakan index dari tabel bernilai 3-byte yang menyatakan warna per pixel

Histogram 3D dari Nilai RGB

Gambar 8-bit (“.gif”)

Gambar berwarna 8 bit beriukuran 640 x 480 hanya memerlukan 300 kB, atau 3 kali lebih kecil dari 24-bit (tanpa kompresi)

Color Look-up Tables (LUTs)

Ide : hanya menyimpan index/kode nilai dari setiap pixel pada gambar 8-bit.

Jika sebuah pixel bernilai 25, itu artinya akan mencari baris ke-25 pada color Look-up Table (LUT)

Color-Picker

Color picker terdiri atas sebuah array blok warna yang cukup besar (semi-continuous range of color)

Pada kenyataannya, sebuah color-picker menampilkan warna palette yang berasiosiasi dengan nilai index antara 0 – 255

Dapat dilakukan process animasi yang paling sederhana dengan cara mengubah tabel warna : color cycling atau palette animation

Color-picker untuk warna 8-bit

Setiap blok dari color-picker berkorespondensi dengan sebuah baris pada LUT

RGB Cubes

Bagaimana merancang color LUT ? (Pendekatan I)

Cara termudah untuk membuat 8-bit look-up color dari 24-bit color adalah membagi kubus RGB menjadi potongan-potongan yang sama di setiap dimensinya

Titik pusat dari tiap tabung potongan akan dijadikan entri pada color LUT, lalu nilai RGB yang memiliki rentang 0..255 akan disusutkan menjadi rentang yang sesuai (dalam bentuk kode 8-bit)

Karena mata manusia lebih sensistif terhadap R dan G dibandingkan B, R dan G disusutkan menjadi masing-masing 3-bit (0..7) dan B disusutkan menjadi 2-bit (0..3). Dengan demikian, total bit = 8 bit

Untuk menyusutkan R dan G, hanya dengan cara membagi nilai R atau G dengan (256/8 =) 32 lalu bulatkan. Kemudian, setiap pixel akan di replace dengan nilai index 8-bit yang baru tersebut.

Problem : color reduction (an edge appears when there is a slight change in RGB)

Bagaimana merancang color LUT ? (Pendekatan II)

A simple alternate solution that does a better job for this color reduction problem.

The idea is to sort the R byte values and find their median; then values smaller than the median are labeled with a "0" bit and values larger than the median are labeled with a "1" bit.

This type of scheme will indeed concentrate bits where they most need to differentiate between high populations of close colors.

One can most easily visualize finding the median by using a histogram showing counts at position 0..255.

Contoh Histogram nilai byte dari Red

Median-Cut Algorithm

1. Find the smallest box that contains all the colors in the image.

2. Sort the enclosed colors along the longest dimension of the box.

3. Split the box into two regions at the median of the sorted list.

4. Repeat that the above process in steps (2) and (3) until the original color space has been divided into, say, 256 regions.

5. For every box, call the mean of R, G, and B in that box the representative (the center) color for the box.

6. Based on the Euclidean distance between a pixel RGB value and the box centers, assign every pixel to one of the representative colors. Replace the pixel by the code in a lookup table that indexes representative colors.

2. Format File Populer

8-bit GIF

Salah satu format terpenting karena hubungan historisnya dengan WWW dan HTML

Tipe image pertama yang dikenali oleh net browser

JPEG

Saat ini merupakan file format yang terpenting untuk kebutuhan kompresi

GIF Graphics Interchange Format

GIF Standard :

Dibatasi hanya dengan warna 8-bit / 256 color

Cocok untuk kebutuhan gambar yang membutuhkan hanya beberapa warna khas (e.g. graphics ata drawing)

Mendukung interlacing

“Successive display” dari pixel dalam baris per baris sebanyak 4-pass

Memiliki 2 bentuk :

1) GIF87a: The original specifications

2) GIF89a: The later version

Mendukung animasi via blok Graphics Control Extension pada data

Menyediakan pengontrolan over delay time

A transparency index

GIF (2) Proses Interlacing

partially copied

Mempercepat terlihatnya gambar secara garis besar

GIF87 Untuk spesifikasi standard, format file

umum dari GIF87 adalah sebagai berikut:

Screen Descriptor memiliki kumpulan atribut yang dimiliki oleh tiap image pada file.

Color Map

Ukuran tabel sebenernya adalah 2^(pixel + 1)

Image Descriptor

Jika bit interlaced di-set pada local Image Descriptor, maka baris-baris gambar ditampilkan dalam sekuens 4-pass

JPEG

JPEG: standar format file terpenting untuk kompresi gambar

Human vision system memiliki beberapa batasan dan JPEG memanfaatkan keterbatasan tersebut untuk mencapai kompresi yang high-rates

JPEG memungkinkan penguna untuk mengeset level of quality yang diinginkan atau compression ratio ( input / output)

PNG

PNG singkatan dari Portable Network Graphics

dirancang untuk menggantikan format GIF

Fitur-fitur spesial

Mendukung hingga 48 bit informasi warna

Ada informasi mengenai gamma-correction

TIFF

TIFF singkatan dari Tagged Image File Format

Adanya penambahan “tags” (attachment of additional information)

Tag terpenting : signifier (menentukan tipe kompresi penyimpanan gambar)

Dapat menyimpan gambar dalam tipe yang berbeda-beda : 1-bit, grayscale, 8-bit color, 24-bit RGB, dll

“Lossless format”

Format-Format File Image Lainnya (silakan dieksplorasi)

EXIF (Exchange Image File)

Graphics Animation Files :

FLC, FLI, GL, DL/Amiga IFF

PS (Postscript) & PDF (Portable Document Format)

Other JPEG Format :

WMF, BMP, PAINT, PICT, PPM