GRAFIKA KOMPUTER Nopember 2013

(1)

GRAFIKA KOMPUTER

(2)

Daftar Isi

DAFTAR ISI 2

BAB 1. PENGANTAR GRAFIKA KOMPUTER DAN PEMANFAATNANYA 7

1.1 PENDAHULUAN 7 1.2 PENYAJIAN 7 1.3 PENUTUP 11 1.3.1 SOAL LATIHAN 12 1.3.2 PETUNJUK PENILIAN 12 1.3.3 TINDAK LANJUT 12

BAB 2. TEKNOLOGI DISPLAY 13

2.1 PENDAHULUAN 13 2.2 PENYAJIAN 13 2.3 PENUTUP 17 2.3.1 SOAL LATIHAN 17 2.3.2 PETUNJUK PENILAIAN 17 2.3.3 UMPAN BALIK 17

BAB 3. SYNTHETIC CAMERA 18

3.1 PANDAHULUAN 18

3.2 PENYAJIAN 18

3.3.1 SOAL LATIHAN 23

3.3.2 PETUNJUK PENILAIAN 23

(3)

BAB 4. WARNA 24 4.1 PENDAHULUAN 24 4.2 PENYAJIAN 24 4.3 PENUTUP 28 4.3.1 SOAL LATIHAN 28 4.3.2 PETUNJUK PENILAIAN 28 4.3.3 UMPAN BALIK 28

BAB 5. SISTEM KOORDINAT 30

5.1 PENDAHULUAN 30 5.2 PENYAJIAN 30 5.3 PENUTUP 32 5.3.1 SOAL LATIHAN 33 5.3.2 PETUNJUK PENILAIAN 33 5. 3.3 UMPAN BALIK 33

BAB 6. ALGORITHMA GARIS 34

6.1PENDAHULUAN 34 6.2 PENYAJIAN 34 6.3 PENUTUP 38 6.3.1 SOAL LATIHAN 38 6.3.2 PETUNJUK PENILAIAN 39 6. 3.3 UMPAN BALIK 39

BAB 7. ALGORITMA LINGKARAN 40

7.1 PENDAHULUAN 40

7.2 PENYAJIAN 40

(4)

7.3.1 SOAL LATIHAN 42 7.3.2 PETUNJUK PENILAIAN 42 7. 3.3 UMPAN BALIK 42 BAB 8. CLIPPING 43 8.1 PENDAHULUAN 43 8.3 PENUTUP 50 8.3.1 SOAL LATIHAN 50 8.3.2 PETUNJUK PENILAIAN 51 8. 3.3 UMPAN BALIK 51

BAB 9. TRANSFORMASI 2 DISMENSI 52

BAB 10. TRANSFORMASI 3 DIMENSI 59

10.1 PENDAHULUAN 59 10.2 PENYAJIAN 59 10.3 PENUTUP 63 10.3.1 SOAL LATIHAN 63 10.3.2 PETUNJUK PENILAIAN 64 10. 3.3 UMPAN BALIK 64 BAB 11. PROYEKSI 65

(5)

11. 1 PENDAHULUAN 65

11. 3.1 SOAL LATIHAN 69

11. 3.3 UMPAN BALIK 70

BAB 12. 3D STREET ART 71

BAB 13. UJIAN TENGAH SEMESTER 77

13.2 PENYAJIAN -‐ SOAL UJIAN 77

13.3 PENUTUP 78

13.3.1 SOAL 78

BAB 14. UJIAN AKHIR SEMESTER 79

13.2 PENYAJIAN -‐ SOAL UJIAN 79

14.3 PENUTUP 80

14.3.1 SOAL 80

(6)

(7)

Bab 1. Pengantar Grafika Komputer dan

Pemanfaatnanya

1.1 Pendahuluan

Grafika Komputer merupakan merupakan cabang ilmu komputer yang membahas algorithma untuk menampilkan simulasi (benda). Grafika komputer tidak sama dengan pemrosesan citra (image processing) Mata kuliah grafika komputer tidak membahas software komersial seperti adobe photoshop, corel draw dan sebagainya. Mata kuliah grafika komputer juga tidak membahas tentang grafik bisnis, seperti diagram pie, diagram garis dan sebagainya.

1.2 Penyajian

Grafika Komputer mencakup area : o Film (spesial effects) o Industri :

§ CAD (computer aided design) § Automated machining

o Visualisasi : § data ilmiah

§ hasil medik (scanning,X-Ray, MRI) o Permainan Komputer

o Distribusi Online Film

(8)

Pemodelan Industri

(9)

Medical

(10)

Tiga tema utama dalam grafika komputer : q Modeling

n Bagaimana kita merepresentasikan (= memodelkan) objek 3 Dimensi ?

n Bagaimana kita dapat membuat model dari objek-objek tertentu ?

q Animation

n Bagaimana kita merepresentasikan gerakan sebuah objek n Bagaimana kita dapat memberikan kendali kepada pembuat

animasi (animator) dalam pembuatan animasi q Rendering

n Bagaimana kita mensimulasikan formasi gambar

n Bagaimana kita dapat mensimulasikan cahaya seperti pada dunia nyata?

Modelling dapat diartikan dalam beberapa poin penting, sebagai berikut n Representasi objek / lingkungan

q shape — geometri dari sebuah objek

q appearance — emission, reflection, and transmission of light

Untuk membuat modelling dilakukan dengan langkah sebagai berikut q deskripsimanual (misal : menuliskan rumus)

q manipulasi secara interaktif q menggunakan prosedur / program

q melakukan pemindaian (scanning) dari objek riil

Pergereakan model dilakukan dengan memperhatikan

q posisi, sudut dan sebagainya sebagai fungsi dari waktu

Proses dan caranya kita mengendailkan gerakan

q membuat gerakan menggunakan tangan, mengisi keyframe

q simulasi perilaku (membat program yang berfungsi sebagai "otak" dari sebuah objek)

(11)

q simulasi fisika q menangkap gerakan

Proses caranya kita meniru dunia nyata ?

q cahaya yang datang difokuskan oleh lensa q energi cahaya mempengaruhi film

q representasi gambar sebagai titik-titik / pixels (x,y) q membutuhkan representasi dari kamera

Proses caranya kita meniru perilaku cahaya?

