1 GRAFIKA GAME Aditya Wikan Mahastama Prinsip Prinsip Grafika Komputer 2 UNIVERSITAS KRISTEN DUTA WACANA GN12132 (1) PIKSEL, BITMAP dan VEKTOR3 PENGOL...
Dihasilkan dari sistem optik yg menerima sinyal analog, misalnya mata manusia & kamera analog
Diskret
Dihasilkan melalui proses digitalisasi citra kontinyu. Beberap sistem optik dilengkapi fungsi digitalisasi, sehingga mampu menghasilkan citra diskret (digital), misalnya kamera digital & scanner
CITRA
Model Citra Citra merupakan fungsi malar (kontinyu) dari intensitas cahaya pada bidang 2 dimensi. Secara matematis fungsi intensitas cahaya pada bidang 2D disimbolkan dengan f(x,y) (x,y) : koordinat kartesian f(x,y) : intensitas cahaya (brightness) pada titik (x,y)
PICTURE ELEMENT Intensitas f(x,y) pada gambar hitam-putih disebut derajat keabuan (grey level), derajat keabuannya bergerak dari hitam ke putih. Citranya disebut citra keabuan (greyscale image). Rentang nilai derajat keabuan dari lmin sampai lmax lmin < f < lmax
Selang (lmin , lmax) disebut skala keabuan Karena alasan praktis, (lmin , lmax) sering digeser menjadi selang [0, L] Intensitas 0 = hitam, L = putih dan nilai antara 0 sampai L bergeser dari hitam ke putih
Contoh: Citra keabuan dengan 128 level: skala abu-abu dari 0 sampai 127 atau [0,127]. Citra keabuan = citra satu kanal karena warnanya hanya ditentukan oleh satu fungsi intensitas. Citra berwarna = citra spektral, karena warnanya terdiri atas tiga komponen warna yaitu RGB (red, green, blue). Intensitas suatu titik pada citra warna merupakan kombinasi tiga intensitas: Derajat keabuan merah fmerah(x,y), hijau fhijau(x,y), dan biru fbiru(x,y)
Digitalisasi Citra Digitalisasi: representasi citra dari fungsi kontinyu menjadi nilai-nilai diskret. citra yg dihasilkan disebut digital image (citra digital). Dimensi ukuran dinyatakan dengan tinggi (N) x lebar (M) atau (lebar x panjang). Citra digital dengan L derajat keabuan, fungsinya dapat ditulis sbb: 0 <= x <= M-1 f(x, y) 0 <= y <= N-1 0<= f <= L
Citra digital ukuran N (baris) x M (kolom) dinyatakan dengan matriks:
Indeks baris i dan kolom j menyatakan koordinat titik pada citra. f(i,j): intensitas (derajat keabuan) pd titik (i,j) Tiap elemen citra digital (elemen matriks) disebut image element, picture element atau pixel atau pel N x M buah pixel Contoh: citra ukuran 128 x 128 pixel dinyatakan secara numerik dengan matriks, 128 baris (pada indeks i dari 0-127) dan 128 kolom (pada indeks j dari 0-127), contoh: Citra dengan level keabuan 256
0 100 1 101 100 200 .. .. . . 200 254
100 100 10 .. . 120
… 255 … 150 ..… 100 .. . . 140 120
PICTURE ELEMENT • Citra digital (digital image) adalah sebuah informasi yang tersusun oleh sejumlah picture element (piksel) • Piksel adalah satu titik yang mendiami sebuah koordinat pada sebuah citra digital, menyimpan informasi mengenai intensitas cahaya warna • Grafika Komputer memproses data menjadi citra, proses penggambaran pada Grafika Komputer akan dilakukan dalam bentuk piksel
PICTURE ELEMENT
PICTURE ELEMENT
RESOLUSI • Resolusi adalah indikator yang menyatakan secara tidak langsung banyaknya piksel yang menyusun sebuah citra digital • Resolusi umumnya dinyatakan dalam jumlah piksel horisontal dan vertikal, misalnya 800 x 600 • Resolusi digunakan di dunia industri display dan reproduksi citra berbasis cahaya, sebagai petunjuk banyaknya piksel maksimum yang bisa ditampilkan pada sebuah alat tampilan, atau banyaknya piksel yang bisa ditangkap oleh sebuah alat pemindai (kamera/scanner)
RESOLUSI
64 piksel
62 piksel
Total piksel = 64 x 62 = 3968 piksel
KEPADATAN (DENSITAS) TITIK • Kepadatan titik menyatakan banyaknya titik yang bisa tertampung dalam satu satuan jarak • Untuk piksel, bisa dinyatakan dalam dpi (dot per inch), atau ppi (pixel per inch). Misal disebutkan bahwa kepadatan pikselnya 300ppi, berarti dalam satu inci terdapat 300 buah piksel • Pada grafika komputer, densitas titik perlu diperhatikan saat menggambar ke sebuah media tampilan karena bisa memiliki arti bias mengenai resolusi dan ukuran layar tampilan
KEPADATAN TITIK
PPI dan DPI
CITRA BITMAP • Pada perkembangannya, ada dua jenis citra digital, yaitu citran berbasis bitmap dan vektor • Citra bitmap menyimpan informasi gambar dengan cara merepresentasikan secara langsung data warna (intensitas cahaya) menjadi piksel. File yang dihasilkan berisi matriks yang menyimpan nilai intensitas setiap piksel pada masing-masing koordinatnya, oleh karena itu disebut bit-map (peta bit) atau raster • Rendering (penampilan) citra dilakukan dengan membaca nilai intensitas setiap piksel dan memunculkan piksel tersebut pada koordinat ybs di bidang output
CITRA BITMAP • Ukuran file hasil penyimpanan tidak tergantung pada komposisi objek citra, tetapi pada resolusi citra • Waktu rendering citra tergantung pada jumlah piksel dan kedalaman warnanya • Bisa menyimpan bentuk-bentuk alamiah secara apa adanya (memotret), sehingga mayoritas implementasi di dunia fotografi dan still imagery (termasuk modifikasi foto) • Elemen-elemen citra tidak dapat dipindah-pindahkan dan citra akan terdistorsi saat dilakukan transformasi.
CITRA VEKTOR • Citra vektor menyimpan informasi gambar dalam bentuk representasi masing-masing objek yang menyusun keseluruhan citra dalam format data tertentu (misal jenis objek, koordinat, warna) • Rendering (penampilan) citra dilakukan dengan membaca data setiap objek, mengolahnya, kemudian menggambarkanya kembali sebagai pikselpiksel pada koordinat ybs di bidang output
CITRA VEKTOR • Ukuran file hasil penyimpanan tidak tergantung pada resolusi, tetapi pada banyaknya objek dan informasinya pada citra • Waktu rendering citra tergantung pada banyaknya objek yang ada • Sulit untuk menggambarkan bentuk alamiah dan tidak beraturan, tetapi mudah membuat objek-objek geometris, sehingga pemanfaatannya untuk bidang desain grafis dan animasi • Citra tidak mengalami distorsi ketika dilakukan transformasi
KEDALAMAN WARNA • Untuk mempermudah plotting (penggambaran), dalam grafika digunakan model warna RGB (true colour), greyscale, dan biner saja. RGB dan greyscale kedalaman warnanya 8-bit per elemen warna • Notasi: (255, 0, 0) RGB f[x,y] = ( R, G, B ) f[x,y] = I 128 grey f[x,y] = [0, 1] 0 biner
KEDALAMAN WARNA • Kedalaman warna (colour depth) menyatakan banyaknya bit yang dibutuhkan untuk merepresentasikan data warna pada sebuah piksel menunjukkan jumlah derajat intensitas per elemen warna • Sebuah piksel true colour membutuhkan 8 + 8 + 8 bit = 24 bit, karena harus merepresentasikan 256 x 256 x 256 derajat warna • Kedalaman warna mempengaruhi ukuran file bitmap
GRAYSCALE • Grayscale adalah di mana piksel hanya mampu menyimpan intensitas warna antara putih – abu-abu – hitam mirip dengan TV&monitor jaman dulu • Grayscale membutuhkan 8 bit saja karena hanya merepresentasikan 256 derajat warna keabuan • Untuk mengkonversi RGB ke Grayscale, cara termudah adalah dengan Y = (R + G + B) / 3 • Namun ada cara yang lebih akurat: Y = 0.3 × R + 0.59 × G + 0.11 × B
SAAT WARNA TERBATAS • Jumlah bit bisa dikurangi dengan mengurangi derajat warna detail warna berkurang • Jika tidak ingin mengurangi detail warna, ukuran citra bisa dikurangi dengan penerapan indeks • Cara kerja indeks sama dengan proses pengindeksan pada database, menyimpan jumlah indeks dan tabel konversi/palet
courtesy: www.alanayoub.com
KEDALAMAN WARNA – WARNA TERINDEKS
Colour 0
Data Citra
Tabel Warna (Palet)
Colour 127
SAAT WARNA TERBATAS • Jaman dahulu di masa resource dan kemampuan menampilkan warna terbatas, digunakan halftoning
(2) KANVAS
APA ITU KANVAS? • Apa yang dilakukan oleh grafika komputer adalah menggambarkan kembali (plotting) data menjadi piksel-piksel citra digital membutuhkan bidang output • Kanvas adalah bidang output bitmap/raster map yang disediakan oleh setiap bahasa pemrograman/bahasa scripting, biasanya dibungkus dalam sebuah container atau komponen. Kanvas sudah mendukung operasi titik (cek di PCD untuk operasi titik) • Contoh: Komponen TImage.TCanvas pada sebagian besar bahasa pemrograman visual, unit canvas.h pada C
APA ITU KANVAS? • Ukuran kanvas harus sudah didefinisikan di awal, dan tidak bisa diperbesar/diperkecil secara fleksibel saat plotting. • Setiap kanvas memiliki sistem koordinat kartesian masing-masing • Setiap saat hanya sebuah kanvas yang dapat aktif
SISTEM KOORDINAT • Plotting pada kanvas menggunakan sistem koordinat Kartesian • Meskipun demikian sumbu y positif tidak menghadap ke atas, tetapi menghadap ke bawah, sehingga titik (0,0) tidak terletak pada kiri bawah tetapi pada kiri atas • Koordinat piksel biasanya berbentuk bilangan bulat, kecuali untuk plotting pada bidang tiga dimensi
SISTEM KOORDINAT DUA DIMENSI
SISTEM KOORDINAT TIGA DIMENSI • Sistem koordinat tiga dimensi tidak dikenal dalam bitmap, hanya pada vektor • Ada dua macam sistem koordinat pada bidang kartesian tiga dimensi untuk Grafika Komputer: sistem koordinat tangan kiri dan tangan kanan • Pada sistem koordinat tangan kiri, sumbu z positif mengarah ke dalam • Pada sistem koordinat tangan kanan, sumbu z positif mengarah ke luar (lihat ke papan tulis)
NOTASI TITIK • Representasi sebuah titik atau piksel dituliskan sebagai P(x, y) untuk dua dimensi P(x, y, z) untuk tiga dimensi dengan x, y, z menunjukkan lokasi piksel pada sumbu yang bersangkutan
PERLU UNTUK DIPERHATIKAN • Plotting pada kanvas dua dimensi tidak mengenal koordinat negatif dan pecahan, tetapi boleh terjadi saat kalkulasi • Proses mengubah hasil koordinat berupa pecahan ke bulat bisa dilakukan dengan pembulatan (round) maupun pemangkasan (truncate) • Grafika Game yang dipelajari saat ini adalah gabungan dari vektor dan bitmap rumus-rumus umum berlaku untuk keduanya
(3) MENGENAL KANVAS HTML5
TENTANG HTML5 • HTML5 will be the new standard for HTML • HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). • WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
TENTANG HTML5 Some rules for HTML5 were established: • New features should be based on HTML, CSS, DOM, and JavaScript • Reduce the need for external plug-ins (like Flash) • Better error handling • More markup to replace scripting • HTML5 should be device independent • The development process should be visible to the public courtesy: http://www.w3schools.com/html/html5_intro.asp
TENTANG HTML5 Some of the most interesting new features in HTML5: • The
