GRAFIKA GAME

Aditya Wikan Mahastamamahas@ukdw.ac.id

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