q cahaya dianggap sebagai photon (partikel cahaya) q menangkap gerak lurus dari photon

q membuat model interaksi antara cahaya dengan permukaan benda

Gambar Diagram Proses Grafika Komputer

1.3 Penutup

Grafika Komputer sangat beragam dapat diimplementasikan dalam berbagai hal. Proses terpentingnya adalah melakukan pemodelan baik 2d ataupun 3D kemudian memanipulasi, visualisasi dan tampilan.

(12)

1.3.1 Soal Latihan

1. Bagaimana kita merepresentasikan (= memodelkan) objek 3 Dimensi ? 2. Bagaimana kita dapat membuat model dari objek-objek tertentu ? 3. Bagaimana kita merepresentasikan gerakan sebuah objek

4. Bagaimana kita dapat memberikan kendali kepada pembuat animasi (animator) dalam pembuatan animasi

5. Bagaimana kita mensimulasikan formasi gambar

6. Bagaimana kita dapat mensimulasikan cahaya seperti pada dunia nyata?

1.3.2 Petunjuk Penilian

Soal Latihan dinilai untuk mereview pemahaman mahasiswa dalam menerima materi. Penilaian dilakukan dengan dasar sebagai berikut:

Benar kurang dari 50% dianggap belum memahami Benar antara 50% sd 70% dianggap cukup memahami Benar 70% sampai 100% dianggap menguasai

1.3.3 Tindak Lanjut

Apabila rata-rata kelas dibelum memahami, maka materi harus disampaikan ulang di dalam kelas.

(13)

Bab 2. Teknologi Display

2.1 Pendahuluan

Materi Teknologi Display disampaikan pada minggu ke -2 dengan tujuan menjelaskan cara, metode dan teknologi dalam penampilan gambar.

2.2 Penyajian

Ada dua cara menampilkan gambar : • Vector Display • Raster Display

Vector Display adalah gambar ditampilkan sebagai kumpulan segmen garis (vector)

Raster Display adalah gambar ditampilkan sebagai kumpulan titik (pixel)

Raster Display menggunakan peralatan seperti : • Cathode Ray Tube (CRT) / Tabung sinar katoda

o Tabung vakum yang berisi sumber elektron yang digunakan untuk melihat gambar untuk mempercepat dan membelokkan berkas elektron ke layar neon untuk menciptakan gambar. Gambar dapat mewakili bentuk gelombang listrik (osiloskop), gambar (televisi, monitor komputer), radar target dan lain-lain

(14)

o Sebuah layar plasma adalah video tampilan komputer dimana setiap piksel pada layar diterangi oleh sedikit kecil plasma atau gas yang dibebankan, agak seperti lampu neon kecil.

Plasma menampilkan lebih tipis dari tabung sinar katoda (CRT) menampilkan dan lebih terang dari liquid crystal display (LCD).

• Liquid Cristal Display (LCD)

o Suatu jenis display yang menggunakan Liquid Crystal sebagai media refl eksinya. LCD sudah digunakan di berbagai bidang, sebagai contoh: monitor,TV, kalkulator. Pada LCD berwarna semacam monitor terdapat puluhan ribu pixel. Pixel adalah satuan terkecil di dalam suatu LCD. Pixel-pixel yang berjumlah puluhan ribu inilah yang membentuk suatu gambar dengan bantuan perangkat controller, yang terdapat di dalam suatu

monitor.

• Prinsip kerja : menyalakan / mematikan satu titik di penampil.

Metode CRT

• Paling banyak digunakan

• Bekerja berdasarkan prinsip scanning : – Horizontal Scanning

– Vertical Scanning

• Scanning harus dilakukan dengan cepat untuk mencegah efek kerdipan (flicker)

(15)

• Liquid Crystal Displays (LCDs)

– LCDs: organic molecules, naturally in crystalline state, that liquefy when excited by heat or E field

– Crystalline state twists polarized light 90º.

• Plasma display panels

– Similar in principle to fluorescent light tubes

(16)

– UV excites phosphor

– Phosphor relaxes, emits some other color

Raster Display System

• Setiap kondisi pixel di layar disimpan ke dalam memori yang disebut : frame buffer.

• Pixel mempunyai informasi mengenai : – lokasi = lokasi memori di frame buffer

(17)

• banyaknya (lokasi) pixel yang dapat disimpan disebut sebagai resolusi

– warna = banyaknya byte di frame buffer = 2n

• 1 bit memori = 21

warna = 2 warna • 4 bit memori = 24

warna = 16 warna • 8 bit memori (1 byte) = 28

warna = 256 warna

– Kapasitas memori membatasai banyaknya pixel yang ditampilkan dan warna yang dapat direpresentasikan.

2.3 Penutup

Teknologi Display menjelaskan konsep LCD, CRT dan Raster. Dengan

memahaminya akan memudahkan bagaimana penampilan grafis dapat dilakukan.

2.3.1 Soal Latihan

1. Jelaskan proses kerja Raster dan Vector Display! 2. Apa perbedaan teknologi LCD, Plasma dan Raster

2.3.2 Petunjuk Penilaian

Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan 2 item penting dalam soal latihan. Penilian subyektif diserahkan kepada dosen

pengampu

2.3.3 Umpan Balik

Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang akan dijelaskan.

(18)

Bab 3. Synthetic Camera

3.1 Pandahuluan

Synthetic camera disampaikan dalam materi grafika komputer minggu ke 3. Tujuan matakuliah ini untuk mengenalkan proyeksi perpektif dengan mata berada di sumbu proyeksi sangat membatasi sudut pandang. Memutar objek agar memperoleh sudut pandang yang berbeda sangat tidak efisien. Pendekatan lain adalah dengan menggunakan synthetic camera

3.2 Penyajian

Citra objek dibawa cahaya menuju lensa sehingga di lensa muncul bayangan objek, oleh cahaya bayangan tersebut kemudian diteruskan ke film (plastik yang dilapisi dengan bahan kimia peka cahaya) sehingga menimbulkan reaksi kimia yang membentuk citra objek

Synthetic camera adalah metoda memposisikan ‘camera’ untuk melihat benda. Membutuhkan tiga komponen :

• Bidang proyeksi

(19)

• mata.

