Sejarah dan Gambaran Umum IFRS

Bahasa
Globalisasi OBJEK PRIMITIF
Investasi Standar

SUWANTO SANJAYA, ST, MKOM

JURUSAN TEKNIK INFORMATIKA
FAKULTAS SAINS & TEKNOLOGI
UIN SUSKA RIAU
1
 Pengantar Grafika Komputer
• Grafika komputer adalah suatu bidang yang mempelajari
bagaimana menghasilkan suatu gambar menggunakan
komputer. Sehingga di dalam grafika komputer akan dibahas
teknik-teknik menggambar

• Grafika komputer menghasilkan software-software disain

grafis yang saat ini sudah sangat canggih

• Grafika komputer menghasilkan software dengan GUI

(graphics User Interface) yang memudahkan dan menyenangkan

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Pembagian Ilmu Grafika Komputer

 Geometri, yaitu mempelajari cara menggambarkan permukaan

bidang
 Animasi, yaitu mempelajari cara menggambarkan dan
memanipulasi gerakan, baik secara otomatis maupun manual.
 Rendering, yaitu mempelajari algoritma untuk membuat dan
menampilkan struktur / detail objek.
 Pencitraan (imaging), yaitu mempelajari cara pengambilan dan
penyuntingan gambar.

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Pengolahan Citra VS Grafika Komputer

Pengolahan Citra Grafika Komputer

Mengolah suatu gambar Menghasilkan suatu gambar
Materinya berisi teknik memperbaiki Materinya berisi teknik-teknik
dan menyajikan informasi dari menggambar
gambar
Titik berat pada memanipulasi Cenderung mempelajari
citra sesuai dengan keperluan user konsep dan implementasi metode
untuk pembangkitan citra/animasi
(2D/3D)

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Pengolahan Citra VS Grafika Komputer

Deskripsi Proses Citra / animasi

…
sphere { objek grafika komputer 2D / 3D
0.0, 1
texture {
pigment {
color rgb <0.8,0.8,1.0> }
finish{
diffuse 0.3
ambient 0.0
specular 0.6
reflection {
0.8
metallic }
conserve_energy } } }
…

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Pengolahan Citra VS Grafika Komputer

Citra yang
Proses
Citra awal sesuai dgn
Pengolahan citra
kebutuhan

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Penerapan Grafika Komputer

Desain
Grafik Presentasi
Computer Art
Pendidikan
Hiburan
Visualisasi
Pengolahan Citra
Graphical User Interfaces

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Tugas 1

Jelaskan penerapan grafika

komputer pada masing-masing
bidang yang telah disebutkan di
atas !!

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Objek Primitif
 Sebuah bentuk dasar dari objek grafis yang dapat
dimanipulasi.
 Objek primitif grafik dasar terdiri atas :
a. Titik (Dot) .

b. Garis

c. Segiempat

d. Lingkaran

 Objek kompleks dapat dibuat dengan kombinasi objek

primitif

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Algoritma Pembentukan Garis

 Garis adalah penghubung antara dua buah titik (titik awal

dan titik akhir)
 Garis dibuat dengan menentukan dua endpoint atau posisi
titik awal dan akhir dari suatu garis

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Digital Differential Analyser (DDA)
 DDA merupakan pengembangan algoritma persamaan garis
matematis ( y = mx + c)
 Ide dasar DDA adalah menggunakan nilai pemetaan yang
telah didapat untuk menghitung nilai selanjutnya untuk
mempercepat proses komputasi
 Setiap koordinat titik yang membentuk garis diperoleh dari
perhitungan kemudian dikonversikan menjadi nilai integer
 Dari persamaan y=mx+c maka bisa disimpulkan bahwa:
Y(i) = m x +c
Y(i+1) = Y(i) + m
Y(i+1) = Y(i) + m

Y(i) = m x +c
 Nilai pemetaan selanjutnya
setara dengan kenaikan nilai m
FAKULTAS SAINS DAN TEKNOLOGI
UIN SUSKA RIAU
Digital Differential Analyser (DDA)

y  m.x  c
y 2  y1 y
m 
x2  x1 x

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Algoritma DDA
 Tentukan 2 buah titik
 Tentukan yang menjadi titik awal (X0, Y0) dan titik akhir (X1, Y1)
 Hitung Δx dan Δy  Δx = X1 – X0 dan Δy = Y1 – Y0
 Bandingkan absolut (Δx) dan absolut (Δy)
Jika absolute (Δx) > absolut (Δy), maka :
Steps = absolute (Δx)
bila tidak,
Steps = absolut (Δy)
 Hitung penambahan koordinat pixel, yaitu:
X_increment = Δx/Steps
Y_increment = Δy/Step
 Koordinat selanjutnya yaitu:
