Thursday, 28 May 2015

Komputer Grafis 12

Halo semua, sudah lama rasanya tidak posting di blog karna jadwal yang cukup padat. Oke, kembali pada pembahasan komputer grafis pertemuan 12. Pada pertemuan ini akan dibahas mengenai algoritma garis dan lingkaran. Di mana jika biasa kita membuat lingkaran kita menggunakan fungsi ellipse, dalam pembahasan ini kita akan mempelajari algoritma yang gsebenarnya ada di dalam fungsi ellipse. Tidak hanya ellipse, fungsi move to dan line to yang kita gunakan untuk membuat garis juga sebenarnya di dalamnya terkandung algoritma garis. Seperti apa pembahasannya? Langsung saja kita lihat pembahasannya di bawah ini:

Aturan Pembuatan Algoritma Garis:
1.      Tentukan P1(x1,y1) dan P2(x2,y2)
2.      Hitung delta x(dx) dan y (dy) tanpa menggunakan mutlak
dx = x2-x1
dy = y2-y1
3.      Tentukan step
Jika dy > dx maka step = dy
Jika dx > dy maka step = dx
4.      Tentukan x increment dan y increment
xinc = dx/step
yinc = dy/step
5.      Lakukan pengisian nilai pada X dan Y
X = x1
Y = y1
6.      Lakukan loop sejumlah step
Lakukan perhitungan:
            X = x + xinc
            Y = y + yinc
            posx = round(X)
            posy = round(Y)
Gambar pixel pada posisi (posx,posy)

Image1.Canvas.Pixel[posx,posy] := clBlack;

Aturan Pembuatan Algoritma Lingkaran
1.      Tentukan pusat lingkaran (xc,yc) dan jari-jari (r)
2.      Tentukan pencacah
C = 1/r
3.      Lakukan loop dengan pencacah C
Dari sudut 0 sampai 360 untuk degree
Dari sudut 0 sampa 2pi untuk radian
X = xc + r * cos(sudut)
Y = yc + r * sin(sudut)
posx = round(X)
posy = round(Y)
Gambar pixel pada posisi (posx,posy)
Image1.Canvas.Pixel[posx,posy] := clBlack;
Aturan Pembuatan Algoritma Ellipse:
1.      Tentukan pusat lingkaran (xc,yc) dan jari-jari (rx & ry)
2.      Tantukan pencacah menggunakan rx atau ry
Jika rx > ry maka C = 1/rx
Jika ry > rx maka C = 1/ry
4.      Lakukan loop dengan pencacah C
Dari sudut 0 sampai 360 untuk degree
Dari sudut 0 sampa 2pi untuk radian
X = xc + r * cos(sudut)
Y = yc + r * sin(sudut)
posx = round(X)
posy = round(Y)
Gambar pixel pada posisi (posx,posy)
3.      Image1.Canvas.Pixel[posx,posy] := clBlack;

Langsung saja kita masuk dalam pembahasan pada pertemuan 12 yang dilakukan pada praktikum. Kita akan menggambar garis, lingkaran, elipse, elipse miring, dan busur.



Langkah 1: Membuat form dengan tampilan sebagai berikut


X1, Y1, X2, Y2 untuk menentukan titik awal dan akhir yang dituju. Xc dan Yc untuk menentukan titik tengah saat kita menggambar ellipse, lingkaran, ellipse miring, dan busur. Rx dan Ry sebagai jari-jari. Jika Rx dan Ry bernilai sama maka yang dihasilkan adalah lingkaran. Jika Rx > Ry atau Rx < Ry maka akan menghasilkan gambar ellipse.

Langkah 2: Menuliskan kode program untuk button garis



Semua kode program di atas merupakan hasil realisasi dari aturan yang kita pelajari di awal pembahasan pertemuan 12 ini.

Langkah 3: Menuliskan kode program untuk button ellipse / lingkaran


Pada saat while, kita looping sudut mulai dari nol sampai 360 untuk degree, dan daro nol sampai 2pi untuk radian. Karena yang bertambah dalam hal ini loopingnya adalah sudut, agar bisa menggambar lingkaran ataupun ellise.

Langkah 4: Menuliskan kode program untuk button ellipse miring