Cara kerjanya adalah objek dipindahkan ke koordinat viewer dan kemudian 'bayangan' objek diproyeksikan perspektif. Objek perlu dipindahkan ke koordinat viewer agar posisi objek sesuai dengan (align) arah mata.

Viewing Coordinate

Viewing coordinate sering juga disebut sebagai UVN system. Sistem koordinat UVN mempunyai tiga sumbu :

l U l V l N

Viewing coordinate diperoleh berdasarkan informasi mengenai :

l posisi kamera pada world coordinate, posisi ini disebut juga sebagai VRP (Viewing Reference Point).VRP ditentukan berdasarkan vector r = (rx, ry,rz)

l Arah viewplane, disebut sebagai VPN (Viewplane Normal) dan ditentukan berdasarkan vector n (nx,ny,nz). Vector n ditentukan

berdasarkan world coordinate.

l Arah sumbu V ditentukan berdasarkan vector u. Vector u bersifat tegak lurus terhadap n dan v.

(20)

l posisi mata (eye) ditentukan dalam viewing coordinate dan disimbolkan dengan e = (eu,ev,en). Umumnya e berisi (0,0,E)

Untuk menghitung n,v dan u, Pemakai dapat menentukan nilai n dengan memasukkan vector norm dan vector n dihitung sebagai :

Untuk memperoleh norm, tentukan titik yang menjadi pusat pandang camera (look at) dan kemudian norm dihitung sebagai : norm = scene - r

Vector v ditentukan oleh pemakai berdasarkan vector up (ux,uy,uz) dan dihitung

sebagai :

norm | norm |

(21)

l Catatan :

l tanda • menyatakan dotproduct dua vector l tanda |up’| menyatakan panjang vector up’

Karena vector u harus tegak lurus terhadap n dan v maka vector u dapat diperoleh dari :

l Catatan : n x v menyatakan cross product

Vieweing Coordinate

Setiap titik di world coordinate (w) dapat ditransformasikan ke viewing coordinate (p) dengan menggunakan rumus :

'

*

)