X = X + X_increment
Y = Y + Y_increment
 Posisi pixel ditentukan dengan pembulatan nilai koordinat tersebut
 Ulangi langkah diatas untuk posisi selanjutnya sampai X = X1, Y= Y1

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Contoh DDA

Jika ada 2 buah titik A (1, 3) dan B(8, 5) yang dihubungkan

akan membentuk sebuah garis, bagaimanakah
penggambarannya bila menggunakan metode DDA

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Penyelesaian
 Tentukan 2 buah titik
A (1,3) dan B (8,5)

 Tentukan yang menjadi titik awal (X0, Y0) dan titik akhir (X1, Y1)
Titik awal  A (1,3)
Titik akhir  B (8,5)

 Hitung Δx dan Δy  Δx = X1 – X0 dan Δy = Y1 – Y0

Δx = X1 – X0 = 8 – 1 = 7
Δy = Y1 – Y0 = 5 – 3 = 2

 Bandingkan absolut (Δx) dan absolut (Δy)

absolut (Δx) > absolut (Δy) , maka :
Step = absolute (Δx) = 7

 Hitung penambahan koordinat pixel, yaitu:

X_increment = Δx/Steps = 7/7 = 1
Y_increment = Δy/Step = 2/7 = 0,286
FAKULTAS SAINS DAN TEKNOLOGI
UIN SUSKA RIAU
 Algoritma Pembentukan Garis
 Koordinat selanjutnya yaitu:
X = X + X_increment
Y = Y + Y_increment

Perubahan nilai Yi setara

dengan gradien m

 Posisi pixel ditentukan dengan pembulatan nilai koordinat tersebut

 Ulangi langkah diatas untuk posisi selanjutnya sampai X = X1, Y= Y1

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Bresenham
 Dengan mengamati algoritma pembuatan garis sebelumnya
maka dapat dikatakan bahwa : proses perhitungan yang
terjadi seolah-olah menyatakan bahwa nilai pemetaan
berikutnya sama dengan pemetaan sebelumya
 Setelah melakukan penelitian yang serius, maka
seorang pakar menemukan suatu metode dalam
pembuatan garis yang memiliki kecepatan
komputasi yang lebih cepat dibandingkan dengan
metode sebelumnya
 Algoritma Bresenham melakukan proses pemetaan
berdasarkan sebuah decision parameter pk
 Algoritma Bresenham merupakan algoritma
penggambaran garis yang efisien dengan menggunakan
perhitungan incremental integer
FAKULTAS SAINS DAN TEKNOLOGI
UIN SUSKA RIAU
 Algoritma Bresenham
1. Tentukan dua titik yang akan dihubungkan
2. Tentukan yang menjadi titik awal (X0, Y0) dan titik akhir (X1,
Y1)
3. Hitung Δx, Δy,2Δy dan 2Δy - 2Δx
4. Hitung parameter
pk=2Δy - Δx
5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k=0,
Bila pk < 0, maka
titik selanjutnya adalah (xk+1,yk), dan pk+1=pk+2Δy
Bila tidak, maka
titik selanjutnya adalah(xk+1, yk+1), dan pk+1=pk+2Δy-2Δx
6. Ulangi langkah nomor 5 untuk menentukan posisi pixel
selanjutnya, sampai x = x1 dan y = y1

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Contoh

Jika ada 2 buah titik A (1, 3) dan B(8, 5) yang dihubungkan

akan membentuk sebuah garis, bagaimanakah
penggambarannya bila menggunakan Metode Bresenham

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Algoritma Bresenham
1. Tentukan dua titik yang akan dihubungkan
A (1,3) dan B (8,5)

2. Tentukan yang menjadi titik awal (X0, Y0) dan titik akhir (X1, Y1)
Titik awal  A (1,3)
Titik akhir  B (8,5)

3. Hitung Δx, Δy,2Δy dan 2Δy - 2Δx

Δx = X1 – X0 = 8 – 1 = 7
Δy = Y1 – Y0 = 5 – 3 = 2
2Δy = 2*2 = 4
2Δy - 2Δx = 2*2 - 2*7 = -10

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Algoritma Bresenham
4. Hitung parameter
pk = 2Δy - Δx = 2*2 - 7 = -3

5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k=0,

Bila pk < 0, maka
titik selanjutnya adalah (xk+1,yk), dan pk+1=pk+2Δy
Bila tidak, maka
titik selanjutnya adalah(xk+1, yk+1), dan pk+1=pk+2Δy-2Δx
K Xk+1 Yk+1 Pk
- 1 3 -3 6. Ulangi langkah
0 2 3 1 nomor 5 untuk
1 3 4 -9 menentukan posisi
2 4 4 -5 pixel selanjutnya,
3 5 4 -1 sampai x = x1 dan
4 6 4 3 y = y1
5 7 5 -7
6 8 5 -3 FAKULTAS SAINS DAN TEKNOLOGI
UIN SUSKA RIAU
Algoritma Pembentukan Lingkaran
 Lingkaran dapat didefinisikan sebagai kumpulan titik