Ketika X dan Y dilooping dengan sudut dan pencacah, X dan Y langsung dirotasikan sebesar sudut. Sudut yang penulis sertakan adalah sudut tetap yaitu 30 untuk degree.

Langkah 5: Menuliskan kode program untuk button Busur


Pada dasarnya jika kita lihat kode program di atas maka kode program ini sebenarnya sama dengan ellipse ataupun lingkaran. Yang membedakan hanya sudut pada saat looping while. Pada busur ini ditentukan untuk range sudutnya dari 0 misalnya sampai 180 untuk degree, atau 0 sampai pi dalam radian.

Langkah 6: Hasil button garis



Langkah 7 : Haisl Button ellispse





Langkah 8: Melihat hasil button ellipse miring



Langkah 9: Melihat hasil button busur



Sekian dari pembahasan pada pertemuan 12 ini mengenai algoritma garis, dan lingkaran. Dari algoritma lingkaran kita dapat membuat lingkaran, ellipse, ellise miring, dan busur. tidak terasa sudah 12 kali pertemuan, satu kali pertemuan lagi maka pembahasan mengenai komputer grafis akan selesai, dan mahasiswa harus siap-siap untuk menghadapi UAS. 

Semoga blog ini bisa membantu para pembaca termasuk teman-teman saya dalam menghadapi ujian nanti.. ^.^ thx

Monday, 11 May 2015

Komputer Grafis 11

Transformasi pada Objek 3 Dimensi

Kembali pada pembelajaran komputer grafis pada pertemuan 11. Pertemuan 11 ini akan dibahas mengenai transformasi untuk objek 3 dimensi. Berbicara transformasi yang dimaksud adalah transformasi geometri. Dalam transformasi geometri kita mengenal adanya translasi, scaling, dan rotasi. Jadi yang akan kita bahas pada pertemuan 11 ini adalah translasi, scaling, dan rotasi untuk objek 3 dimensi dalam hal ini kita gunakan objek kubus. Langsung saja kita bahas sedikit teori yang dapat kita gunakan pada saat melakukan praktek nantinya.

Translasi

Pada dasarnya, translasi merupakan suatu pergeseran. Jika pada objek 2 dimensi kita melakukan translasi pada sumbu X dan sumbu Y, maka dalam objek 3 dimensi kita akan melakukan pada tiga sumbu, yaitu X, Y, dan Z. Kita dapat melakukan translasi pada salah satu sumbu saja, misalnya hanya pada sumbu X, atau hanya pada sumbu Y dan atau hanya pada sumbu Z. Kita juga dapat melakukan translasi langsung pada ketiga sumbu. Rumus untuk melakukan translasi pada grafik 3 dimensi sama dengan translasi pada grafik 2 dimensi yaitu:

Scaling


Scaling merupakan suatu perbesaran atau perkecilan dari suatu objek. Sama halnya dengan translasi, scaling juga bisa dilakukan terhadap salah satu sumbu saja ataupun langsung pada ketiga sumbu secara langsung. Rumus untuk melakukan scaling pada grafik 3 dimensi sama dengan scaling pada grafik 2 dimensi yaitu:


Rotasi

Rotasi merupakan suatu proses perputaran objek. Berbeda dengan translasi dan scaling yang bisa diterapkan langsung pada ketiga sumbu, pada rotasi kita harus memilih rotasi hanya pada sumbu X, sumbu Y, atau sumbu Z. Rumus untuk rotasi pada setiap sumbu tidak sama. Berikut ini adalahh rumusnya:



Setelah kita mendapatkan rumus di atas, maka kita sudah bisa melakukan transformasi pada grafik 3 dimensi pada delphi. Langsung saja kita bahas pembuatan transformasi geometri pada grafik 3 dimensi.

Langkah 1: Buat tampilan seperti di bawah ini


Untuk membuat tampilan seperti di atas, maka hanya perlu sedikit merubah dari yang telah dibuat pada pertemuan 10.

Langkah 2: Membuat kode program pada button translasi





Langkah 3: Membuat kode program untuk button scaling





Langkah 4: Membuat kode program pada button Rotasi SbX





Langkah 5: Membuat kode program pada button Rotasi SbY





