Modul Praktikum Grafika Komputer

i
TATA TERTIB PRAKTIKAN LABORATORIUM 1 & 2
1. Praktikan Lab I dan II adalah mahasiswa yang terdaftar dan mengikuti mata
kuliah yang bersangkutan.
2. Praktikan wajib hadir sesuai dengan waktu praktikumnya.
3. Praktikan yang terlambat dari 15 menit tidak dapat mengikuti praktikum.
4. Praktikan yang tidak mengisi absensi lebih dari 3 kali, tidak dapat mengikuti
UAS tanpa alasan apapun.
5. Praktikan yang tidak dapat mengikuti praktikum karena sakit dapat mengikuti
praktikum susulan(di kelas lain) jika melampirkan surat keterangan sakit dari
dokter.
6. Pakaian yang digunakan pada saat praktikum adalah:
6.1. Putra
6.1.1. Memakai kemeja (bukan bahan kaos) bersih dan rapih(dimasukkan).
6.1.2. Celana panjang bahan katun bersih dan rapih.
6.1.3. Tidak memakai aksesoris yang berlebihan.
6.2. Putri
6.2.1. Kemeja lengan panjang bersih dan rapih(tidak digulung), bukan
kaos, tidak ketat dan tidak transparan. Untuk yang berjilbab, baju
lengan panjang bukan kaos, tidak ketat dan tidak transparan.
6.2.2. Rok panjang bahan katun bersih dan rapih, tidak ketat, tidak
berbelah dan tidak transparan.
6.2.3. Tidak memakai aksesoris yang berlebihan
7. Praktikan yang berpakaian tidak sesuai dengan aturan diatas diberi waktu 15
menit dari waktu praktikum agar berpakain seperti yang disebutkan diatas.
8. Praktikan dilarang makan, minum dan merokok pada saat praktikum
berlangsung.
9. Praktikan dilarang mengganggu, mengubah, merusak, dan mengotori perangkat
keras maupun perangkat lunak yang berada di laboratorium.
10. Praktikan dilarang meninggalkan sampah di dalam laboratorium.
11. Praktikan dilarang mengaktifkan HP pada saat praktikum berlangsung.
12. Praktikan dilarang bermain game pada saat praktikum berlangsung.
13. Tidak boleh membuka aplikasi lain pada saat praktikum berlangsung.
14. Selesai melaksanakan praktikum, praktikan wajib merapikan peralatan yang
digunakan.
15. Praktikan dilarang membawa contekan dalam bentuk apapun ke dalam
laboratorium pada saat ujian.
16. Praktikan yang melanggar peraturan diatas akan diberi peringatan dan dicatat
dalam black book(daftar hitam).
17. Praktikan diwajibkan menggunakan sepatu jika akan mengikuti kegiatan
praktikum dan disimpan di tempat yang telah disediakan.
18. Aturan lainnya akan ditentukan kemudian.
Modul Praktikum Grafika Komputer
ii
DAFTAR ISI
Halaman
TATA TERTIB ............................................................................................... i
DAFTAR ISI .................................................................................................. ii
TUGAS PENDAHULUAN................................. 1
BAB I PENDAHULUAN ............................................................................. 2
Pengenalan Grafika Komputer ................................................................ 2
Pemanfaatan Grafika Komputer Secara Umum... 2
Java Untuk Belajar Pemograman Grafik.. 3
Fasilitas Grafik Pada Java 3
Tugas Praktikum I .................................................................................. 5
BAB II PENGGAMBARAN GARIS LURUS. 6
Garis...................................................................................... 9
Lingkaran...................................................................................... 8
Tugas Praktikum II................................................................................... 9
BAB III TRANSFORMASI DUA DIMENSI.... 10
Transformasi Objek................................................................................... 10
Koordinat Homogen .................................................................................. 12
Tugas Praktikum III .................................................................................. 14
BAB IV TRANSFORMASI TIGA DIMENSI... 15
Transformasi Objek................................................................................... 15
Tugas Praktikum IV .................................................................................. 14
BAB V WINDOWING AND CLIPPING... 19
Tugas Praktikum V .................................................................................. 20
Modul Praktikum Grafika Komputer
Page 1
TUGAS PENDAHULUAN
1. Jelaskan apa yang kamu ketahui tentang grafika komputer!
2. Sebutkan method-method yang ada pada java yang digunakan untuk menggambar
serta fungsi-fungsinya?
3. Sebutkan perbedaan grafik vektor dan grafik bitmap!
4. Apakah ada perbedaan antara Algoritma DDA dan Algoritma Bresenham, jelaskan!
5. Jelaskan apa yang kamu ketahui tentang windowing dan clipping!
6. Coba jelaskan tentang viewport!
Modul Praktikum Grafika Komputer
Page 2
BAB I
PENDAHULUAN
Tujuan : - Memahami dasar grafika komputer dan implementasinya di dunia nyata.
- Mengenal method dan class-class yang digunakan untuk menggambar.
Pengenalan Grafika Komputer
Grafika komputer adalah merupakan bidang yang berhubungan dengan
penanganan grafik vektor dan gambar pada komputer. Istilah grafika komputer sendiri
dicetuskan pada tahun 1960-an oleh William Fetter untuk menggambarkan metode
desain baru.
Perhaps the best way to define computer graphics is to find out what is it not. It is not
a machine. It is not a computer, nor a group of computer programs. It is not the know-
how a graphic designer, a programmer, a writer, a motion picture specialist, or a
reproduction specialist.
Computer graphics is all these a consciously managed and documented technology
directed toward communicating information accurately and descriptively.
Computer Graphics, by William Fetter, 1966.
Pemanfaatan Grafika Komputer Secara Umum
- CAD, GIS
- Graph, Charts and Models
- Computer Art
- Computer Animation, Visualization
- Graphical User Interface
- Graphics for Home Usage
- Image Processing
Modul Praktikum Grafika Komputer
Page 3
Java untuk belajar pemograman Grafik
Java merupakan bahasa yang cross platform, dan sudah menyediakan primitif
grafik 2D dan secara opsional grafik 3D melalui paket tambahan pada kelas-kelas
Java2D dan Java3D. Java cukup mudah dipelajari, dan bisa mengakses mode grafik
dalam lingkungan manapun (X Windows, GDI Windows, dll).
Fasilitas Grafik pada JAVA
Method yang digunakan untuk menggambar adalah method paint, yang
merupakan turunan dari class Graphics. Method-method yang ada dan digunakan untuk
menggambar, diantaranya :
- drawstring (String, int x, int y)
Fungsinya adalah untuk menulis String yang kita inginkan pada koordinat (x,y).
- drawLine (int x1, int y1, int x2, int y2)
Fungsinya adalah untuk membuat garis dari titik (x1,y1) hingga (x2,y2).
- drawRect (int x, int y, int width, int height)
Fungsinya adalah untuk membuat kotak pada koordinat awal (x,y) sebagai titik
pojok kiri atas.
- drawOval (int x, int y, int width, int height)
Fungsinya adalah untuk membuat oval pada koordinat awal (x,y) sebagai titik
pojok kiri atas.
Contoh :
//nama file : cartesius.java
import java.awt.*;
import javax.swing.*;
public class cartesius extends Canvas
{
public cartesius()
{
setSize(800, 600);
}
public static void main(String[] args)
{
JFrame f = new JFrame("Cartesius");
f.setSize(820, 620);
f.setResizable(false);
Modul Praktikum Grafika Komputer
Page 4
Container content = f.getContentPane();
content.add(new cartesius());
f.setDefaultCloseOperation();
f.show();
}
public void paint(Graphics g)
{
//start draw cartesius
g.drawLine(400,0,400,600);
g.drawLine(0,300,800,300);
g.drawString("[0,0]",405,315);
g.drawString("Sumbu X",740,315);
g.drawString("Sumbu Y",405,560);
for (int i=10;i <= 400 ;i += 10 )
{
g.drawLine(400 - i, 300 - 2, 400 - i, 300 + 2);
g.drawLine(400 + i, 300 - 2, 400 + i, 300 + 2);
g.drawLine(400 - 2, 300 - i, 400 + 2, 300 - i);
g.drawLine(400 - 2, 300 + i, 400 + 2, 300 + i);
}
//end draw cartesius
}
}
Class cartesius apabila di instantiasikan akan menghasilkan objek berupa canvas yang
didalamnya telah tergambar diagram cartesius.
Modul Praktikum Grafika Komputer
Page 5
TUGAS PRAKTIKUM I
1. Buatlah program untuk menggambar sebuah garis lurus, segitiga, persegiempat
dan lingkaran!
2. Buatlah program untuk menggambar persegiempat dan lingkaran, berdasarkan
koordinat awal yang diinputkan dan lebar serta tingginya (width, height)!
3. Buat Gambar seperti dibawah ini!
Modul Praktikum Grafika Komputer
Page 6
BAB II
PENGGAMBARAN GARIS LURUS
Tujuan : - Memahami algoritma-algoritma untuk penggambaran garis lurus dan lingkaran
- Mengimplementasikan algoritma-algoritma penggambaran garis lurus ke dalam listing program
A. GARIS
Dalam bab ini akan dibahas mengenai sistem koordinat yang dipakai dalam
pembahasan algoritma.
Terdapat tiga algoritma untuk menggambarkan suatu garis lurus, yaitu :
1. Algoritma Dasar
2. Algoritma DDA (Digital Differential Analyzer)
3. Algoritma Bresenham
Koordinat layar berlaku seperti matrix, artinya kita tidak bisa secara sembarang
meletakkan titik di sembarang tempat, biasanya koordinat selalu positif dengan titik
kiri atas adalah koordinat 0,0, ke arah kanan positif, dan ke arah bawah positif
(keduanya semakin membesar). Sumbu X ke arah kanan dan Y ke arah bawah.
Algoritma Dasar
Untuk setiap interval x terdapat nilai korespondensi y dengan interval y.
b x m y + = *
1 2
1 2
x x
y y
m

