GRAFIKA KOMPUTER
DOSEN PENGAMPU :
A. Tujuan
1. Mahasiswa dapat memahami konsep grafika komputer
2. Mahasiswa dapat mengetahui istilah-istilah dalam grafika
B. Dasar Teori
1. Pengertian Grafika Komputer
Grafika komputer merupakan studi tentang bagaimana membuat
gambar/grafik dan bagaimana memanipulasinya dengan menggunakan
komputer.
Perbedaan antara Picture/gambar, graphics/grafik dan Image/citra :
Picture/gambar : Paling luas/umum. Mencakup grafik dan citra.
Graphics/grafik : Gambar yang dibuat dengan dengan cara dan aturan
tertentu tanpa alat perekam gambar.
Image/citra : Gambar yang diambil dengan alat pengambil gambar
( kamera, satelit, foto, sidik jari, scan dll)
2. Sistem Grafika Komputer
Sistem komputer baik itu perangkat lunak ataupun keras untuk membuat
gambar/grafik dan memanipulasinya.
Sistem grafika komputer dibedakan menjadi dua yaitu :
• Non-interaktif
Grafika non-interaktif dibuat sebagai akhir dari proses dalam bentuk
hardcopy. Contoh : Printer, Plotter dll
• Interaktif
Grafika interaktif dapat dibuat dan dimanipulasi secara interaktif pada
layar peranti peraga. Peranti-peranti peraga interaktif yang paling umum
2
digunakan : CRT (Tabung sinar katoda). Lain-lain : Plasma, LCD, laser,
dsb.
Kerja Deflektor
Deflektor elektrostatis : berupa dua pasang lempeng (deflektor),
satu pasang sebagai pengarah vertikal dan yang lainnya pengarah
horisontal. Arah berkas di atur dengan merubah-rubah voltase lempeng.
Deflektor magnetis mengatur medan magnit (atau medan listrik) di ruang
antara lempeng yang dilalui berkas.
Refresh CRT
Karena pemendaran phosfor hanya terjadi sesaat maka untuk bisa
berpendar terus menerus dilakukan pemendaran berulang, istilahnya
mengalami refresh.
Persistensi
Lamanya partikel phospor yang berpendar (mulai saat menerima
elektron hingga pendarannya masih dianggap nyala oleh mata atau tinggal
10% dari maksimum). Aplikasi animasi memerlukan persistensi yang
lebih rendah. Aplikasi peragaan statis memerlukan persistensi yang lebih
tinggi.
3
Refresh Rate
Berapa kali (frekuensi) refresh dilakukan dalam satu detiknya.
Bila rendah maka akan terjadi kedipan (flickering). Semakin tinggi
semakin baik hingga > kecepatan maksimum dimana mata masih dapat
menangkap kedipan 60 Hz (60 frame/sec)
Resolusi
Jumlah posisi maksimum titik pada layar yang dapat diperagakan
tanpa overlap. Resolusi ditentukan oleh jenis phospor dan sistem fokus
dan defleksinya.
Bandwidth Monitor
Satuan yang sering digunakan sebagai spesifikasi teknis monitor,
yang menyatakan kecepatan elektron gun melakukan satu perioda on-off
(on ketika menembak satu pixel dan off ketika berpindah ke pixel yang
lain) per detik.
Aspect Ratio
Perbandingan jumlah titik vertika dengan horisontal untuk
menghasilkan garis yang sama panjangnya pada masing-masing arah.
Scan Line
Satu baris penyapuan (scanning) berkas pada layar, biasanya
dinomori 0,1,2,… interlace vs. non-interlace urutan baris yang disapu bisa
interlace (setiap scanline bernomor genap lalu yang bernomor ganjil) atau
non-interlace (secara berurutan semua scanline).
Monitor LCD
Suatu kristal cair akan memiliki polaritas tertentu bila
mendapatkan medan listrik. Jika digabungkan dengan dua lapis polaritas
filter cahaya maka komposisi panel-panel tersebut berfungsi sebagai
4
“pintu” yang dapat membuka-tutup terkendali oleh medan listrik pixel
yang bersangkutan. Resolusinya ditentukan oleh kerapatan elektrodanya.
Pencahayaannya sederhana (mis. Untuk kalkulator) : menggunakan cahaya
ruangang yang dipantulkan oleh lapisan reflektor dibelakang lapisan-
lapisan tsb.
Piranti-piranti Hardcopy
Dot Matrix Printer, Plotter, Laser Printer, Ink-Jet Printer, foto.
C. Tugas
Carilah peranan grafika komputer dalam kehidupan sehari-hari minimal 10
jenis peranan. Kemudian jelaskan masing-masing peranan tersebut.
5
MODUL II
MEMBENTUK GAMBAR DENGAN TITIK (PIXEL)
A. Tujuan
1. Mahasiswa dapat memahami objek dasar suatu gambar.
2. Mahasiswa dapat membuat berbagai bentuk geometri dasar
menggunakan titik dengan kontrol pada delphi.
B. Dasar Teori
Semua gambar yang dihasilkan oleh komputer pada dasarnya adalah
rangkaian dari titik-titik (pixel) yang diatur warna dan kecerahannya. Properti
yang digunakan dalam delphi untuk membuat suatu gambar adalah Canvas.
Sintaks :
Cannvas.Pixels[X,Y];
Ket :
X,Y merupakan koordinat piksel.
C. Latihan
1. Membuat titik-titik di sembarang tempat.
Image
Panel
6
kode program dengan Delphi :
Perintah pada Event-OnMouseDown pada Image :
var w:TColor;
begin
Image1.Canvas.Pixels[x,y] := random(w);
end;
D. Tugas Praktikum
Dengan menggunakan perintah titik, buatlah objek 2D sebagai berikut :
• Bujur Sangkar
• Segitiga sama kaki
• Segitiga sama sisi
• Bintang
• Pentagon
7
MODUL III
MEMBUAT GEOMETRI DASAR
A. Tujuan
Mahasiswa dapat membuat berbagai bentuk geometri dasar seperti garis,
kotak, lingkaran dengan menggunakan kontrol pada delphi.
B. Dasar Teori
Pada bab sebelumnya telah dijelaskan bagaimana sebuah titik membentuk
suatu bidang tertentu. Pada pemrograman Delphi dapat dibangun bentuk-
bentuk bidang tertentu secara langsung tanpa merangkaikan titik.
Obyek Canvas tetap digunakan untuk menempatkan gambar yang akan
dibuat. Selain menempatkan gambar, obyek canvas juga memiliki properti
untuk merubah warna, ukuran garis, jenis font dll.
Beberapa perintah dalam membuat bentuk geometri dasar :
• Garis
Canvas.MoveTo(x,y) : menempatkan posisi awal garis
Canvas.LineTo(x,y) : menempatkan posisi akhir garis
• Kotak
x1,y1
x2,y2
Canvas.Rectangle(x1,y1,x2,y2);
Ket :
x1,y1 : titik awal kotak
x2,y2 : titik akhir kotak
8
• Lingkaran
x1,y1
x2,y2
Canvas.Ellipse(x1,y1,x2,y2);
C. Latihan
1. Membuat garis koordinat pada canvas.
begin
with paintbox1 do begin
// membuat garis horisontal
Canvas.MoveTo(0,round(Height/2));
Canvas.lineto(width,round(Height/2));
// membuat garis vertikal
Canvas.MoveTo(round(Width/2),0);
Canvas.lineto(round(Width/2),Height);
end;
end;
9
2. Membuat lingkaran/elipse sebesar canvas.
begin
with paintbox1 do begin
Canvas.Ellipse(0,0,Width,Height);
end;
end;
10
Kode Program dengan delphi :
Perintah pada Even-OnClick pada tombol Gambar :
begin
with paintbox1 do begin
Canvas.Rectangle(round(Width/3),round(Height/3),+
round(Width*2/3),round(Height*2/3));
end;
end;
D. Tugas
Dengan menggunakan perintah geometri dasar, buatlah gambar seperti di
bawah ini :
11
MODUL IV
MEMBUAT GEOMETRI DASAR (2)
A. Tujuan
Mahasiswa dapat membuat berbagai bentuk geometri dasar lain seperti
seperti Kurva, Busur, Juring dll dengan menggunakan kontrol pada delphi.
B. Dasar Teori
Menggambar Busur
Sintaks :
Arc (X1, Y1, X2, Y2, X3, Y3, X4, Y4)
Semua parameter bertipe integer;
Keterangan:
X1, Y1 menyatakan koordinat kiri atas.
X2, Y2 menyatakan koordinat kanan bawah.
X3, Y3 menyatakan koordinat awal penggambaran.
X4, Y4 menyatakan koordinat akhir penggambaran.
(X4, Y4)
(X2, Y2)
12
Menggambar Tembereng
Sintaks :
Chord (X1, Y1, X2, Y2, X3, Y3, X4, Y4)
Semua parameter bertipe integer;
Keterangan:
X1, Y1 menyatakan koordinat kiri atas.
X2, Y2 menyatakan koordinat kanan bawah.
X3, Y3 menyatakan koordinat awal penggambaran.
X4, Y4 menyatakan koordinat akhir penggambaran.
(X1, Y1) (X3, Y3)
(X4, Y4)
(X2, Y2)
Menggambar Juring
Sintaks :
Pie (X1, Y1, X2, Y2, X3, Y3, X4, Y4)
Semua parameter bertipe integer;
Keterangan:
X1, Y1 menyatakan koordinat kiri atas.
X2, Y2 menyatakan koordinat kanan bawah.
X3, Y3 menyatakan koordinat awal penggambaran.
X4, Y4 menyatakan koordinat akhir penggambaran.
13
(X1, Y1) (X3, Y3)
(X4, Y4)
(X2, Y2)
(X1, Y1)
X3
Y3
(X2, Y2)
14
Menggambar segi banyak
Sintaks :
Polygon(Points);
Points bertipe array of Tpoint
Sebagai contoh:
Canvas.Polygon([Point(100, 20), Point(50, 100), Point(150, 100)]);
15
Menggambar Kurva Bezier
Sintaks :
PolyBesier(Points)
Points bertipe array of Tpoints
Kurva besier paling tidak ditentukan oleh 4 titik. Titik pertama dan
titik keempat digunakan sebagai titik awal dan titik akhir kurva yang
pertama. Titik kedua dan titik ketiga dipakai sebagai kontrol untuk
membentuk kurva. Pada penggambaran kurva berikutnya, titik akhir
kurva sebelumnya akan dipakai sebagai titik awal. Kedua titik
berikutnya sebagai kontrol kurva.
Contoh:
procedure TForm1.FormClick(Sender: TObject);
begin
Canvas.PolyBezier([Point(10,100),
Point(50,20),
Point(70,120),
Point(100,150),
Point(120,120),
Point(160, 90),
Point(250,140)]);
Canvas.PolyBezier([Point(10,100),
Point(50,80),
Point(100,280),
Point(250,140)]);
end;
16
C. Latihan
Dari uji coba yang dilakukan di atas. Lakukan penggabungan dalam satu form
seperti pada gambar di bawah ini.
17
MODUL V
MENGKOSTUMISASI GEOMETRI
A. Tujuan
Mahasiswa dapat mengkostumisasi berbagai bentuk geometri, sehingga
tampilan geometri menjadi semakin menarik
B. Dasar Teori
Sintaks :
Brush.Color := warna;
Sebagai contoh :
Canvas.Brush.Color := clLime;
Canvas.Rectangle(10, 10, 100, 100);
2. Mengarsir Kurva
Sintaks :
Brush.Style := Arsiran
bsSolid
bsHorisontal
bsVertical
bsFDiagonal
18
bsBDiagonal
bsCross
bsDiagCross
Sebagai contoh :
Canvas.Brush.Style := bsVertical;
Canvas.Rectangle(10, 10, 100, 100);
Contoh Pengkodean :
19
4. Mengarsir dengan Bitmap.
Suatu kurva tertutup dapat diisi warna tentu dengan metode Floodfil.
Sintaks :
Keterangan:
(X,Y)
(X,Y)
20
C. Tugas Praktikum
1. Dari uji coba yang dilakukan di atas. Lakukan penggabungan
dalam satu form seperti pada gambar di bawah ini.
21
MODUL VI
Transformasi 2D
A. Tujuan
Mahasiswa dapat mempelajari dan membuat macam-macam tranformasi
geometri 2D.
B. Dasar Teori
Ada beberapa macam tipe transformasi 2D yaitu :
Translasi (pergeseran)
Skala
Rotasi
Mirror (pencerminan)
Translasi / Pergeseran
Sebuah titik dapat digeser atau ditranslasikan dengan persamaan sebagai
berikut :
X’ = x1 + Tx
Y’ = y1 + Ty
Ket :
x1,y1 : koordinat titik awal
X’,Y’ : koordinat titik hasil
Tx : faktor perpindahan ke arah X (horisontal)
Ty : faktor perpindahan ke arah Y (vertikal)
Skala
Sebuah objek dapat diperbesar atau diperkecil dengan persamaan sebagai
berikut :
X’ = Sx * x
Y’ = Sy * y
22
Ket :
Sx : faktor pembesaran horizontal
Sy : faktor pembesaran vertical
Bila faktor pembesaran vertikal dan horizontal sama maka Sx = Sy.
Rotasi
Sebuah titik dapat digeser atau ditranslasikan dengan persamaan sebagai
berikut :
X’ = x.cos Θ – y.sin Θ
Y’ = x.sin Θ + y.cos Θ
Ket :
x,y : koordinat titik asal
X’,Y’ : koordinat hasil perputaran
Θ : sudut putar.
Dinyatakan dalam radian, maka tranformasinya
Θ = (sudut_derajat/180* Θ) dengan Θ = 22/7
Mirror(pencerminan)
Sebuah titik dapat dicerminkan terhadap sumbu x atau sumbu y.
persamaan untuk percerminan terhadap sumbu x :
X’ = x
Y’ = - y
persamaan untuk percerminan terhadap sumbu y :
X’ = - x
Y’ = y
Ket :
x,y : koordinat titik asal
X’,Y’ : koordinat hasil pencerminan
23
C. Latihan
D. Tugas
Buatlah program untuk trasnformasi seperti pada gambar berikut ini :
24
MODUL VII
WINDOWS DAN VIEWPORT
A. Tujuan
1. Mahasiswa dapat mengetahui perbedaan koordinat layar dan
koordinat alam
2. Mahasiswa dapat mentransformasi objek dari koordinat alam ke
koordinat layar.
B. Dasar Teori
Sistem koordinat windows :
0,0
X
0,0 X
25
Transformasi Window ke Viewport
Data window : Xwmin, Xwmax
Ywmin, Ywmax
Data Viewport : Xvmin, Xvmax
Yvmin, Yvmax
P(xw, yw) P’ (xv, yv)
P’(xv, yv) P (xw, yw)
Persamaan Transformasi Window ke Viewport
XV − XVMIN XW − XWMIN
=
XVMAX − XVMIN XWMAX − XWMIN
YV − YVMIN YW − YWMIN
=
YVMAX − YVMIN YWMAX − YWMIN
C. Latihan
26
Perintah pada Even-OnClick pada Asli:
var x1,y1,x2,y2,x3,y3: integer;
begin
x1 := 10; y1:=100;
x2 := 50; y2:=50;
x3 := 90; y3:=100;
with paintbox1.Canvas do
begin
MoveTo(x1,y1);lineto(x2,y2);
moveto(x2,y2);lineto(x3,y3);
end;
end;
xvmin :=0;yvmin:=120;
xvmax :=120;yvmax:=0;
xwmin :=0;ywmin:=0;
xwmax :=120;ywmax:=120;
//transformasi
x1v:=round(xvmin+(x1-xwmin)*(xvmax-xvmin)/(xwmax-xwmin));
y1v:=round(yvmin+(y1-ywmin)*(yvmax-yvmin)/(ywmax-ywmin));
x2v:=round(xvmin+(x2-xwmin)*(xvmax-xvmin)/(xwmax-xwmin));
y2v:=round(yvmin+(y2-ywmin)*(yvmax-yvmin)/(ywmax-ywmin));
x3v:=round(xvmin+(x3-xwmin)*(xvmax-xvmin)/(xwmax-xwmin));
y3v:=round(yvmin+(y3-ywmin)*(yvmax-yvmin)/(ywmax-ywmin));
with paintbox2.Canvas do
begin
MoveTo(x1v,y1v);lineto(x2v,y2v);
moveto(x2v,y2v);lineto(x3v,y3v);
end;
end;
D. Tugas
Kembangkan tugas dari modul VI dengan menggunakan transformasi
windows ke viewport.
27
MODUL VIII
REPRESENTASI OBJEK 2D
A. Tujuan
1. Mahasiswa dapat mengetahui representasi koordinat dalam
bentuk file teks.
2. Mahasiswa dapat mentransformasi file teks menjadi objek 2D.
B. Dasar Teori
Objek 2D merupakan objek yang dibentuk dari beberapa koordinat (X,Y)
yang dihubungkan. Koordinat-koordinat untuk merepresentasikan objek 2D
akan lebih dinamis dan muudah dipelajari apabila ditulis dalam sebuah file
teks. File teks ini selain berisi tentang informasi koordinat objek 2D juga
menyimpan informasi jumlah titik, jumlah garis dan garis yang
menghubungkan antar titik.
T1
T7 T2
T6 T3
T4
T5
gambar di atas terdiri atas 7 buah titik dimana tiap-tiap titik dihubungkan
dengan garis dengan jumlah total garis adalah 7 buah garis. Dimana garis 1
menghubungkan T1 dan T2 dst.
28
Contoh representasi teks adalah sebagai berikut :
4 jumlah titik
4 jumlah garis
60 90 koordinat titik 1
70 100
60 110
50 100
1 2 garis yang menghubungkan titik 1 ke titik 2
2 3
3 4
4 1
C. Latihan
29
Pembacaan teks:
procedure TFORM1.pilih;
begin
nfile:=FileListBox1.FileName;
AssignFile(F, nfile);
Reset(F);
readln(f,ntitik);
readln(f,ngaris);
for i:=1 to ntitik do
begin
read(f,titik[i,1]);
readln(f,titik[i,2]);
end;
for i:=1 to ngaris do
begin
read(f,garis[i,1]);
readln(f,garis[i,2]);
end;
end;
Representasi teks :
paintbox2.Refresh;
for i:=1 to ngaris do
begin
t1:=garis[i,1];
t2:=garis[i,2];
xw1 := titik[t1,1];
yw1 := titik[t1,2];
xw2 := titik[t2,1];
yw2 := titik[t2,2];
PaintBox2.Canvas.MoveTo(XW1,YW1);
paintbox2.canvas.lineto(xw2,YW2);
end;
D. Tugas
Transformasikan representasi teks di atas dari koordinat alam ke
koordinat layar. Lengkapi juga dengan transformasi 2D (geser, putar,
skala,cermin)
30
MODUL IX
PROYEKSI OBJEK 2D KE 3D
A. Tujuan
1. Mahasiswa dapat mengetahui konsep proyeksi.
2. Mahasiswa dapat menproyeksikan objek 2D ke 3D.
B. Dasar Teori
Layar komputer berbentuk 2 dimensi dimana representasi objek yang
disajikan dalam bentuk koordinat (X,Y). Padahal sebagian besar kasus yang
dapat dipelajari berupa objek alam yang notabene adalah objek 3 dimensi
(X,Y,Z). sehingga terdapat permasalahan bagaimana memproyeksikan objek
3D ke media penampil yang berbentuk 2D.
Terdapat dua jenis proyeksi yaitu :
1. Proyeksi pararel : proyeksi yang menghilangkan salah satu
sudut pandang. biasanya terdapat pada gambar teknik seperti sketsa rumah
yang tampak atas. Istilah lain: proyeksi ortografis. Terdapat sejumlah
bidang pandang proyeksi ortogonal:
– pandang muka (front elevation) menghilangkan
koordinat Z
– pandang samping (side elevation) menghilangkan
koordinat X
– pandang atas (plan view) menghilangkan koordinat Y
2. Proyeksi perspektif : proyeksi yang menghasilkan proyeksi
yang sama dengan yang tampak oleh mata kita. Disini suatu garis dapat
terproyeksi dalam berbagai panjang yang berbeda tergantung jarak
terhadap bidang proyeksi.
31
Rumus :
Zprp − Zvp dp
Xp = X
Z − Zprp
= X
Z − Zprp
Zprp − Zvp dp
Yp = Y
Z − Zprp
=Y
Z − Zprp
C. Latihan
32
var
zprp,zvp,x1,y1,z1,x2,y2,z2,x3,y3,z3,d: real;
xp1,yp1,xp2,yp2,xp3,yp3: real;
begin
zvp := ScrollBar1.position;
zprp := scrollbar2.Position;
d := zprp -zvp;
x1 := 1;y1:=1;z1:=1;
x2 := 5;y2:=1;z2:=1;
x3 := 5;y3:=1;z3:=8;
xp1 := x1*(d/z1-zprp); yp1 := y1*(d/z1-zprp);
xp2 := x2*(d/z2-zprp); yp2 := y2*(d/z2-zprp);
xp3 := x3*(d/z3-zprp); yp3 := y3*(d/z3-zprp);
with paintbox1.Canvas do
begin
MoveTo(round(xp1),round(yp1));lineto(round(xp2),round(yp2));
MoveTo(round(xp2),round(yp2));lineto(round(xp3),round(yp3));
end;
Label3.Caption := floattostr(xp1)+','+floattostr(yp1);
Label4.Caption := floattostr(xp2)+','+floattostr(yp2);
Label5.Caption := floattostr(round(xp3))+','+floattostr(round(yp3));
end;
D. Tugas
Program latihan di atas belum sesuai dengan keadaan sebenarnya.
Transformasikan dengan formula windows ke viewport sehingga tampilannya
sesuai dengan apa yang diharapkan.
33
MODUL X
REPRESENTASI OBJEK 3D
A. Tujuan
1. Mahasiswa dapat mengetahui representasi koordinat dalam
bentuk file teks.
2. Mahasiswa dapat mentransformasi file teks menjadi objek 3D.
B. Dasar Teori
Objek 3D merupakan objek yang dibentuk dari beberapa koordinat
(X,Y,Z) yang dihubungkan. Koordinat-koordinat untuk merepresentasikan
objek 3D akan lebih dinamis dan muudah dipelajari apabila ditulis dalam
sebuah file teks. File teks ini selain berisi tentang informasi koordinat objek
3D juga menyimpan informasi jumlah titik, jumlah garis dan garis yang
menghubungkan antar titik.
T8
T7
T5 T6
T4 T3
T1 T2
gambar di atas terdiri atas 8 buah titik dimana tiap-tiap titik dihubungkan
dengan garis dengan jumlah total garis adalah 12 buah garis. Dimana garis 1
menghubungkan T1 dan T2 dst hingga semuanya terhubung.
34
Contoh representasi teks adalah sebagai berikut :
8 jumlah titik
12 jumlah garis
0 0 0 koordinat titik T1
50 0 0
50 40 0
0 40 0
0 0 80
50 0 80
50 40 80
0 40 80
1 2 garis yang menghubungkan T1 dan T2
2 3
3 4
4 1
5 6
6 7
7 8
8 5
1 5
2 6
3 7
4 8
C. Latihan
35
kode program dengan delphi :
deklarasi yang diperlukan :
var
Form1: TForm1;
nfile:string;
f : textfile;
titik,titikpry:array[1..20,1..3] of integer;
garis:array[1..20,1..2]of integer;
ntitik,ngaris:integer;
i,t1,t2:integer;
xp,yp,dp,zprp,zvp : real;
XW1,YW1,XV1,YV1 : REAL;
XW2,YW2,XV2,YV2 : REAL;
XWMIN,YWMIN,XWMAX,YWMAX : REAL;
XVMIN,YVMIN,XVMAX,YVMAX : REAL;
36
Penggambaran representasi Objek :
procedure TForm1.Button2Click(Sender: TObject);
begin
PaintBox1.refresh;
ListBox2.Clear;
ListBox3.Clear;
zprp := ScrollBar9.Position;
zvp := ScrollBar10.Position;
dp := zprp - zvp;
xwmin := ScrollBar1.Position;
ywmin := ScrollBar2.position;
xwmax := ScrollBar3.Position;
ywmax := ScrollBar4.Position;
xvmin := ScrollBar5.Position;
xvmax := ScrollBar6.Position;
yvmin := ScrollBar7.Position;
yvmax := ScrollBar8.Position;
for i := 1 to ntitik do
begin
xp := titik[i,1]*(dp/(titik[i,3]-zprp));
yp := titik[i,2]*(dp/(titik[i,3]-zprp));
titikpry[i,1] := round(xp);
titikpry[i,2] := round(yp);
ListBox2.Items.Add(inttostr(round(xp))+','+inttostr(round(yp)));
end;
for i:=1 to ngaris do
begin
t1:=garis[i,1];
t2:=garis[i,2];
xw1 := titikpry[t1,1];//showmessage(inttostr(titikpry[t1,1]));
yw1 := titikpry[t1,2];
xw2 := titikpry[t2,1];
yw2 := titikpry[t2,2];
ListBox3.Items.Add(inttostr(titikpry[t1,1])+','+
inttostr(titikpry[t1,2])+' KE '+inttostr(titikpry[t2,1])+
','+inttostr(titikpry[t2,2]));
if (ywmax <> ywmin) and (xwmax <> xwmin) then
begin
xv1:=xvmin+(xw1-xwmin)*(yvmax-xvmin)/(xwmax-xwmin);
yv1:=yvmin+(yw1-ywmin)*(xvmax-yvmin)/(ywmax-ywmin);
xv2:=xvmin+(xw2-xwmin)*(yvmax-xvmin)/(xwmax-xwmin);
yv2:=yvmin+(yw2-ywmin)*(xvmax-yvmin)/(ywmax-ywmin);
end;
PaintBox1.Canvas.MoveTo(round(XV1),round(YV1));
paintbox1.canvas.lineto(round(XV2),round(YV2));
end;
end;
D. Tugas
Buatlah representasi objek bangun selain kubus dan balok. Misalnya
trapesium, prisma dll.
37
MODUL XI
TRANSFORMASI 3D
A. Tujuan
Mahasiswa dapat mempelajari dan membuat macam-macam tranformasi
geometri 3D.
B. Dasar Teori
Translasi / Pergeseran
Sebuah titik dapat digeser atau ditranslasikan dengan persamaan sebagai
berikut :
X’ = x1 + Tx
Y’ = y1 + Ty
Z’ = z1 + Tz
Ket :
x1,y1,z1 : koordinat titik awal
X’,Y’,Z’: koordinat titik hasil
Tx : faktor perpindahan ke arah X (horisontal)
Ty : faktor perpindahan ke arah Y (vertikal)
Tz : faktor perpindahan ke arah Z (kedalaman)
Skala
Sebuah objek dapat diperbesar atau diperkecil dengan persamaan sebagai
berikut :
X’ = Sx * x
Y’ = Sy * y
Z’ = Sz * Z
Ket :
Sx : faktor pembesaran horizontal
Sy : faktor pembesaran vertical
Sz : faktor pembesaran kedalam
38
Rotasi
Mengelilingi Sumbu Z :
Rotasi 2D sebenarnya adalah rotasi 3D terhadap sumbu Z. Sebuah titik
dapat digeser atau ditranslasikan dengan persamaan sebagai berikut :
X’ = x.cos Θ – y.sin Θ
Y’ = x.sin Θ + y.cos Θ
Z’ = Z
Mengelilingi Sumbu X :
X’ = X
Y’ = y.cos Θ - z.sin Θ
Z’ = y.sin Θ + z.cos Θ
Mengelilingi Sumbu Y :
X’ = X.cos Θ + z.sin Θ
Y’ = Y
Z’ = -x.sin Θ + z.cos Θ
Ket :
x,y,z : koordinat titik asal
X’,Y’,Z’: koordinat hasil perputaran
Θ : sudut putar.
Dinyatakan dalam radian, maka tranformasinya
Θ = (sudut_derajat/180* Θ) dengan Θ = 22/7
C. Latihan dan Tugas
Untuk latihan dapat dikembangkan dari transformasi 2D dan sebagai tugas
lakukan transformasi 3D mulai dari translasi, skala dan perputaran untuk
objek yang merupakan representasi objek 3D (pengembangan dari modul
sebelumnya)
39
MODUL XII
OPENGL
A. Tujuan
1. Mahasiswa dapat mengetahui openGL.
2. Mahasiswa dapat membuat objek primitif OpenGL.
B. Dasar Teori
ambient.red := 0.2;
ambient.green := 0.5;
ambient.blue := 0.8;
ambient.alpha := 1.0;
40
diffuse.red := 0.8;
diffuse.green := 0.5;
diffuse.blue := 0.2;
diffuse.alpha := 1.0;
Primitives
Coordinate Transformation
41
• void glGetMaterial (GLenum face, GLenum pname, TYPE *params)
• void glIndex (TYPE index)
• void glLight (GLenum light, GLenum pname, TYPE param)
• void glLightModel (GLenum pname, TYPE param)
• void glMaterial (GLenum face, GLenum pname, TYPE param)
• void glNormal3 (TYPE nx, TYPE ny, TYPE nz)
• void glShadeModel (GLenum mode)
C. Latihan
langkah 1
tambahkan variabel dan prosedur berikut ini pada deklarasi form bagian private
(boleh juga di protected)
Quote:
{ Private declarations }
FDC : HDC;
FRC : HGLRC;
procedure IdleLoop(Sender : TObject; Var Done : boolean);
end;
langkah 3
tambahkan event Handler OnCreate pada form (klik dua kali pada form atau klik
dua kali pada window event OnCreate)
Quote:
42
procedure TForm1.FormCreate(Sender : TObject);
var
pfd : TPIXELFORMATDESCRIPTOR;
pixelformat,pf : integer;
begin
{ TAHAP I : Buat Window OpenGL }
FDC := GetDC( Panel1.Handle ); //window openGL akan ditampilkan di panel
FillChar(pfd, sizeof(pfd), 0);
pfd.nSize := sizeof(pfd);
pfd.nVersion := 1;
pfd.dwFlags := PFD_DRAW_TO_WINDOW or PFD_SUPPORT_OPENGL or
PFD_DOUBLEBUFFER;
pfd.iPixelType := PFD_TYPE_RGBA;
pfd.cColorBits := 16;
FRC := wglCreateContext(FDC);
wglMakeCurrent(FDC, FRC);
glMatrixMode( GL_PROJECTION );
glLoadIdentity;
gluPerspective( 45, Panel1.Width/Panel1.Height, 1, 500);//FoV, Aspect Ratio,
Near Clip, Far Clip
glMatrixMode( GL_MODELVIEW );
glLoadIdentity;
{ Set Kamera }
gluLookAt( 0, 0, -4, 0, 0, 0, 0, 1, 0 );// posisi.x, posisi.y, posisi.z, lookat.x,
lookat.y, lookat.z, up.x, up.y, up.z
Application.OnIdle := IdleLoop;
end;
43
langkah 4
glPushMatrix;
glColor( 0, 0.5, 0, 1); //warna ijo
glBegin(GL_QUADS); //gambar kotak (warna ijo)
glVertex3f( -0.5, -0.5, -0,5 );
glVertex3f( 0.5, -0.5, -0,5 );
glVertex3f( 0.5, 0.5, -0,5 );
glVertex3f( -0.5, 0.5, -0,5 );
glEnd;
glPopMatrix;
glFlush;
D. Tugas
44