(

'

up

v

n

up

=

• −

=

v

n

u

₌

_×

n =

(22)

Setelah titik di world coordinate di transformasikan ke viewplane maka tahap selanjutnya adalah melakukan proyeksi perspektif terhadap titik di viewplane.

Jika diketahui titik p=(pu;pv;pn) adalah titik di viewplane dan mata terletak di

(eu;ev;en) maka titik q (u*,v*) sebagai proyeksi perspektif dari p dapat diperoleh

dengan

Apabila e = (0,0,en) maka rumus di atas dapat disederhanakan menjadi

3.3 Penutup

Synthetic camera mengenalkan proyeksi perpektif dengan mata berada di sumbu proyeksi sangat membatasi sudut pandang. Memutar objek agar memperoleh sudut pandang yang berbeda sangat tidak efisien.

t = w - r

pu = t • u

pv = t • v

pn = t • n

**u* =**

e

_n

p

_u

- e

_u

p

_n

e

_n

- p

_n

_v*

=

e

_n

p

_v

- e

e

_v

n

p

- p

_n

n

**u* =**

p

e

_n

(23)

1-3.3.1 Soal Latihan

1. Jelaskan bagaimana cara kerja synthetic camera?

3.3.2 Petunjuk Penilaian

Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian subyektif diserahkan kepada dosen pengampu

3.3.3 Umpan Balik

(24)

Bab 4. Warna

4.1 Pendahuluan

Materi tentang warna menjelaskan proses pemberian dan hasil yang utampilkan ketika pewarnaan terhadap ssuatu objek selesai dijalankan.

4.2 Penyajian

Warna sebenarnya merupakan persepsi kita terhadap pantulan cahaya dari benda-benda.

Cahaya merupakan energi elektromagnetik. Cahaya dapat dibagi menjadi dua bagian : q Cahaya terlihat (visible light) yaitu bagian dari energi elektromagnetik

dengan panjang gelombang 400-700 nm (nanometer)

q Cahaya tidak terlihat (invisible light) yaitu bagian dari energi

elektromagnetik dengan panjang gelombang < 400 nm atau > 700 nm Mata manusia hanya peka terhadap panjang gelombang 400 - 700 nm dan perbedaan panjang gelombang tersebut dipersepsikan sebagai 'warna'.

(25)

Spektrum Warna

Proses Manusia Melihat Warna

Bagian mata yang sensitif terhadap cahaya disebut sebagai retina, retina berisi dua macam kelompok sel yaitu : rod dan cone.

Rods

q Hanya dapat membedakan terang dan gelap (hitam / putih) q Mata mempunyai 120 juta rod

q Tidak sensitif terhadap warna Cones

q Bagian retina yang peka terhadap warna q Mata mempunyai 60 juta cones

q Ada tiga macam cones, masing-masing peka terhadap warna merah (L), biru (S) dan hijau (M).

(26)

q Dapat membedakan 200 warna sekaligus

Fovea adalah arena di retina yang berisi cones, Berukuran 1/150 inch, Fovea hanya mempunyai sudut pandang sebesar 1,7 derajad. Diluar itu gambar terlihat kabur. Setiap cones di fovea mempunyai satu jalur syaraf ke otak dan dapat mengirim 'gambar' sekaligus (paralel). Bandingkan : Video Kamera mempunyai 400.000 sensor tetapi hanya dapat mengirim 'gambar' satu persatu (stream).

Warna dapat diproduksi berdasarkan dua cara : q Substractive Colour

q Additive Colour

Substractive : warna dihasilkan sebagai akibat dari diserapnya warna tertentu. q Tinta cetak

Additive : warna dihasilkan sebagai campuran dari warna yang dipancarkan oleh sumber cahaya.

(27)

Ada berbagai cara untuk menghasilkan warna menggunakan komputer. Beberapa model warna yang digunakan antara lain :

q RGB q HSV / HSB q HLS

q CMY(K) q CIE

Warna diperoleh dari campuran tiga warna dasar (primary color), yaitu : Red, Green, Blue. Setiap komponen warna disimpan sebagai angka dari 0-255 (0-FF), dengan

q 0 = tidak ada komponen

q 255 = komponen digunakan penuh

Menggunakan warna dasar (primary color) : Cyan, Magenta, Yellow dan Black. Warna lain diperoleh karena campuran warna dasar menyerap warna dasar dan memantulkan warna yang diinginkan.

HSB merupakan sistem warna yang menggunakan ukuran :

q Hue : warna yang diinginkan, diukur dengan nilai 0o

- 360o

, dengan 0o

= red,12o

=green, 240o

=blue

q Saturation : keaslian warna, diukur dengan nilai 0% - 100%. Nilai 0 menyatakan warna putih dan 100% menyatakan warna asli

q Value / Brightness : pengaruh kecerahan, 0% menyatakan tidak ada cahaya (hitam) dan 100% menyatakan warna putih.

HLS, Menggunakan ukuran :

q Hue : warna yang diinginkan, diukur dengan nilai 0o_{- 360}o_{, dengan 0}o

= red,12o

=green, 240o

(28)

q Lightness : pengaruh warna putih, nilai maksimum Lightness

menyatakan warna putih sedangkan nilai minimum menyatakan warna hitam.

q Saturation : keaslian warna, diukur dengan nilai 0% - 100%. Nilai 0 menyatakan warna putih dan 100% menyatakan warna asli

CIE (Commission Internationale d'Eclairage) mendefinisikan tiga sumber cahaya hipotetis x,y,z yang menggunakan kurva positif dari spektrum

4.3 Penutup

Pewarna harus dikenali dalam range HSB, KSL dna CIE.

4.3.1 Soal Latihan

1. Jelaskan perbedaan antara: • HSB

• HSL • CIE

4.3.2 Petunjuk Penilaian

4.3.3 Umpan Balik

(29)

(30)

Bab 5. Sistem Koordinat

5.1 Pendahuluan

Materi sistem koordinat menjelaskan dan mengenalkan konsep grafis menggunakan sistem koordinat yang akan membantu dalam proses penyusunan algoritma grafika.

5.2 Penyajian

Ada dua macam sistem koordinat : l Cartesian

l Polar

Sistem Koordinat Polar menggunakan sudut terhadap garis horison (α) dan jarak dari titik pusat (R) untuk menunjukkan lokasi sebuah benda

Sistem Koordinat Cartesian menggunakan pasangan (x,y) untuk menyatakan lokasi sebuah benda di bidang (2D) dan pasangan (x,y,z) untuk lokasi di ruang (3D). Sistem Koordinat juga dapat dibagi menjadi dua macam bergantung kepada situasi :

l World Coordinate (wc)

l Sistem Koordinate untuk menyatakan lokasi benda di “dunia” l Screen Coordinate (sc)

l Sistem Koordinat untuk menyatakan lokasi titik di layar. World Coordinate mempunyai batas -~ sampai dengan +~ untuk sumbu x dan y. Apabila area yang dilihat pada world coordinat dibatasi pada area tertentu maka area tersebut dinamakan window.

(31)

Screen Coordinate

Screen Coordinate menggunakan orientasi sumbu y yang berbeda dengan World Coordinate. Screen Coordinate hanya menggunakan nilai positif untuk sumbu x dan y dan titik (0,0) terletak di pojok kiri atas. Batas maksimal pada sumbu x = Xmax dan batas maksimal pada sumbu y = Ymax

Perbedaan orientasi tersebut menyebabkan gambar di World menjadi tampak terbalik di screen. Area yang digunakan untuk menampilkan gambar di layar disebut sebagai viewport.

Tranformasi

v*

=

p

_v

(32)

Agar gambar di screen tampak sama dengan di world maka perlu dilakukan transformasi koordinat. Dengan demikian setiap titik di wc dapat diketahui lokasinya di sc sebagai :

xsc = xwc

ysc = ymax – ywc

Rumus (1) tidak dapat mengatasi persoalan : l Pemakaian window dan viewport. l Nilai negatif dari koordinat wc.

5.3 Penutup

Pewarna harus dikenali dalam range HSB, KSL dna CIE.

p

n

e

n

(33)

1-5.3.1 Soal Latihan

1. Jelaskan cara kerja transformasi dari World Coordinate ke Screen Coordinate

5.3.2 Petunjuk Penilaian

5. 3.3 Umpan Balik

(34)

Bab 6. Algorithma Garis

6.1Pendahuluan

Bagian ini menjelaskan bagaimana algorithma garis dibuat dan manipulasi garis sehingga menghasilkan beberapa fungsi matematika.

6.2 Penyajian

Permasalahan “Pixel mana yang harus dipilih untuk menggambar sebuah garis ?”

Algorithma garis adalah algorithma untuk menentukan lokasi pixel yang paling dekat dengan garis sebenarnya (actual line) . Ada tiga algorithma utama untuk menggambar garis :

q Line Equation q DDA Algorithm q Bresenham’s Algorithm

(35)

Line Equation

Sebuah garis lurus dapat diperoleh dengan menggunakan rumus : y = mx + b

dimana :

q m = gradien

q b = perpotongan garis dengan sumbu y.

Apabila dua pasang titik akhir dari sebuah garis dinyatakan sebagai (x1,y1) and (x2, y2), maka nilai dari gradien m dan lokasi b dapat dihitung dengan

Gradien danm Tipe Garis

(36)

Digital differential analyzer (DDA) merupakan algorithma untuk menghitung posisi pixel disepanjang garis dengan menggunakan posisi pixel sebelumnya. Algorithma berikut ini menggunakan asumsi bahwa garis berada di kuadran I atau II serta garis bertipe cenderung tegak atau cenderung mendatar.

Untuk garis dengan 0 < m < 1, maka xi+1 = xi +1 dan :

Untuk garis dengan m > 1, maka yi+1 = yi + 1 dan :

Algorithma Bresenham

Bresenham mengembangkan algorithma yang lebih efisien. Algorithma ini mencari nilai integer yang paling mendekati garis sesungguhnya (actual line). Algorithma ini tidak memerlukan pembagian. Algorithma Bresenham yang disajikan berikut ini hanya dapat digunakan untuk garis yang berada di kuadran I dan 0 < m < 1. Anda yang ingin mempelajari pembuktian matematis dari algorithma Bresenham silahkan membaca buku Computer Graphics (Hearn dan Baker)

m

y

_i

₊₁

₌

_i

₊

m

x

_i

₊

₁

₌

_i

₊

1

(37)

d1=m – ½, karena d1> 0 atau positif maka pixel berikutnya adalah pixel (xi+1, yi+1)

Algorthma Bresenham (0<m<1)

Atribut Garis

Atribut garis meliputi :

q Ketebalan garis

q Pola garis

(38)

6.3 Penutup

beberapa algoritma garis diperlukan untuk memanipulasi garis sehingga dapat menampilkan sesuatu kebutuhan grafika. Algoritma Brehemsam dan DDA minimal harus dipahami mahasiswa.

6.3.1 Soal Latihan

1. Gambar garis berikut ini dengan menggunakan algorithma Bresenham : (0;1) – (6;5)

(2;2) – (7;5) (0;1) – (5;7) Jawaban:

(39)

6.3.2 Petunjuk Penilaian

6. 3.3 Umpan Balik

(40)

Bab 7. Algoritma Lingkaran

7.1 Pendahuluan

Materi mengenai algoritma Lingkaran menjelaskan bagaimana lingkaran di manupulasi dengan algoritme tertentu dalam grafika komputer

7.2 Penyajian

Menggambar lingkaran dapat menggunakan rumus : l sin dan cosinus

l Algorithma Bresenham

Pemakaian sinus dan cosinus membutuhkan memori karena melibatkan angka pecahan serta komputasi yang rumit dalam menentukan nilai sinus dan cosinus.

Bresenham’s Circle

Algorithma lingkaran bresenham melibatkan angka integer dan tidak membutuhkan pembagian. Algorithma yang disajikan berikut ini hanya membahas pada kuadran I yaitu pada x ≥ 0 dan y ≥ 0

(41)

Contoh Algorithma Lingkaran Bresenham : Δi=(xi+1) 2 +(yi-1) 2 -R2 Δi < 0 maka α=mH - mD (kasus 1 dan 2)

bila α ≤ 0 maka pilih mH

bila α > 0 maka pilih mD

Δi > 0 maka (kasus 3 dan 4) β = mD – mV

bila β ≤ 0 maka pilih mD

bila β > 0 maka pilih mV

Δi = 0 maka pilih mD

Δi=(xi+1) 2 +(yi-1) 2 -R2 Δi < 0 maka α=mH - mD (kasus 1 dan 2)

bila α ≤ 0 maka pilih mH

bila α > 0 maka pilih mD

Δi > 0 maka (kasus 3 dan 4) β = mD – mV

(42)

bila β ≤ 0 maka pilih mD

bila β > 0 maka pilih mV

Δi = 0 maka pilih mD

7.3 Penutup

Algorutma lingkaran mengimplementasikan algoritma bresenham dan sin dan cons.

7.3.1 Soal Latihan

1. Implementasikan algorithma lingkaran Bresenham ke dalam salah satu bahasa pemrograman.

2. Tugas kelompok (maks 3 orang).

3. Kumpulkan listing program dan printout hasil program. 4. Dikumpulkan pada pertemuan berikutnya.

7.3.2 Petunjuk Penilaian

7. 3.3 Umpan Balik

(43)

Bab 8. Clipping

8.1 Pendahuluan

Materi ini menjelaskan implementasi algoritma Clipping Cohen-Sutherland pada pbjek grafika komputer

8.2 Penyajian

Clipping adalah metoda untuk hanya menampilkan garis pada area yang visible (terlihat) seperti pada gambar berikut:

Terdapat Visible dan Ivisible Link Berdasarkan posisi garis terhadap area gambar maka garis dapat dibedakan menjadi :

Bagaimana menentukan visible dan invisible line? • fully visible : (x1 ≥ xmin) dan (x1 ≤ xmax)

o dan (y1 ≥ ymin) dan (y1 ≤ ymax) dan (x2 ≥ xmin) o dan (x2 ≤ xmax) dan (y2 ≥ ymin) dan (y2 ≤ ymax)

(44)

• partially visible : -‐-‐ coba sendiri dan anda akan menemukan bahwa tidak mudah melakukan hal tersebut ! –

Algorithma Clipping

Berbagai algorithma telah dikembangkan untuk menangani masalah pemotongan garis tersebut, antara lain :

• Cyrus-‐Beck

• Cohen-‐Sutherland

Algorithma Cohen-Sutherland

Area gambar dibatasi oleh xmin,xmax, ymin,ymax

Cohen dan Sutherland memberikan kode kepada tiap area yang mungkin dilewati oleh sebuah garis atau disebut sebagai region code.

(45)

Sehingga diperoleh region code :

Garis kemungkinan partially visible atau fully invisible apabila region code dari ujung garis tersebut mempunyai bit bernilai 1

(46)

Pemotongan (clipping) dilakukan terhadap ujung-ujung garis yang region code berisi bit bernilai 1. Contoh sebelumnya menunjukkan bahwa ujung Pa, Pb, Qc,Qd dan Re yang akan mengalami pemotongan

Ujung garis Pa

Region code Pa =1000

Pa berpotongan dengan garis ymax sehingga menghasilkan titik potong p1 (x1,ymax) Ujung garis Pb

Region code Pb = 0010

(47)

Dengan menggunakan cara yang sama maka lokasi titik potong untuk tiap area akan sesuai tabel di bawah ini :

(48)

Untuk ujung-ujung garis dengan region code berisi bit 1 maka ada tiga kemungkinan perpotongan antara garis P dengan area gambar

Apabila ditemukan lebih dari satu titik potong maka pilih titik potong yang paling "dekat" dengan area gambar.

Contoh algoritma:

Ambil ujung pertama (Pa) dari garis P rc = Tentukan Region Code dari Pa

(49)

switch (rc) 0 : p = Pa 1 : p = (xmin,yp1) 2 : p = (xmax,yp2) 4 : p = (xp2,ymin) 5 : p1 = (xp2,ymin) ; p2 = (xmin,yp1)

Tentukan mana yang lebih dekat antara p1 & p2 6 : p1 = (xp2,ymin) ; p2 = (xmax,yp2)

p = Tentukan mana yang lebih dekat antara p1 & p2 8 : p = (xp1,ymax)

9 : p1 = (xp1,ymax) ; p2 = (xmin,yp1)

p = Tentukan mana yang lebih dekat antara p1 & p2 10 : p1 = (xp2,ymax) ; p2 = (xmin,yp1)

p = Tentukan mana yang lebih dekat antara p1 & p2

Ambil ujung kedua (Pb) dari garis P rc = Tentukan Region Code dari Pb switch (rc) 0 : q = Pb 1 : q = (xmin,yp1) 2 : q = (xmax,yp2) 4 : q = (xp2,ymin) 5 : p1 = (xp2,ymin) ; p2 = (xmin,yp1)

q = Tentukan mana yang lebih dekat antara p1 & p2 6 : p1 = (xp2,ymin) ; p2 = (xmax,yp2)

(50)

q = Tentukan mana yang lebih dekat antara p1 & p2 8 : p1 = (xp1,ymax)

9 : p1 = (xp1,ymax) ; p2 = (xmin,yp1)

q = Tentukan mana yang lebih dekat antara p1 & p2 10 : p1 = (xp2,ymax) ; p2 = (xmin,yp1)

q = Tentukan mana yang lebih dekat antara p1 & p2 Gambar garis dari p menuju q

8.3 Penutup

Algorutma Cohen-Sutherland digunakan untuk memanipulasi algoritma clipping yang digunakan untuk memootng objek grafika.

8.3.1 Soal Latihan

1. Tugas (kelompok) :

Tentukan titik-titik potong dari garis-garis berikut : P = (2,1) - (6,7)

Q = (2,3) - (7,5) S = (4,2) - (8,7)

pada area gambar (2,2) - (5,5)

2. Tugas kelompok (maks 3 orang).

3. Kumpulkan listing program dan printout hasil program. 4. Dikumpulkan pada pertemuan berikutnya.

(51)

8.3.2 Petunjuk Penilaian

8. 3.3 Umpan Balik

(52)

Bab 9. Transformasi 2 Dismensi

9.1 Pendahuluan

Materi pada bagian ini menjelaskan proses transformasi atau perubahan objek grafis menjadi objek 2 Dimensi.

9.2 Penyajian

Transformasi adalah Metoda untuk memanipulasi lokasi sebuah titik. Ada 3 macam transformasi :

q Translation (Pergerseran) q Scaling (Penskalaan) q Rotation (Pemutaran ) Translation

Titik A (x,y) digeser sejumlah Trx pada sumbu x dan digeser sejumlah Try pada

sumbu y

Rumus Umum : Q(x,y) = P(x,y) +Tr

= P(x+Trx, y+Try)

Contoh :

Diketahui : A(2,4) digeser sejauh (4,2) Ditanya : lokasi hasil pergeseran (A’) Jawab :

A’ (x,y) = A + Tr = (2,4) + (4,2) = (6,6)

(53)

Scalling

Menggunakan asumsi titik pusat (0,0). Lokasi asli dikalikan dengan besaran Sx pada

sumbu x dan Sy pada sumbu y

Rumus Umum : Q(x,y) = A * S

= A(x,y) * S(x,y) = A(x*Sx, y * Sy)

Contoh

Diketahui : Titik A (1,1);B (3,1); C(2,2), ketiga titik tersebut diskalakan sebesar Sx =

2 dan Sy = 3

Ditanyakan : Lokasi titik hasil penskalaan Jawab :

A’=(1*2, 1*3) = (2,3) B’=(3*2, 1*3) = (6,3) C’=(2*2, 2*3) = (4,6)

(54)

Rotasi

Dari rumus trigonometri diketahui bahwa :

Dimana r merupakan jarak dari titik asal terhadap titik pusat (0,0). Diketahui pula : Sehingga :

θ

φ

θ

φ

θ

φ

θ

φ

θ

φ

θ

φ

sin

cos

sin

)

sin(

'

sin

cos

)

cos(

'

r

y

r

x

+

=

+

=

−

=

+

=

φ

,

sin

cos

y

r

x

₌

(55)

Contoh

Diketahui : A(1,1);B(3,1);C(2,2)

Ditanyakan : Rotasikan ketiga titik tersebut sebesar 90o

Jawab : A’=(1*cos 90 - 1*sin 90, 1*cos 90+1*sin 90) =(0-1,0+1)=(-1,1) B’=(3*cos 90 – 1*sin 90, 1*cos 90 + 3*sin 90) =(-1,3) C’=(2*cos 90 – 2*sin 90, 2 * cos 90 + 2*sin 90) =(-2,2)

x'=xcos

θ

−ysin

θ

y'=xsin

θ

+ycos

θ

(56)

Rotasi/Penskalaan pada Sembarang Titik Pusat

Tahapan untuk melakukan rotasi atau penskalaan dengan sembarang titik pusat (xr, yr).

q Lakukan pergeseran sebesar (-xr,-yr)

q Lakukan rotasi atau penskalaan q Lakukan pergeseran sebesar (xr,yr)

Transformasi Menggunakan Metric

Rumus transformasi juga dapat dinyatakan dengan matriks seperti berikut :

Sehingga rumus transformasi menjadi :

⎥

⎦

⎤

⎢

⎣

⎡

=

i

h

g

f

e

d

c

b

a

M

[

x

'

y

'

1

] [

₌

x

y

1

]

*

M

(57)

Tranformasi Berturut-turut

Transformasi berturut-turut akan lebih mudah dihitung dengan menggunakan matriks transformasi

Rumus Umum :

Mb= M1 * M2 * M3*...*Mn

Dengan Mb merupakan matrik transformasi baru dan M1...Mn merupakan komponen

matrik transformasi.

9.3 Penutup

Transformasi 2D memerlukan traslasi, scallliung dan rotasi sebagai proses transformasi yang berurutan.

9.3.1 Soal Latihan

1. Diketahui : Titik A(1,1); B(3,1); C(2,3)

Ditanyakan : Skalakan sebesar (3,3) titik tersebut dengan menggunakan titik pusat

(58)

Jawab : a) Pergeseran sebesar (-2,-2) A’=(1-2,1-2) = (-1,-1) B’=(3-2,1-2) = (1,-1) C’=(2-2,3-2) = (0,1) b) Penskalaan A”= (-1*3,-1*3) = (-3,-3) B”= (1*3,-1*3) = (3,-3) C”= (0*3,1*3) = (0,3) c) Pergeseran sebesar (2,2) A”’ = (-3+2,-3+2) = (-1,-1) B”’ = (3+2,-3+2) = (5,-1) C”’ = (0+2,3+2) = (2,5)