=
1 * 1 x m y b =
Kelemahan Algoritma Dasar :
1. Apabila nilai x sama (x1 = x2), maka akan terjadi division by zero.
2. Penggambaran yang diawali dengan koordinat yang lebih besar daripada
setelahnya (x1 > x2)
Algoritma DDA
Langkah langkah :
Modul Praktikum Grafika Komputer
Page 7
1. Inputkan (x1, y1) dan (x2, y2)
2. Hitung dx dan dy dimana, dx = x2 x1
dy = y2 y1
3. Jika |dx| > |dy| maka s = |dx|, selain itu s = |dy|
4. Hitung :
s
dx
x = A ;
s
dy
y = A
5. Tentukan : x = x1 ; y = y1
6. Hitung : x x x A + =
y y y A + =
7. Lakukan langkah 6 sebanyak s kali.
Algoritma Bresenham
Langkah langkah :
1. Inputkan (x1, y1) dan (x2, y2)
2. Hitung x dan y, dimana : 1 2 x x x = A
1 2 y y y = A
3. Hitung a dan b dimana :
if y x A > A x a A = A & y b A = A
else y a A = A & x b A = A
4. Hitung a b A A = V * 2
5. Tentukan m1 dan m2
- m1 = M3, jika y x A > A dan 0 > Ax
- m1 = M5, jika y x A < A dan 0 < Ay
- m1 = M7, jika y x A > A dan 0 < Ax
- m1 = M1, jika y x A < A dan 0 > Ay
- m2 = M2, jika 0 > Ax dan 0 > Ay
- m2 = M4, jika 0 > Ax dan 0 < Ay
- m2 = M6, jika 0 < Ax dan 0 < Ay
- m2 = M8, jika 0 < Ax dan 0 > Ay
6. Jalankan m2, jika 0 > V , lalu hitung a b A A + V = V * 2 * 2
Jalankan m1, jika 0 < V , lalu hitung b A + V = V * 2
M
1
M
5
M
3
M
7
M
2
M
8
M
4
M
6
Modul Praktikum Grafika Komputer
Page 8
7. Ulangi langkah 5, hingga mencapai tujuan (x2, y2).
B. LINGKARAN
- Persamaan lingkaran
- Sifat simetri dari lingkaran dan properti lingkaran yaitu pusat dan jari-jari,
dapat digunakan cara polar
- Algoritma biasa dan polar memiliki kelemahan dalam penampilan lingkaran.
Kelemahan ini dieliminasi oleh algoritma Bresenham
2 2 2
( ) ( ) x xc y yc r + =
2 2
( ) y yc r x xc =
.cos
sin
x xc r
y yc r
u
u
= +
= +
Modul Praktikum Grafika Komputer
Page 9
TUGAS PRAKTIKUM II
1. Buatlah program untuk menghitung transformasi garis lurus berdasarkan 2 buah
titik yang diinputkan dengan menggunakan algoritma DDA!
2. Buatlah program untuk menghitung transformasi garis lurus berdasarkan 2 buah
titik yang diinputkan dengan menggunakan algoritma Bresenham!
3. Buatlah program untuk menggambar lingkaran!
Modul Praktikum Grafika Komputer
Page 10
BAB III
TRANSFORMASI DUA DIMENSI
Tujuan : -Memahami transformasi objek pada pusat (0, 0) dan pusat sembarang.
- Mengimplementasikan algoritma kedalam listing program.
- Memahami perbedaan tranformasi objek pada pusat (0,0) dan koordinat homogen.
A. Tranformasi Objek
Sebuah titik X ditranformasikan dengan matriks T, diformulasikan sebagai
berikut :
| | | | | | | | | | * * ) ( ) ( y x dy bx cy ax
d c
b a
y x T X = + + =
(

=
a. Translasi (Pergeseran)
Translasi adalah tranformasi yang memindahkan objek dengan bentuk
yang sama (tidak mengalami perubahan). Dengan demikian, setiap titik dari
objek yang akan ditranslasi dengan besaran yang sama dimana (x, y) adalah
koordinat asal objek tersebut, dan (x, y) adalah koordinat baru hasil
perpindahan.
b. Scaling (Penskalaan)
Tranformasi skala adalah perubahan ukuran suatu objek dengan
mengalikan objek tersebut dengan matriks scaling. Ada dua jenis penskalaan,
yaitu :
- Uniform Scaling
- Non-Uniform Scaling
Dan dua jenis ukuran scaling :
- Expansion, a = d > 1
- Compression, 0 < a=d < 1
Matriks Scaling =
(

Sy
Sx
0
0
Keterangan :
Sx merupakan faktor skala ke arah Horizontal
Modul Praktikum Grafika Komputer
Page 11
Sy merupakan faktor skala ke arah Vertikal
c. Shearing
Shearing adalah bentuk tranformasi yang membuat distorsi bentuk dari
objek tersebut, seperti menarik sisi tertentu.
Matriks Shearing =
(

1
1
h
g
Keterangan :
g nilai shearing terhadap sumbu X
h nilai shearing terhadap sumbu Y
d. Rotasi (Perputaran)
Terdapat dua macam rotasi, yaitu :
1. Rotasi searah jarum jam (CW), biasanya dinyatakan dengan sudut
negatif.
Matriks CW =
(

u u
u u
cos sin
sin cos
2. Rotasi berlawanan arah jarum jam (CCW), biasanya dinyatakan
dengan sudut positif.
Matriks CCW =
(

u u
u u
cos sin
sin cos
e. Refleksi (Pencerminan)
Ada empat jenis pencerminan, yaitu :
1. Refleksi terhadap sumbu X
Matriks X =
(

1 0
0 1
2. Refleksi terhadap sumbu Y
Matriks Y =
(

1 0
0 1
Modul Praktikum Grafika Komputer
Page 12
3. Refleksi terhadap sumbu X = Y
Matriks XY =
(

0 1
1 0
4. Refleksi terhadap sumbu X = -Y
Matriks XminY =
(

0 1
1 0
B. Koordinat Homogen
Koordinat homogen memetakan titik (0, 0) ke posisi lain.
Matriks Transformasi Umum :
| |
(
(
(

=
s n m
q d c
p b a
T
a. Translasi (Pergeseran)
(
(
(

=
1 0 0
0 1 0
0 0 1
MTU
b. Scaling (Penskalaan)
(
(
(

=
1 0 0
0 0
0 0
Sy
Sx
MTU
c. Shearing
(
(
(

=
1 0 0
0 1
0 1
h
g
MTU
d. Rotasi (Perputaran)
Langkah langkah :
1. Geser pusat rotasi ke sumbu origin (0, 0)
2. Lakukan rotasi sebesar
o
Modul Praktikum Grafika Komputer
Page 13
3. Geser kembali pusat rotasi ke semula
4. Sehingga didapat :
| |
(
(
(

(
(
(

(
(
(

=
1
0 1 0
0 0 1
1 0 0
0 cos sin
0 sin cos
1
0 1 0
0 0 1
n m n m
T MTU u u
u u
e. Refleksi (Pencerminan)
Langkah langkah :
1. Translasikan cermin hingga menyentuh sumbu origin (0, 0)
2. Rotasikan cermin sehingga berimpit dengan salah satu sumbu utama
3. Refleksikan objek
4. Rotasikan objek ke posisi awal
5. Translasikan garis refleksi ke posisi awal
6. Sehingga diperoleh MTU :
| | | | | | | | | || |
1 1
= Tr Rot Rf Rot Tr T MTU
Keterangan :
MTU = Matriks Tranformasi Umum
[T] = matriks objek asli
Modul Praktikum Grafika Komputer
Page 14
TUGAS PRAKTIKUM III
1. Buatlah tranformasi objek (bebas, selain garis), meliputi Translasi, Scaling,
Shearing, Rotasi dan Refleksi dengan menggunakan menu pilihan!
2. Buatlah transformasi objek (bebas, selain garis), gunakan koordinat homogen,
(koordinat awal diinputkan)!
Modul Praktikum Grafika Komputer
Page 15
BAB IV
TRANSFORMASI TIGA DIMENSI
Tujuan : - Memahami transformasi objek menggunakan 3 sumbu (3 dimensi).
- Mengimplementasikan algoritma kedalam listing program.
- Menggunakan koordinat 3 sumbu, yaitu x, y, z.
- Sebuah titik pada ruang 3 dimensi dituliskan sebagai | | 1 z y x
- Tranformasi 3 dimensi dituliskan sebagai | | | | | | T z y x z y x 1 1
1 1 1
=
- MTU 3 Dimensi :
(
(
(
(

=
s n m l
r i h g
q f e d
p c b a
MTU
Tranformasi Objek
a. Translasi
(
(
(
(

=
1
0 1 0 0
0 0 1 0
0 0 0 1
tz ty tx
MTU
tx = pergeseran kearah X
ty = pergeseran kearah Y
tz = pergeseran kearah Z
b. Scaling
- Local Scaling
(
(
(
(

=
1 0 0 0
0 0 0
0 0 0
0 0 0
Sz
Sy
Sx
MTU
Sx = penskalaan kearah sumbu X
Sy = penskalaan kearah sumbu Y
Modul Praktikum Grafika Komputer
Page 16
Sz = penskalaan kearah sumbu Z
- Overall Scaling
(
(
(
(

=
S
MTU
0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
S = penskalaan
c. Shearing
(
(
(
(

=
1 0 0 0
0 1
0 1
0 1
h g
f d
c b
MTU
b, c, d, f, g, h = nilai shearingnya
d. Rotasi
- Terhadap sumbu X
(
(
(
(

=
1 0 0 0
0 cos sin 0
0 sin cos 0
0 0 0 1
u u
u u
MTU
- Terhadap sumbu Y
(
(
(
(

=
1 0 0 0
0 cos 0 sin
0 0 1 0
0 sin 0 cos
| |
| |
MTU
- Terhadap sumbu Z
(
(
(
(

=
1 0 0 0
0 1 0 0
0 0 cos sin
0 0 sin cos


MTU
e. Refleksi
Modul Praktikum Grafika Komputer
Page 17
- Terhadap bidang XY
(
(
(
(

=
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
MTU
- Terhadap bidang YZ
(
(
(
(

=
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
MTU
- Terhadap bidang XZ
(
(
(
(

=
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
MTU
Modul Praktikum Grafika Komputer
Page 18
TUGAS PRAKTIKUM IV
1. Buatlah program untuk menggambarkan sebuah rangka segitiga. Gambarkan
pula sumbu x, y, z!
2. Buatlah program untuk transformasi 3 Dimensi dengan objek rangka kubus.
Gunakan menu pilihan!
Modul Praktikum Grafika Komputer
Page 19
BAB V
WINDOWING AND CLIPPING
Tujuan : - Memahami perbedaan antara windowing dan viewport
- Mengimplementasikan algoritma kedalam listing program.
- Windowing adalah suatu koordinat yang membatasi daerah yang akan
ditampilkan
- Viewport adalah area yang dipilih untuk ditampilkan setelah dipetakan.
Jadi objek-objek windowing and clipping adalah objek-objek yang dipilih untuk
ditampilkan (objek yang berada dalam area window saja).
Modul Praktikum Grafika Komputer
Page 20
TUGAS PRAKTIKUM 5
1. Buatlah program clipping dengan objek selain garis!