GRAFIKA GAME Aditya Wikan Mahastama [email protected] UNIVERSITAS KRISTEN DUTA WACANA – GN1213 2 Prinsip – Prinsip Grafika Komputer
GRAFIKA GAME
Aditya Wikan [email protected]
UNIVERSITAS KRISTEN DUTA WACANA – GN1213
2
Prinsip – Prinsip Grafika Komputer
(1)(1)
PIKSEL, BITMAP dan VEKTOR
PENGOLAHAN CITRA DIGITAL
Image
1950 Image Processing
1970 Computer VisionImage
Description (Pavlidis, 1986)
1970 Computer
Graphics
1970 Computer Vision
1960 Pattern Recognition
Artificial Intelligence
CITRA
Kontinyu
Diskret
Dihasilkan dari sistem optik yg menerima sinyal
analog, misalnya mata manusia & kamera analog
Dihasilkan melalui proses digitalisasi citra
kontinyu. Beberap sistem optik dilengkapi fungsi
digitalisasi, sehingga mampu menghasilkan citra
AKUISISI (PEMBENTUKAN) CITRA DIGITAL
digitalisasi, sehingga mampu menghasilkan citra
diskret (digital), misalnya kamera digital &
scanner
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 ELEMENTIntensitas 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
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)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:
f(x,y) =
f(0,0) f(0,1) … f(0,M-1)
f(1,0) f(1,1) … f(1,M-1)
. . … .
. . . .
. . . .
f(N-1,0) f(N-1,1) … f(N-1,M-1)
f(i,j): intensitas (derajat keabuan) pd titik (i,j)
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:
0 100 100 … 255
1 101 100 … 150
100 200 10 … 100. . . . . . . . . . . . . . . 200 254 120 140 120
Citra dengan level keabuan 256
• 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
PICTURE ELEMENT
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 adalah indikator yang menyatakan secara tidak
langsung banyaknya piksel yang menyusun sebuah citra
digital
• Resolusi umumnya dinyatakan dalam jumlah piksel
RESOLUSI
• 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 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
KEPADATAN (DENSITAS) TITIK
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
• 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
CITRA BITMAP
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
• Ukuran file hasil penyimpanan tidak tergantung pada
komposisi objek citra, tetapi pada resolusi citra
• Waktu rendering citra tergantung pada jumlah piksel
dan kedalaman warnanya
CITRA BITMAP
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 menyimpan informasi gambar dalam
bentuk representasi masing-masing objek yang
menyusun keseluruhan citra dalam format data
tertentu (misal jenis objek, koordinat, warna)
CITRA VEKTOR
tertentu (misal jenis objek, koordinat, warna)
• Rendering (penampilan) citra dilakukan dengan
membaca data setiap objek, mengolahnya,
kemudian menggambarkanya kembali sebagai piksel-
piksel pada koordinat ybs di bidang output
• Ukuran file hasil penyimpanan tidak tergantung pada
resolusi, tetapi pada banyaknya objek dan
informasinya pada citra
• Waktu rendering citra tergantung pada banyaknya
CITRA VEKTOR
• 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
BITMAP DAN VEKTOR
courtesy: www.logoants.com
courtesy: www.internetmodeler.com
BITMAP DAN VEKTOR
bitmap
Rectangle
(0,0,30,25)
(255,0,0)
(0,0,0)
vektor
BITMAP DAN VEKTOR
courtesy: cdn.articulate.com
courtesy: 0.tqn.com
• Bitmap tidak terkompresi: BMP
• Bitmap terindeks: GIF, PNG
• Bitmap terkompresi: JPEG
TIPE FILE BITMAP DAN VEKTOR
• Vektor: CDR, SVG
• Untuk mempermudah plotting (penggambaran),
dalam grafika digunakan model warna RGB (true
colour), greyscale, dan biner saja.
RGB dan greyscale kedalaman warnanya 8-bit per
KEDALAMAN WARNA
RGB dan greyscale kedalaman warnanya 8-bit per
elemen warna
• Notasi:
f[x,y] = ( R, G, B ) (255, 0, 0) RGB
f[x,y] = I 128 grey
f[x,y] = [0, 1] 0 biner
• Kedalaman warna (colour depth) menyatakan
banyaknya bit yang dibutuhkan untuk
merepresentasikan data warna pada sebuah piksel
� menunjukkan jumlah derajat intensitas per
KEDALAMAN WARNA
� 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 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
GRAYSCALE
• 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
• Jumlah bit bisa dikurangi
dengan mengurangi derajat
warna � detail warna
berkurang
SAAT WARNA TERBATAS
• 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
Colour 127Tabel Warna
(Palet)
• Jaman dahulu di masa resource dan kemampuan
menampilkan warna terbatas, digunakan halftoning
SAAT WARNA TERBATAS
(2)(2)
KANVAS
• Apa yang dilakukan oleh grafika komputer adalah
menggambarkan kembali (plotting) data menjadi
piksel-piksel citra digital �membutuhkan bidang
output
APA ITU KANVAS?
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
• Ukuran kanvas harus sudah didefinisikan di awal, dan
tidak bisa diperbesar/diperkecil secara fleksibel saat
plotting.
• Setiap kanvas memiliki sistem koordinat kartesian
APA ITU KANVAS?
• Setiap kanvas memiliki sistem koordinat kartesian
masing-masing
• Setiap saat hanya sebuah kanvas yang dapat aktif
• Plotting pada kanvas menggunakan sistem koordinat
Kartesian
• Meskipun demikian sumbu y positif tidak
menghadap ke atas, tetapi menghadap ke bawah,
SISTEM KOORDINAT
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 tidak dikenal dalam
bitmap, hanya pada vektor
• Ada dua macam sistem koordinat pada bidang
kartesian tiga dimensi untuk Grafika Komputer:
SISTEM KOORDINAT TIGA DIMENSI
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)
• Representasi sebuah titik atau piksel dituliskan
sebagai
P(x, y) untuk dua dimensi
P(x, y, z) untuk tiga dimensi
NOTASI TITIK
P(x, y, z) untuk tiga dimensi
dengan x, y, z menunjukkan lokasi piksel pada sumbu
yang bersangkutan
• Plotting pada kanvas dua dimensi tidak mengenal
koordinat negatif dan pecahan, tetapi boleh terjadi
saat kalkulasi
• Proses mengubah hasil koordinat berupa pecahan ke
PERLU UNTUK DIPERHATIKAN
• 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)(3)
MENGENAL KANVAS 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).
TENTANG HTML5
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.
courtesy: http://www.w3schools.com/html/html5_intro.asp
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)
TENTANG HTML5
• 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
publiccourtesy: http://www.w3schools.com/html/html5_intro.asp
Some of the most interesting new features in HTML5:
• The <canvas> element for 2D drawing
• The <video> and <audio> elements for media
playback
TENTANG HTML5
playback
• Support for local storage
• New content-specific elements, like <article>,
<footer>, <header>, <nav>, <section>
• New form controls, like calendar, date, time, email,
URL, search
courtesy: http://www.w3schools.com/html/html5_intro.asp
• Anda hanya membutuhkan web browser yang
mendukung HTML5
KEBUTUHAN HTML5
• Cek kompatibilitas browser anda dengan HTML5 di
http://html5test.com/ dan pastikan bagian Canvas
terpenuhi, untuk bisa mulai menggambar
• Elemen HTML5 Canvas adalah sebuah tag HTML yang
serupa dengan <div>, <a>, atau <table>, dengan
pengecualian bahwa baris-baris di dalam tag berisi
skrip JavaScript.
KANVAS DI HTML5
skrip JavaScript.
• In order to leverage the HTML5 Canvas, we'll need
to:
1. place the canvas tag somewhere inside the HTML
document
2. access the canvas tag with JavaScript
3. create a context
4. and then utilize the HTML5 Canvas API to draw
visualizations.
• When using canvas, it's important to understand the
difference between the canvas element and the canvas
context, as often times people get these confused. The
canvas element is the actual DOM (Document Object
KANVAS DI HTML5
canvas element is the actual DOM (Document Object
Model) node that's embedded in the HTML page. The
canvas context is an object with properties and methods
that you can use to render graphics inside the canvas
element. The context can be 2d or webgl (3d).
• Sebuah canvas element hanya bisa memiliki satu
context. Jika kita gunakan method getContext() berkali-
kali, ia akan merujuk ke context object yang sama.
• Baris-baris script dasar untuk kanvas HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grafika Game</title>
KANVAS DI HTML5
<title>Grafika Game</title>
</head>
<body>
<canvas id="myCanvas" width=“400“ height=“320"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// tambahkan script penggambaran di sini
</script>
</body>
</html>
• Atau dapat juga dirapikan dengan memisah antara file
HTML dengan Javascriptnya, menjadi dua bagian
• Bagian HTML pada index.html:
<!DOCTYPE html>
KANVAS DI HTML5
<html>
<head>
<title>Grafika Game</title>
</head>
<body>
<script src=“grafika.js”></script>
</body>
</html>
• Bagian Javascript pada grafika.js:
// Buat kanvasnya
var canvas = document.createElement(“canvas");
var ctx = canvas.getContext("2d");
canvas.width = 400;
KANVAS DI HTML5
canvas.width = 400;
canvas.height = 320;
document.body.appendChild(canvas);
// Tambahkan script penggambaran di sini
• Menggambar garis (dengan cara pertama)
<body>
<canvas id="myCanvas" width=“400“ height=“320"></canvas>
<script>
KANVAS DI HTML5
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// tambahkan script penggambaran di sini
ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(350, 50);
ctx.stroke();
</script>
</body>
• Menggambar garis (dengan cara ke dua pada file .js )
// Buat kanvasnya
var canvas = document.createElement(“canvas");
var ctx = canvas.getContext("2d");
canvas.width = 400;
KANVAS DI HTML5
canvas.width = 400;
canvas.height = 320;
document.body.appendChild(canvas);
// Tambahkan script penggambaran di sini
ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(350, 50);
ctx.stroke();
• Kanvas di HTML5 menyediakan method untuk
menggambar garis, tetapi malah tidak bisa menggambar
titik.
• Ada beberapa solusi yang ditawarkan misalnya
KEKURANGAN KANVAS DI HTML5
• Ada beberapa solusi yang ditawarkan misalnya
menggambar garis yang sangat pendek.
ctx.beginPath();
ctx.moveTo(2,1);
ctx.lineTo(3,2);
ctx.stroke();
• Solusi selengkapnya bisa anda lihat di
http://html5tutorial.com/how-to-draw-a-point-with-the-
canvas-api/
• Menggambar kotak-kotak dan smiley
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "rgb(0, 255, 0)";
ctx.fillRect(35, 35, 50, 50);
KANVAS DI HTML5
ctx.fillRect(35, 35, 50, 50);
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.fillRect(100, 10, 100, 100);
ctx.fillStyle = "rgb(255, 255, 0)";
ctx.fillRect(120, 30, 20, 20);
• PR untuk minggu depan:
Belajar syntax Javascript yang anda butuhkan melalui file dan
buku yang disediakan (updated file preview)
Mencoba membuat:
MATERI SELESAI
Mencoba membuat:
1. Garis melengkung (menggambar garis sepanjang sumbu x
dengan y yang bertambah seiring bertambahnya x)
2. Garis putus-putus (menggambar garis sepanjang sumbu x
yang muncul dan menghilang setiap sepuluh piksel
• Materi berikutnya:
Primitif Grafika dan Implementasinya