9.3.2 Petunjuk Penilaian

9. 3.3 Umpan Balik

(59)

Bab 10. Transformasi 3 Dimensi

10.1 Pendahuluan

Materi ini membahas bagaimana proses transformasi objek grafika ke dalam bentuk 3 Dimensi

10.2 Penyajian

Yang membedakan 2 dimensi dengan 3 dimensi ? q 2 Dimensi : Tinggi dan Lebar

q 3 Dimensi : Tinggi, Lebar dan Kedalaman

Kedalaman adalah jarak antara pemirsa (viewer) terhadap benda yang dia lihat. Perbedaan 2D dan 3 D dapat digambarkan sebagai berikut:

(60)

Bagaimana manusia memperoleh kesan kedalaman ? q Manusia mempunyai dua mata.

q Kedua mata manusia mempunyai selisih sudut pandang 120o

q Perbedaan sudut pandang tersebut membuat masing-masing mata memperoleh gambar yang berbeda untuk objek yang sama.

q Perbedaan gambar diproses oleh otak sehingga kita memperoleh kesan 'kedalaman' atau jarak terhadap benda.

Percobaan : Tutup salah satu mata anda selama kurang lebih 2 hari dan anda akan mengetahui bahwa anda tidak dapat menentukan dengan mudah jarak antara anda dengan benda yang anda lihat