yang memiliki jarak r dari posisi pusat (xc,yc)
 Persamaan lingkaran dengan titik pusat (xc,yc) dan
radius r dapat dispesifikasikan menggunakan koordinat
rectangular berikut :

 Lingkaran juga dapat didefinisikan menggunakan koordinat

polar

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Kelemahan Penggambaran Lingkaran dengan Koordinat Rectangular
dan Koordinat Polar

 Persamaan dengan koordinat rectangular mengandung

perhitungan akar
 Persamaan dengan koordinat polar menandung fungsi
trigonometri

Kompleksitas tinggi

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Algoritma Midpoint (Bresenham)
 Prinsipnya sama dengan algoritma bresenham dalam
pembentukan garis  menggunakan incremental integer

 Lingkaran merupakan objek yang simetris  karakteristik

ini dapat dimanfaatkan untuk mengurangi pekerjaan pada
saat menggambar lingkaran

 Lingkaran dibagi 8 oktan, misalkan kita menyusun

algoritma untuk menggambarkan lingkaran di oktan
pertama, maka koordinat untuk 7 oktan selanjutnya dapat
ditentukan pada tabel koordinat simetri 8 oktan

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Algoritma Midpoint (Bresenham)

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Algoritma Pembentukan Lingkaran
1. Input jari-jari r dan koordinat pusat lingkaran (xc, yc),
kemudian tntukan koordinat untuk titik awal yaitu
(x0, y0) = (0, r)

2. Hitung nilai awal untuk parameter keputusan pk = 1 – r

3. Untuk setiap xk, mulai dari k=0, lakukan langkah berikut :

jika pk<0, maka
titik selanjutnya pada lingkaran dengan pusat
(0,0) adalah (xk + 1, yk) dan pk+1= pk+ 2(xk+1)+ 1
jika pk≥0, maka
titik berikutnya adalah (xk+ 1, yk - 1) dan
pk+1= pk+ 2(xk+1)+ 1 – 2(yk+1)

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
Algoritma Pembentukan Lingkaran

4. Tentukan titik simetri untuk 7 oktan lainnya dengan

menggunakan tabel koordinasi simetri 8 oktan

5. Untuk lingkaran dengan pusat bukan di (0,0), pindahkan setiap

posisi pixel hasil perhitungan (x, y) dengan rumus
x = x + xc, y =y + yc

6. Ulangi langkah 3 sampai 5, hentikan ketika x >= y

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Contoh

Gambarkan lingkaran dengan persamaan X2 + Y2 = 100

menggunakan algoritma midpoint

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Penyelesaian
1. Input jari-jari r dan koordinat pusat lingkaran (xc, yc),
kemudian tentukan koordinat untuk titik awal yaitu
(x0, y0) = (0, r)
Pusat lingkaran (0,0)
Koordinat titik awal (0,10)

2. Hitung nilai awal untuk parameter keputusan pk = 1 – r

pk = 1-10 = -9

3. Untuk setiap xk, mulai dari k=0, lakukan langkah berikut :

jika pk<0, maka
titik selanjutnya (xk + 1, yk) dan
pk+1= pk+ 2xk+1+ 1
jika pk≥0, maka
titik selanjutnya (xk+ 1, yk - 1) dan
pk+1= pk+ 2 xk+1+ 1 - 2 yk+1
FAKULTAS SAINS DAN TEKNOLOGI
UIN SUSKA RIAU
 Penyelesaian
K Xk+1 Yk+1 Pk Koordinat
- 0 10 -9 (0,10)
0 1 10 -6 (1,10)
1 2 10 -1 (2,10)
2 3 10 6 (3,10)
3 4 9 -3 (4,9)
4 5 9 8 (5,9)
5 6 8 5 (6,8)
6 7 7 6 (7,7)

4. Tentukan titik simetri untuk 7 oktan lainnya dengan

menggunakan tabel koordinasi simetri 8 oktan

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
 Tugas 1

1. Jika ada 2 buah titik K(4, 6) dan L(10, 10 ) yang

dihubungkan dan membentuk sebuah garis,
bagaimanakah penggambarannya dengan menggunakan
metode DDA dan Bressenham ?
2. Gambarkan lingkaran dengan persamaan berikut :
a) X2 +Y2 = 64
b) (X-3)2 + (Y-2)2 = 25

FAKULTAS SAINS DAN TEKNOLOGI

UIN SUSKA RIAU
FAKULTAS SAINS DAN TEKNOLOGI
UIN SUSKA RIAU