Langkah 6: Membuat kode program pada button Rotasi SbZ





Langkah 7 : Tampilan Program Translasi



Langkah 8: Tampilan Program Scaling dari tampilan translasi sebelumnya


Langkah 9 : Tampilan Program Rotasi Sumbu X


Langkah 10 : Tampilan Program Rotasi Pada Sumbu Y


Langkah 11 : Tampilan Program Rotasi Pada Sumbu Z


Sekian pembahasan mengenai Transformasi Geometri pada grafik 3 Dimensi. 

Terimakasih kepada para pembaca.. Semoga bisa bermanfaat ^.^ 

Monday, 4 May 2015

Komputer Grafis 10

Kembali pada pembahasan komputer grafis yaitu pada pertemuan 10. Pada pertemuan ini dibahas mengenai cara membuat grafik proyeksi perspektif. Pada pertemuan 8 kita sudah membahas bahwa proyeksi terdiri atas dua jenis yaitu paralel yang sudah kita pelajari pada pertemuan 8, dan jenis kedua adalah proyeksi perspektif yang akan kita bahas pada pertemuan ini.


Berbicara soal perspektif, jika kita masih ingat, maka yang terlintas dalam pemikiran kita adalah benda semakin jauh terlihat semakin kecil. Ya, kebenarannya seperti itu. Benda yang kita lihat sejajar sumbu z semakin jauh benda itu maka jatuhnya benda di bidang perspektif akan semakin kecil. Mata manusia melihat bidang perspektif. Untuk itu, perspektif ini dipengaruhi oleh jarak mata ke bidang perspektif. Dua benda yang sama besar jika diletakkan berbeda jarak sumbu z maka benda yang berada di belakang benda tersebut akan lebih kecil. Berikut ini gambar yang kiranya dapat mewakilkan penjelasan di atas:


Dari gambar di atas kita bisa melihat mengapa benda yang paling belakang atau yang lebih jauh bisa terlihat lebih kecil daripada benda yang letaknya lebih dekat dengan mata kita padahal kedua benda sama ukurannya. Kedua benda memiliki sumbu X, Y dan Z, sedangkan bidang proyeksi hanya memiliki sumbu X dan Y yang kita kenal dengan Xproyeksi dan Yproyeksi. Proyeksi perspektif ini sebenarnya yang lebih sesuai karena sama seperti aslinya yaitu mata kita yang melihat semakin jauh benda, ukurannya seolah-olah semakin kecil.

Dari gambaran mengenai perspektif di atas, didapatlah rumus berikut untuk menghitung Xproyeksi da Yproyeksi:

Dari rumus yang diperoleh di atas, dapat kita lihat dua persyaratan yang harus diperhatikan yaitu:
  1. Nilai M tidak boleh bernilai NOL, karena jika nilai Z dibagi dengan M yang bernilai NOL maka hasilnya akan eror.
  2. Nilai M tidak boleh sama dengan Z karena jika nilai M sama dengan Z maka akan menghasilkan nilai 1, jika 1 dikurang 1 hasilnya akan NOL, nilai X atau Y dibagi dengan NOL akan eror juga.
Setelah mengetahui syarat-syarat di atas dan mengetahui rumus Xp dan Yp kita akan langsung masuk dalam pembahasan praktek pembuatan grafik 3 dimensi proyeksi perspektif. 

Langkah 1: Membuat tampilan program
Tidak banyak yang kita ubah dari program yang telah kita buat pada pertemuan 8, kita dapat menggunakan program yang telah kita buat pada pertemuan 8 yang lalu, kita hanya peru menambahkan label untuk M dan edit box untuk nilai M dan Button perspektif, sehingga tampilannya seperti berikut:


Langkah 2: menulis kode program button perspektif






Langkah 3: Menjalankan Program & melihat hasil



Dari hasil tampilan di atas, dapat kita lihat bahwa sisi bagian merah terlihat lebih kecil seperti itulah pembuatan perspektif. Jika tampilan kubus di tengah maka dapat kita lihat sebagai berikut:


Sekian pembahasan mengenai proyeksi perspektif ini pada pertemuan 10 ini. Terima kasih untuk para pembaca dan pengunjung. 

Semoga bisa bermanfaat ^.^