Sifat 3D

Setiap titik dalam 3 dimensi ditentukan oleh tiga posisi : q x : jarak titik tersebut terhadap sumbu x q y : jarak titik tersebut terhadap sumbu y q z : jarak titik tersebut terhadap sumbu z

Posisi sebuah titik dalam 3 dimensi dituliskan dalam bentuk (x,y,z). Komputer dapat digunakan untuk mengolah benda tiga dimensi. Ada tiga persoalan dalam mengolah benda tiga dimensi menggunakan komputer :

q Pembuatan lokasi titik 3D q Manipulasi titik 3D

(61)

Proses yang digunakan untuk menghasilkan lokasi titik-titik 3D yang menunjukkan bentuk dari benda 3D. Ada 3 macam proses untuk menghasilkan lokasi titik 3D :

q Penentuan langsung menggunakan peralatan seperti mouse3D, scanner3D berbagai peralatan lain

q Menggunakan parametric surface

q Menggunakan prosedur khusus seperti extrude dan surface of revolution.

Scanner 3D

Scanner 3D merupakan peralatan yang digunakan untuk menghasilkan lokasi titik-titik 3D secara langsung dengan menunjuk lokasi titik-titik tersebut.

Contoh peralatan : mouse, trackball, laser scanner dan sebagainya.

