GRAFIKA GAME. Aditya Wikan Mahastama. Prinsip Prinsip Grafika Komputer UNIVERSITAS KRISTEN DUTA WACANA GN1213

GRAFIKA GAME

Aditya Wikan Mahastama

mahas@ukdw.ac.id

UNIVERSITAS KRISTEN DUTA WACANA – GN1213

2

(1)

(1)

PENGOLAHAN CITRA DIGITAL

Image 1950 Image Processing 1970 Computer Vision Image 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

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

l_min < f < lmax

l_min < 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 f_merah(x,y), hijau f_hijau(x,y), dan biru f_biru(x,y)

Derajat keabuan merah f_merah(x,y), hijau f_hijau(x,y), dan biru f_biru(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 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

• 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

• 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

• 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

• 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

BITMAP DAN VEKTOR

bitmap Rectangle (0,0,30,25) (255,0,0) (0,0,0) vektor

BITMAP DAN VEKTOR

courtesy: cdn.articulate.com

• Bitmap tidak terkompresi: BMP • Bitmap terindeks: GIF, PNG

• Bitmap terkompresi: JPEG

TIPE FILE BITMAP DAN VEKTOR

• 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

• 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

• 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

KEDALAMAN WARNA – WARNA TERINDEKS Colour 0 Data Citra Colour 127 Tabel Warna (Palet)

• Jaman dahulu di masa resource dan kemampuan menampilkan warna terbatas, digunakan halftoning

(2)

(2)

• 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

• 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 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)

• 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.

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 public

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

• 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>

• 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);

• 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);

• 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: