Grafika Komputer Bab 03 Gambar Dua Dimensi

Gambar Dua-Dimensi (Two-Dimensional Graphics) Grafika Komputer COM612214



Citra Digital

Citra Digital • Piksel (Pixels) • Koordinat (Coordinates) • Warna (Colors)

Koordinat Piksel (Pixel Coordinates) • Citra digital ������ sekumpulan piksel

Koordinat Piksel • Piksel ������ kolom (x), baris (y) dan warna.

Koordinat Piksel • Piksel << Pixel << Pic… El… • Piksel ≠ Kotak/Grid • Sistem Koordinat

Koordinat Piksel Aliasing • Piksel ≠ Titik (Points) • Satu Piksel = Banyak (infinite) Titik • Piksel ≈ Titik • Citra-Nyata yg ditampilkan menggunakan sekumpulan Piksel Bewarna adalah Citra-Pendekatan • Piksel������Integer ≠ Titik������Real

Koordinat Piksel Aliasing • Misal, kita ingin menggambar Garis • Secara matematis, Garis tidak memiliki Ketebalan, bahkan sebenarnya Tak-Terlihat • jika Garis digambarkan pada Grid setebal 1 piksel, maka Garis-Diagonal akan menampakan efek tangga berundak (jagged staircase)

Koordinat Piksel Antialiasing • Efek tangga berundak ������ Aliasing • Satu Piksel mewakili (aliases) Sekumpulan Titik • Ditangani dengan Antialiasing • Ide dasar Antialiasing: warnaPiksel = warnaLatar + warnaBentuk(Shape)

Resolusi (Resolution) • Resolusi ������ Jumlah piksel (dalam suatu satuan (piksel/inci)) • PPI (pixels per inch) atau DPI (dots per inch) 100PPI sd 400PPI • MP (mega pixels ) 1800x1200=2,16MP atau 4000x3000=12MP

Aspect Ratio • Aspect Ratio ������ rasio dari Lebar dan Tinggi • Misal, - aspect ratio 2:1 dari suatu Pesegi-Panjang artinya Pesegi-Panjang tsb Lebarnya 2 kali Tingginya. - aspect ratio 4:3 dari suatu Pesegi-Panjang artinya Pesegi-Panjang tsb Lebarnya 4/3 kali Tingginya.

Aspect Ratio

Warna Sifat

Warna Sifat • Video Displays & LEDs • Lukisan & Foto • Kode warna pada HTML • Mesin cetak (Printer) • Tidak bisa menghasilkan warna Hitam • Tidak bisa menghasilkan warna Putih

Mode Warna (Color Models) RGB • Warna untuk Layar << Cahaya • Perpaduan 3 warna dasar/primer: Merah(Red), Hijau(Green) dan Biru(Blue) >> RGB • Color Gamut ������ jangkauan warna • Color Depth ������ ketajaman warna misal, color depth = 24 bit: = (8 bit Red + 8 bit Green + 8 bit Blue) warna = 224 warna = 16 juta warna (color gamut)

Mode Warna RGB • Intensitas Warna

Mode Warna RGB • Sifat: penjumlahan/gabungan (additive)

Mode Warna HSV • Bagaimana menentukan kecerahan suatu Warna berdasarkan kombinasi RGB? • HSV(B)/HSL ������ Hue-Saturation-Value(Brightness)/Lightness Hue ������ warna dominan (0 sd 360) Saturation ������ tingkat keabuan (0 sd 1) Value ������ tingkat kecerahan (0 sd 1)

Mode Warna HSV • Intuitif • Mudah dipahami pengguna (user)

Mode Warna Komponen Alfa (Alpha) • Tambahan 8 bit (24 + 8 = 32)bit • RGBA, HSVA • Tranparansi WarnaBaru = (alfa)*(WarnaDepan) + (1-alfa)*(WarnaLatar)

Mode Warna CYMK • Warna untuk Printer • Sifat: pengurangan/irisan (subtractive)

Mode Warna • La*b* XYZ dan La*b* • XYZ

RGB Pencampuran Warna • Additive Mixing • Distance Mixing • Average Mixing • Average Transparency

RGB Pencampuran Warna • Additive Mixing I = (|R1+R2|, |G1+G2|, |B1+B2|)

RGB Pencampuran Warna • Distance Mixing I = (0.5×|R1-R2|, 0.5×|G1-G2|, 0.5×|B1-B2|)

RGB Pencampuran Warna • Average Mixing I = (0.5×|R1+R2|, 0.5×|G1+G2|, 0.5×|B1+B2|)

RGB Pencampuran Warna • Average Transparency I = (|t1×R1 + t2×R2|, |t1×G1 + t2×G2|, |t1×B1 + t2×B2|) Contoh: Yellow (255, 255, 0) dan Cyan (0, 255, 255) untuk t1 = 0, t2 = 1, maka I = (0×255 + 1×0, 0×255 + 1×255, 0×0 + 1×255) I = (0, 255, 255)

RGB Pencampuran Warna • Average Transparency Contoh: Yellow (255, 255, 0) dan Cyan (0, 255, 255) untuk t1=0.25, t2 =0.75, maka I = (64, 255, 191) untuk t1=0.75, t2 =0.25, maka I = (191, 255, 64) untuk t1=1, t2 =0, maka I = (255, 255, 0)

Bentuk (Shapes) • Titik (points) • Simpul (vertices/vertex) • Garis (lines) • Polylines • Poligon (polygons) • Kurva (curves)

Bentuk Stroke & Fill • Stroke ������ Boundary-Fill • Fill ������ Flood-Fill

Bentuk Dasar (Basic Shapes) • Garis (lines) • Segiempat (rectangles) • Oval (ovals)

Bentuk Rumit (Complex Shapes) • Poligon (polygons) • Kurva (curves)

Bentuk Rumit Poligon • regular/equilateral polygon • equiangular polygon • cyclic polygon • convex polygon • concav/non-convex polygon • simple & non-simple polygon

Bentuk Rumit Kurva • Bezier curve: Cubic & Quadratic ������ Bernstein polinomial

Membuat Poligon • Array ������ OpenGL VertexBuffer: array [0..2] of TVertex3f = ( (X: 1; Y: 1; Z: 0), (X:-1; Y: 1; Z: 0), (X:-1; Y:-1; Z: 0), ); • Paths ������ JavaScript segi3.beginPath() segi3.moveTo(1, 3) segi3.lineTo(3, 3) segi3.lineTo(2, 4) segi3.closePath()

Membuat Poligon & Kurva di JavaScript • Perintah Stroke: strokeRect(x, y, w, h); strokePoly(x1,y1 , …,… , xn,yn); strokeOval(x, y, rx, ry); • Perintah Fill: fillRect(x, y, w, h); fillPoly(x1,y1 , …,… , xn,yn); fillOval(x, y, rx, ry); • Perintah Path: beginPath(); moveTo(x0, y0); lineTo(xi, yi); closePath(); arc(x,y, r, 0,rad); //Math.PI = 3,14 (180o) bezierCurveTo(x1,y1, x2,y2, x3,y3); quadraticCurveTo(x1,y1, x2,y2);

OpenGL: Geometric Primitives 10 macam primitif geometri Perintah Vertex: • glVertex*() • glColor*() • glTexCoord*() Contoh: glBegin(GL TRIANGLES); glVertex2f(-0.7, -0.5); glVertex2f(0.7, -0.5); glVertex2f(0, 0.7); glEnd();