Parametric Surface

Digunakan untuk menghasilkan benda-benda yang dapat direpresentasikan dalam rumus matematika seperti : bola, donut, tabung, cone dan sebagainya

Extrude

Merupakan prosedur menghasilkan lokasi titik 3D dengan menarik titik-titik 2 dimensi ke satu arah tertentu

Surface of Revolution

Prosedur untuk menghasilkan lokasi titik 3D dengan cara memutar profile pada sumbu putar

(62)

Representasi Struktur data titik 3 D Titik 3D dapat disimpan sebagai :

q Mesh

n Mesh merupakan kumpulan titik 3D yang saling dihubungkan. n Model yang dihasilkan disebut sebagai wireframe model n Permukaan benda (surface) diperoleh dengan menghubungkan

titik-titik vertex baik dalam bentuk segiempat atau segitia. n Umumnya digunakan surface dalam bentuk segitiga karena

bentuk segitiga akan selalu berada dalam keadaan planar (datar).

q Rumus matematika q Titik profile

(63)

10.3 Penutup

Transformasi 3 D dilakukan dengan beberapa langkah utama yaitu manipulasi dan penampilan. Kemudian dilakukan beberapa langkah seperti transformasi, pewarnaan, perspektif dan camera.

10.3.1 Soal Latihan

1. Tuliskan cara Mesh Mesh dengan surface segi-‐empat disimpan

Jawaban :

Point3D = record x,y,z:real; end;

(64)

jumvertex,jumedge:integer;

vertex : array [1..1000] of Point3D; edge : array[1..1000,1..2] of integer; end;

Ilustrasi:

10.3.2 Petunjuk Penilaian

10. 3.3 Umpan Balik

(65)

Bab 11. Proyeksi

11. 1 Pendahuluan

Materi ini menjelaskan metode menggambarkan benda tiga dimensi pada bidang 2 dimensi

11.2 Penyajian

Proyeksi adalah metoda menggambarkan benda tiga dimensi pada bidang 2 dimensi. Ada 2 cara melakukan proyeksi :

q Proyeksi paralel : Semua garis paralel akan tampak paralel pada bidang proyeksi.

q Proyeksi perspektif : Semua garis paralel akan menghilang di titik pusat proyeksi.

Proyeksi Pararel

Ada dua macam proyeksi paralel : q Proyeksi Orthographic q Proyeksi Oblique

Proyeksi orthographic adalah proyeksi dengan mata tegak lurus terhadap bidang proyeksi

(66)

Proyeksi Oblique adalah proyeksi dengan mata berada di lokasi yang tidak tegak lurus terhadap bidang proyeksi

Proyeksi orthographic dibagi menjadi 2 macam : q Pandangan Multiview Orthographic

q Pandangan Axonometric yang dibagi menjadi tiga macam :

n Isometric : Proyeksi dimana 3 muka dipendekkan dalam ukuran yang sama

n Dimetric : Proyeksi dimana 2 muka benda dipendekkan dalam ukuran yang sama

n Trimetric : Proyeksi dimana 2 muka dipendekkan dalam ukuran yang berbeda

Proyeksi ini diperoleh dengan menolkan salah satu koordinat sesuai dengan sumbu proyeksi.

• Terhadap bidang xy : Q(x,y) = P(x,y,z) • Terhadap bidang xz : Q(x,z) = P(x,y,z) • Terhadap bidang yz : Q(y,z) = P(x,y,z)

Contoh Proyeksi Multiview Orthographic

(67)

Proyeksi Oblique

Memproyeksikan ke garis sejajar yang tidak tegak lurus terhadap bidang proyeksi. Dibagi menjadi dua macam

