Dokumen - Tips - Modul Grafika Lengkap
Dokumen - Tips - Modul Grafika Lengkap
GRAFIKA KOMPUTER
DOSEN PENGAMPU :
AGUS LIMBANG WARDANI, S.KOM
NIDN. 0505088301
MODUL I
PENGENALAN GRAFIKA KOMPUTER
A. Tujuan
1. Mahasiswa dapat memahami konsep grafika komputer
2. Mahasiswa dapat mengetahui istilah-istilah dalam grafika
B. Dasar Teori
1.
2.
Sistem komputer baik itu perangkat lunak ataupun keras untuk membuat
gambar/grafik dan memanipulasinya.
Sistem grafika komputer dibedakan menjadi dua yaitu :
Non-interaktif
Interaktif
3.
Prinsip CRT
Pemendaran phosfor pada layar (permukaan dalam tabung bagian
depan) setelah ditembak berkas elektron. Untuk mengatur ketajaman
berkas, digunakan suatu focusing system, suatu anoda bercelah sempit.
Berkas elektron yang menyebar disaring oleh celah hingga tersisa lintasan
berkas yang tipis. Kadang-kadang ditambah suatu akselerator elektron,
juga berupa anoda bercelah. Berkas ini lalu diarahkan ke deflektor.
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.
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
C. Tugas
Carilah peranan grafika komputer dalam kehidupan sehari-hari minimal 10
jenis peranan. Kemudian jelaskan masing-masing peranan tersebut.
MODUL II
MEMBENTUK GAMBAR DENGAN TITIK (PIXEL)
A.
Tujuan
1.
2.
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.
Image
Panel
2.
D.
Tugas Praktikum
Dengan menggunakan perintah titik, buatlah objek 2D sebagai berikut :
Bujur Sangkar
Bintang
Pentagon
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 bentukbentuk 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
Lingkaran
x1,y1
x2,y2
Canvas.Ellipse(x1,y1,x2,y2);
C.
Latihan
1.
2.
3.
10
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
X2, Y2
X3, Y3
X4, Y4
(X1, Y1)
(X3, Y3)
(X4, Y4)
(X2, Y2)
12
Menggambar Tembereng
Sintaks :
Chord (X1, Y1, X2, Y2, X3, Y3, X4, Y4)
Semua parameter bertipe integer;
Keterangan:
X1, Y1
X2, Y2
X3, Y3
X4, Y4
(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
X2, Y2
X3, Y3
X4, Y4
13
(X1, Y1)
(X3, Y3)
(X4, Y4)
(X2, Y2)
Mengambar kotak dengan sudut tumpul
Sintaks :
Rectangle(X1,Y1,X2,Y2,X3,Y3)
Semua parameter bertipe integer;
Keterangan :
X1, Y1
X2, Y2
X3, Y3
(X1, Y1)
X3
Y3
(X2, Y2)
14
15
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
1.
2.
Mengarsir Kurva
Sintaks :
Brush.Style := Arsiran
Nilai Arsiran berupa konstata, dengan daftar sebagai berikut :
Nilai Kostanta
Model Arsiran
bsClear
Tanpa Arsiran
bsSolid
bsHorisontal
bsVertical
bsFDiagonal
18
bsBDiagonal
bsCross
bsDiagCross
Sebagai contoh :
Canvas.Brush.Style := bsVertical;
Canvas.Rectangle(10, 10, 100, 100);
Menghasilkan kotak dengan model arsiran vertikal.
3.
19
4.
Suatu kurva tertutup dapat diisi warna tentu dengan metode Floodfil.
Sintaks :
Floodfill (X,Y,Color, FillStyle)
Keterangan:
X,Y
Color
FillStyle
(X,Y)
(X,Y)
20
C.
Tugas Praktikum
1.
2.
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
X,Y
Tx
Ty
Skala
Sebuah objek dapat diperbesar atau diperkecil dengan persamaan sebagai
berikut :
X = Sx * x
Y = Sy * y
22
Ket :
Sx
Sy
X,Y
: 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
X,Y
23
C.
Latihan
D.
Tugas
Buatlah program untuk trasnformasi seperti pada gambar berikut ini :
24
MODUL VII
WINDOWS DAN VIEWPORT
A.
Tujuan
1.
2.
B.
Dasar Teori
Sistem koordinat windows :
0,0
0,0
25
: Xwmin, Xwmax
Ywmin, Ywmax
XVMAX XVMIN
XWMAX XWMIN
YV YVMIN
YW YWMIN
C.
Latihan
26
:=0;yvmin:=120;
:=120;yvmax:=0;
:=0;ywmin:=0;
:=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.
2.
B.
informasi
jumlah
titik,
jumlah
garis
dan
garis
yang
T5
T3
T2
T4
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
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.
2.
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
X
Z Zprp
Z Zprp
Xp X
Zprp Zvp
dp
Y
Zprp
Z
Zprp
Yp Y
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.
2.
B.
T7
T5
T6
T4
T1
T3
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
C.
Latihan
35
36
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
Ty
Tz
Skala
Sebuah objek dapat diperbesar atau diperkecil dengan persamaan sebagai
berikut :
X = Sx * x
Y = Sy * y
Z = Sz * Z
Ket :
Sx
Sy
Sz
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
: sudut putar.
Dinyatakan dalam radian, maka tranformasinya
= (sudut_derajat/180* ) dengan = 22/7
C.
39
MODUL XII
OPENGL
A.
B.
Tujuan
1.
2.
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;
OpenGL Function Calls
Primitives
void glBegin (GLenum mode)
void glEdgeFlag (GLboolean flag)
void glEdgeFlagv (const GLboolean *flag)
void glEnd (void)
extern void glPolygonOffset (GLfloat factor, GLfloat units)
void glRect (TYPE x1, TYPE y1, TYPE x2, TYPE y2)
void glRectv (const TYPE *v1, const TYPE *v2)
void glVertex2 (TYPE x, TYPE y)
void glVertex3 (TYPE x, TYPE y, TYPE z)
void glVertex4 (TYPE x, TYPE y, TYPE z, TYPE w)
Coordinate Transformation
void glDepthRange (GLclampd near, GLclampd far)
void glFrustum (GLdouble left, GLdouble right, GLdouble bottom,
GLdouble top, GLdouble near, GLdouble far)
void glLoadIdentity (void)
void glLoadMatrix (const TYPE *m)
void glMatrixMode (GLenum mode)
void glMultMatrix (const TYPE *m)
void glOrtho (GLdouble left, GLdouble right, GLdouble bottom,
GLdouble top, GLdouble near, GLdouble far)
void glPopMatrix (void)
void glPushMatrix (void)
void glRotate (TYPE angle, TYPE x, TYPE y, TYPE z)
void glScale (TYPE x, TYPE y, TYPE z)
void glTranslate (TYPE x, TYPE y, TYPE z)
void glViewport (GLint x, GLint y, GLsizei width, GLsizei height)
Coloring and Lighting
void glColor3 (TYPE red, TYPE green, TYPE blue)
void glColor4 (TYPE red, TYPE green, TYPE blue, TYPE alpha)
void glColorMaterial (GLenum face, GLenum mode)
void glFrontFace (GLenum dir)
void glGetLight (GLenum light, GLenum pname, TYPE *params)
void glGetMaterial (GLenum face, GLenum pname, TYPE *params)
void glIndex (TYPE index)
41
C.
langkah 1
ganti ke code view (F12).
tambahkan openGL pada uses clause
Quote:
uses
Windows, Messages,....,
...
,openGL
;
langkah 2
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);
tekan Shift+Control+C untuk membuat secara otomatis prosedur IdleLoop di
bagian implementation (akan muncul kode berikut setelah implementation)
Quote:
procedure TForm1.IdleLoop(Sender:TObject; Var Done: boolean);
begin
end;
biarkan prosedur ini kosong, akan kita isi nanti.
langkah 3
tambahkan event Handler OnCreate pada form (klik dua kali pada form atau klik
dua kali pada window event OnCreate)
Quote:
procedure TForm1.FormCreate(Sender : TObject);
42
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;
{$WARNINGS OFF} //biar nggak muncul warning karena penggunaan operator
'@'
pf := ChoosePixelFormat(FDC, @pfd);
SetPixelFormat(FDC, pf, @pfd);
{$WARNINGS ON} //kembalikan ke normal
FRC := wglCreateContext(FDC);
wglMakeCurrent(FDC, FRC);
{ TAHAP II : Inisialisasi variabel openGL }
glViewport( 0, 0, Panel1.Width, Panel1.Height ); //
glClearColor( 0, 0, 0, 1.0 ); // r:0 g:0 b:0 = hitam
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;
langkah 4
43
Tugas
Buat objek-objek primitif dengan openGL
44