q Cavalier q Cabinet

(68)

Proyeksi Perpektif

Dengan bidang proyeksi adalah bidang xy dan titik terletak di sumbu z sejauh E maka titik hasil proyeksi akan z = 0 apabila :

dengan E > z

11.3 Penutup

Proyeksi benda 3D ke dalam bidang 2D dapat dilakukan denga beberapa teknik proyeksi, antara lain Proyeksi paralel : Semua garis paralel dan Proyeksi perspektif.

'

*

'

*

'

1

1 '

t

x

t

y

E

z

t

=

−

=

(69)

11. 3.1 Soal latihan

Diketahui sebuah benda dengan vertex-vertex dan edge seperti tabel di bawah ini, lakukan proyeksi perspektif jika E terletak di z=10 dan z = 20:

(70)

11.3.2 Petunjuk Penilaian

11. 3.3 Umpan Balik

(71)

Bab 12. 3D Street Art

12.1 Pendahuluan

Materi ini memeberikan pengalaman kepada peserta didik untuk melakukan praktek materi yang didapatkan dalam format project 3D Street Art.

12.2 Penyajian

3D street art adalah proses mengabungkan unsur kreatif grafik dengan konsep 3D pada grafika komputer.

Cara Kerja 3 D Street Art sebagai berikut

(72)

2. Placing the object

(73)

3. Proyeksi

4. Skala dan Efek 5. Skala dan Efek

(74)

6. Realisme 7. Compare

(75)

12.3 Penutup

Proyek 3D street art ini dibuat untuk mengimplementasi teori kedalam praktek rieal yang penuh dengan implementasi keilmuan

12.3.1 Soal Latihan

Buat kelompok maksimal 5 orang dan lakukan langkah diatas dengan objek gambar lainnya

12.3.2 Petunjuk Penilaian

(76)

12. 3.3 Umpan Balik

(77)

Bab 13. Ujian Tengah Semester

13.1 Pendahuluan

Soal Ujian tengah Semester digunakan sebagai instrumen penilaian dan kemampuan mahasiswa dalam menerima materi kuliah yang dijadwalkan

13.2 Penyajian -‐ Soal Ujian

Peraturan

1. Soal dikerjakan secara berurutan sesuai nomor soal

2. Ujian bersifat terbuka, tetapi tidak diperbolehkan bekerjasama

3. Apabila diketahui bekerjasama dalam bentuk pinjam meminjam catatan,

memberikan jawaban dan lainnya, petugas akan mencatat dan akan mendapatkan pengurangan nilai

Pertanyaan

1. Jelaskan yang anda ketahui mengenai: a. Grafika Komputer

b. Sistem Grafika Komputer

2. Jelaskan perbedaan antara Image Processing dan Computer Graphics 3. Jelaskan bagaimana cara bekerja

a. Vector Display b. Rasyer Display

4. Bedakan Primitif Grafis dibawah ini: a. Pixel (dot) b. Garis (Line) c. Lingkaran (Circle) d. Ellipse e. Kurva f. Character

5. Jelaskan Digital Differential Analyser Algorithm bekerja dalam komputer grafik. 6. Jelaskan Bresenham’s algorithm bekerja dalam komputer grafik.

7. Jelaskan algoritma yang digunakan pada area filling a. Scan line

b. Boundary fill c. Flood fill

(78)

8. Berdasarkan, 3D street art project kelompok anda, berikan informasi sebagai berikut:

a. Nama Project anda : ____________________________ b. Ide projecy anda : _______________________________

13.3 Penutup

Sebagai evaluasi tengah semester memberikan masukan kepada pegampu porsi materi yang sudah dan belum dikuasai oleh mahasiswa

13.3.1 Soal

seperti pada bagian penyajian

13.3.2 Petunjuk Penilaian

Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian didasarkan pada ukuran kuantitatif kepada dosen pengampu:

• Kurang dari 50 poit : D • 51 sd 65 poin: C • 66 sd 75 poin : B • 76 keatas poin : A

(79)

Bab 14. Ujian Akhir Semester

13.1 Pendahuluan

Soal Ujian Akhir Semester digunakan sebagai instrumen penilaian dan kemampuan mahasiswa akhir dalam menerima materi kuliah yang dijadwalkan

13.2 Penyajian -‐ Soal Ujian

Peraturan

• Soal dikerjakan secara berurutan sesuai nomor soal

• Ujian bersifat terbuka, tetapi tidak diperbolehkan bekerjasama

• Apabila diketahui bekerjasama dalam bentuk pinjam meminjam catatan,

memberikan jawaban dan lainnya, petugas akan mencatat dan akan mendapatkan pengurangan nilai

Pertanyaan:

1. Diketahui sebuah benda dengan vertex-vertex dan edge seperti tabel di bawah ini, lakukan proyeksi perspektif jika E terletak di z=10 dan z = 20:

2. Tuliskan cara Mesh Mesh dengan surface segi-‐empat disimpan 3. Diketahui : Titik A(1,1); B(3,1); C(2,3)

Ditanyakan : Skalakan sebesar (3,3) titik tersebut dengan menggunakan titik pusat

(2,2)

(80)

14.3 Penutup

Sebagai evaluasi akhir semester memberikan masukan kepada pegampu porsi materi yang sudah dan belum dikuasai oleh mahasiswa

14.3.1 Soal

seperti pada bagian penyajian

14.3.2 Petunjuk Penilaian

Proses penilaian didasarkan pada seberapa diskriptif mahasiswa dapat menjelaskan point terpenting dalam soal latihan. Penilian didasarkan pada ukuran kuantitatif kepada dosen pengampu:

• Kurang dari 50 poit : D • 51 sd 65 poin: C • 66 sd 75 poin : B • 76 keatas poin : A

(81)

Daftar Pustaka

Hearn, D dan Baker M.P., 1997, Computer Graphics, Prentice Hall, Inc., New Jersey.

Shirley P., Ashikhmin M., dan Marschner S., 2009, Fundamentals of Computer

Graphics, A K Peters

Asthana, R.G.S. dan Sinha, N.K., 2001, Computer Graphics For Scientists and

Engineers, New Age International Ltd., New Delhi.

Ammeraal L., dan Kang Z., 2007, Computer Graphics for Java Programmer, 2nd