MODUL PRAKTIKUM

GRAFIKA KOMPUTER 2D

Disusunoleh:
MuhammadFuadDR
03/165203/PA/9277

LABORATORIUM KOMPUTASI
JURUSAN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS GADJAH MADA
YOGYAKARTA
2006

BAB I
SoftwareUntukGrafikaKomputer
Softwareuntukmenggambargrafikpadakomputeradaduajenisyaitusoftware
yangbebentuklibraryataupustakapadasuatubahasapemrograman(paketpemrograman
grafika)dansoftwareyangberbentukaplikasikhusus.Padasoftwareyangberbentuk
librarysuatubahasapemrogramanakandilengkapifungsifungsigrafikyangberasaldari
paketsoftwaregrafiktersebutyangtermasukcontohdarijenisiniadalahOpenGlyang
dibuatSiliconGraphics.Sedangpadapaketaplikasikhususgambargrafikdibuattanpa
mengetahuibagaiamanahalitudapatterjadi,contohdarijenisiniadalahBlenderataupun
Qcad. PadaModuliniyangdigunakanadalahsoftwarejenispertamadengan
menggunakanfungsigrafikpadaBahasaPemrogramanPascal.
Note:Semuakodepadamodulinimenggunakanprosedurprosedurdi
bawah.tambahkanpadasetiapawalkodeprogram!.
procedureinit;
vargd,gm:integer;
begin
gm:=detect;gd:=0;
InitGraph(gd,gm,'');
ifGraphResult<>grOkthen
begin
Writeln('Graphdriver',gd,'graphmode',gm,'not
supported');
Halt(1);
end;
end;
proceduredestroy;
begin
closegraph;
end;

BABII

OutputPrimitif
1.TITIK
Titik dalam Grafika Komputer bisa didefinisikan sebagai suatu posisi tertentu dalam
suatu sistem koordinat. Sistem koordinat yang dipakai bisa Polar Coordinates atau
Cartesian Coordinates. Biasanya dalam pemrograman grafis, yang paling umum
digunakanadalahCartesianCoordinates.
Dalam CartesianCoordinates,titikdidefinisikansebagaikombinasiduabilanganyang
menentukanposisitersebutdalamkoordinatxdany(2D)
ContohPenerapan
JikakitainginmenempatkantitiktitikA(2,4),B(1,1),C(4,1.5),D(4,2),E(4,3)
Kitabisamenggambarkansebagaiberikut:
A

GAMBAR 1 : TITIK DALAM CARTESIAN COORDINATESAda 2 definisi

koordinat dalam komputer terutama dalam Sistem Operasi Windows, yaitu Screen
Coordinate,danCartesianCoordinate,keduanyaseringmembingungkan.Untuklebih
jelasnyamarikitalihatgambarberikut:

Car t esi an Coor di nat es

Scr een Coor di nat es

Y
X

GAMBAR2:PERBEDAANSCREENDANCARTESIANCOORDINATES
Prinsipnya,karenamonitordidesainuntukmenggambardariataskebawah,makasumbu
y pada Screen Coordinates dan Cartesian Coordinates berbeda arah, untuk Screen
Coordinates,sumbuYarahnyakebawah,sedangkanpadaCartesianCoordinates,sumbu
Y arahnya ke atas. Biasanya dalam rendering pipeline, hal yang terakhir dilakukan
adalahmengkonversiCartesianCoordinateskeScreenCoordinates.
DalamSistemOperasiLinux,koordinatyangdipakaiantaraCartesiandanScreensama,
yaituYpositifkeatas.
Untukkoordinate3D,samadengan2D,hanyasajaditambah1sumbuyaitusumbuz
(axisz). Ada beberapa cara untuk menggambarkan sumbu X, Y dan Z, ini. Pertama
dengansumbuzmengarahkeatas(gambar3).
Z

X
Y

GAMBAR3:KOORDINATDENGANZMENGARAHKEATAS
dankoordinatdengankoordinatymengarakkeatas.

Y
Z

GAMBAR4:KOORDINATDENGANYMENGARAHKEATAS

2.Garis
Umumnyapersamaangarisluruspadakoordinatkartesiusdiwujudkandalam
persamaangaris:y=m.x+b
jikadimisalkanpadaduatitik(x0,y0danx1,y1)akandibuatsebuahgarislurus,kitadapat
menentukannilaim'danbdenganpersamaanberikut:
y1y0
m=______
x1x0
b=y1m.x1

algoritmauntukmenggambargarispadakomputerdidasarkanpadaduapersamaandi
atas.dimanamadalahgradienataukemiringangaristersebut.
1. Algoritmadigitaldifferentialanalyzer(DDA),
Prinsipalgoritmainiadalahmengambilnilaiintegerterdekatdenganjalurgaris
berdasarkanatassebuahtitikyangtelahditentukansebelumnya(titikawalgaris).
AlgoritmapembentukangarisDDA:
1. Tentukanduatitikyangakandihubungkandalampembentukangaris.
2. Tentukansalahsatutitiksebagaiawal(x0,y0)dantitikakhir(x1,y1).
3. Hitungdx=x1x0,dandy=y1y0.

4. Tentukanlangkah,yaitudengancarajarakmaksimumjumlahpenambahannilai
xmaupunnilaiy,dengancara:
Bilanilaiabsolutdaridxlebihbesardariabsolutdy,makalangkah=absolut
daridx.
Bilatidakmakalangkah=absolutdaridy
5. Hitungpenambahankoordinatpixelyaitux_increment=dx/langkah,dan
y_increment=dy/langkah
6. Koordinatselanjutnya(x+x_increment,y+y_increment)
7. Posisipixelpadalayarditentukandenganpembulatannilaikoordinattersebut.
8. Ulanginomor6dan7untukmenentukanposisipixelselanjutnya,sampaix=x1
dany=y1.
ContohProsedurDDAdalampascal:
uses graph,crt;
{tambahkan pada bagian ini prosedur penginisialisasian device,
lihat pada bab 1}
procedure drawLine(xstart,ystart,xend,yend:integer);
var
step,k:integer;
dx,dy:real;
x_inc,y_inc,x,y:real;
begin
dx:=xend-xstart;
dy:=yend-ystart;
x:=xstart;
y:=ystart;
if abs(dx) > abs(dy) then
step:=round(abs(dx))
else
step:=round(abs(dy));
x_inc:=dx/step;
y_inc:=dy/step;
putPixel(round(x),round(y),30);
for k:=1 to step do

begin
x:=x+x_inc;
y:=y+y_inc;
putPixel(round(x),round(y),30);
end;
end;

begin
init;
{menggambar garis dari titik 10,10 ke 500,10}
drawLine(10,10,500,10);
readkey;
destroy;
end.

2. AlgoritmagarisBressenham
TidaksepertiAlgoritmaDDA,AlgoritmaBressenhamtidakmembulatkannilai
posisipixelsetiapwaktu.AlgoritmaBressenhamhanyamenggunakan
penambahannilaiintegeryangjugadapatdiadaptasiuntukmenggambar
lingkaran.
Berikutinilangkahlangkahuntukmembentukgarismenurutalgoritma
Bressenham:
1.Tentukanduatitikyangakandihubungkan
2.Tentukansalahsatutitikdisebelahkirisebagaititikawalyaitu(x0,y0)dan
titiklainnyasebagaititikakhir(x1,y1).
3. Hitungdx,dy,2dxdan2dy2dx.
4. Hitungparameter
p0=2dydx
5. Untuksetiapxksepanjangjalurgaris,dimulaidengank=0,
Bilapk<0,makatitikselanjutnyaadalah(xk+1,yk),danpk+1=pk+2dy

Bilatidak,makatitikselanjutnyaadalah(xk+1,yk+1),danpk+1=pk+2dy
2dx.
6. Ulangilangkahnomor5untukmenentukanposisipixelselanjutnya,samapai
x=x1dany=y1.
ContohProseduralgoritmaBressenhamuntukmenggambargarisdarititik(10,10)
ke(500,10).
uses graph,crt;
{tambahkan pada bagian ini prosedur penginisialisasian device,
lihat pada bab 1}
procedure DrawBressLine(xa,ya,xb,yb:integer);
var
dx,p,dy,xEnd:integer;
x,y:real;
begin
dx:= abs(xb-xa);
dy:= abs(yb-ya);
p:=2*dy-dx;
if xa > xb then
begin
x:=xb;
y:=yb;
xEnd:=xa;
end
else
begin
x:=xa;
y:=ya;
xEnd:=xb;
end;
putPixel(round(x),round(y),30);

while x < xEnd do

begin
x:=x+1;
if p < 0 then

p:=p+(2*dy)
else
begin
y:=y+1;
p:=p+(2*(dy-dx));
end;
putPixel(round(x),round(y),30);
end;
end;

begin
init;
DrawBressLine(10,10,500,10);
readkey;
destroy;
end.

4.AlgoritmaPembentukLingkaran
Secaraumumprosedurpembentuklingkarandibuatdenganrumusdasar
x2+y2=R2.Terdapatbeberapacarauntukmembentuksuatulingkarannamuntidak
efisien.Lingkarandapatdibuatdenganmenggambarkanseperempatlingkarankarena
bagianlaindapatdibuatsebagaibagianyangsimetris.
a. AlgoritmaSimetrisdelapantitik
Padaalgoritmainipembuatanlingkarandilakukandenganmenentukansatutitik
awal.Bilatitikawalpadalingkaran(x,y)makaterdapattigaposisilain,sehingga
dapatdiperolehdelapantitik.Dengandemikiansebenarnyahanyadiperlukan
untukmenghitungsegmen45dalamamenentukanlingkaranselengkapnya.
Dengantitikpusatlingkarantertentu,delapantitiksimetrisdapatditampilkan
denganprosedurCirclePointSebagaiberikut:
procedure CirclePoints(x, y, value:integer);
begin
putPixel(x,y,value);
putPixel(-x,y,value);

putPixel(x,-y,value);
putPixel(-x,-y,value);
putPixel(y,x,value);
putPixel(-y,x,value);
putPixel(y,-x,value);
putPixel(-y,-x,value);
end;

b. AlgoritmaLingkaranMidpoint
AlgoritmaLingkaranMidpointjugadisebutalgoritmalingkaran
Bressenham.Bressenhammengembangkangeneratorlingkaranyangcukupefisien.
Algoritmayangdigunakanmembentuksemuatitikberdasarkantitikpusatdengan
penambahansemuajalursekelilinglingkaran.Algoritmainiditurunkandarialgoritma
Midpointuntukpembentukangaris.Dalamhalinihanyadiperhatikanbagian45dari
suatulingkaran,yaituoktankeduadarix=0kex=R/2,danmenggunakanCirclePoints
untukmenampilkantitikdariseluruhlingkaran.
LangkahlangkahuntukmembentuklingkaranalgoritmaCircleMidpoint:
1. Tentukanradiusrdengantitkpusatlingkaran(xc,yc)kemudiandiperoleh
(x0,y0)=(0,r)
2. Hitungnilaidariparameter
P0=5/4r
3. Tentukannilaiawalk=0,untuksetiapposisixkberlakusebagaiberikut:
o BilaPk<0,makatitikselanjutnyaadalah(xk+1,yk))dan
Pk+1=Pk+2xk+1+1
Bilatidak,makaselanjutnyaadalah(xk+1,yk1),danPk+1=Pk+2xk+1+1
2yk+1
Dimana2xk+1=2xk+2dan2yk+=2yk2
4. Tentukantitiksimetrispadaketujuhoktanyanglain

5. Gerakkansetiapposisipixel(x,y)padagarismelingkardarilingkarandengan
titikpusat(xc,yc)dantentukannilaikoordinat:
x=x+xc y=y+yc
6. Ulangilangkahke3sampai5,sehinggax>=y

Contohalgoritmalingkaranmidpoint
UntukmenggambarkanalgoritmaBressenhamdalampembentukansuatu
lingkarandengantitikpusat(0,0)danradius10,perhitunganberdasarkanpadaoktandari
kuadranpertamadimanax=0sampaix=y.Nilaiparameterdapatditentukandengan
P0=1r=110=9
Koordinattitkawaladalah(x,r)=(0,8).
K

Pk

0
1
2
3
4
5

7
4
1
6
3
2

(Xk+1,Yk+1)oktan1
(0,8)
(1,8)
(2,8)
(3,7)
(4,7)
(5.6)
(6,5)

Proseduralgoritmalingkaranmidpoint
Inputyangdigunakanpadaproseduriniadalahkoordinattitikpusatdanradius
lingkaran.PosisipixelditentukandenganrutinsetPixel.
uses graph,crt;
{tambahkan pada bagian ini prosedur penginisialisasian device,
lihat pada bab 1}
procedure circlePlotPoints(xCenter,yCenter,x,y:integer);
begin
putPixel(xCenter+x, yCenter+y,30);
putPixel(xCenter-x, yCenter+y,30);
putPixel(xCenter+x, yCenter-y,30);

putPixel(xCenter-x, yCenter-y,30);
putPixel(xCenter+y, yCenter+x,30);
putPixel(xCenter-y, yCenter+x,30);
putPixel(xCenter+y, yCenter-x,30);
putPixel(xCenter-y, yCenter-x,30);
end;
procedure circleMidPoint (xCenter,yCenter,radius:integer);
var
x,y,p:integer;
begin
x:=0;
y:=radius;
p:=1-radius;
circlePlotpoints(xCenter,yCenter,x,y);
while x<y do
begin
x:=x+1;;
if p<0 then
p:=p+(2*x+1)
else
begin
y:=y-1;
p:=p+(2*(x-y)+1);
end;
end;
circlePlotPoints(xCenter,yCenter,x,y);
end;
begin
init;
circleMidPoint(100,100,90);
readkey;
destroy;
end.

5.AlgoritmaPembentukanElips
Elipsmerupakanmodifikasidaribentuklingkaran,denganmemasukkanmayor
danminoraxispadaprosedurlingkaran.Elipsditentukanolehsatusettitikdengan

memperhitungkanjumlahjarakdarikeduaposisi(foci).Blajarakkekeduafocidari
sembarangtitikp(x,y)padaelipsdiberilabeld1dand2,makapersamaanelipsmenjadi
d1+d2=konstan
Untukmenggambarkanjarakd1dand2denganketentuankoordinatmasingmasing
F1(x1,y1)danF2(X2,Y2)
((xx1)2+(yy1)2)2+((xx2)2+(yy2)2=konstan
Dimanamayordanminoraxiselipsdalamposisiparareldengansumbuxdansumbuy
padacontohini,parameterrxdisebutsemimajoraxisdanrydisebutsemiminoraxis,
sehinggapersamaanelipsdenganparameterrxdanrymenjadi
((xrc)/rx)2+((yyc)/ry)2=1
AlgoritmaelipsMidpoint
Untukalgoritmapembentukanelips,pendekatanyangdilakukansamadengan
penggunaanpadasaatmenampilkanlingkaran.Denganparameteruntukelipspadaposisi
standar,yaiturx,ry,dan(xc,yc).Bilaelipsditampilkanpadaposisistandar,makadapat
dilakukandenganmemutarelipstersebutmenurunkoordinattitikpusat,dan
mendapatkankembalimayordanminoraxis.
Metodemidpointuntukelipsdijalankanpadakuadranpertamadalamduabagian.
Bagianpertamamenrutkemiringanelipsrx<ry.Penambahandenganunitsteppadaarah
sumbuxdilakukanbilaslopelebihkecildari1,dandenganunitstepmenurutsumbuy
bilakemiringanlebihbesardari1.
Bagian1dan2dapatdigunakanuntukbermacammacamcara.Pertamadimulai
dariposisi(0,ry)danstepsearahjarumjamsepanjangjalurelipspadakuadranpertama.
Pergeserandenganunitstepdalamxpadasaatslopelebihbesardari1.
Alternatiflain,dimulaidari(rx,0)danseleksititikdalamarahberlawanandengan
arahjarumjam.Penggeseranunitstepykeunitstepxpadasaatkemiringanlebihbesar
dari1.denganprosesorpararel,posisipixeldapatdihitungdalamduabagiansekaligus

PembentukanelipsmenurutalgoritmaCirclemidpointsebagaiberikut:
1. Tentukanrx,rydanpusatelips(xc,yc)kemudiandiperoleh
(xo,yo)=(0,ry)
2. Hitungnilaiparameter
P10=ry2rx2ry+1/4rx2
3. Tentukannilaiawalk=0,untuksetiapposisixkberlakusebagaiberikut:

Bilap1k<0makatitikselanjutnyaadalah(xk+1,yk)
p1k+1=p1k+2ry2xk+1+ry2

Bilatidak,makatitikselanjutnyaadalah(xk+!,yk1)dan
p1k+1=p1k+2ry2xk+12rxyk+1+ry2

dengan
2ry2xk+1=2ry2xk+2ry2
Dan
2rxyk+1=2rx2yk+2rx2
Teruskansampai2ry2x>=2rx2y
4. Tentukannilaiparameterpadabagiankeduamenggunakantitikterakhir(x0,y0)
yangtelahdihitungpadabagianpertama,sebagaiberikut
P2k+1=2ry2(xo+1/2)2+2rx2(yo1)2rx2ry2

5. Setiapposisiykpadabagiankedua,dimulaidengank=0

Bilap2k>0makatitikselanjutnyaadalah(xk,yk1)
p2k+1=p2k+2rx2yk+1+rx2

Bilatidak,makatitikselanjutnyaadalah(xk+1,yk1)dan
p2k+1=pk+2ry2xk+12rxyk+1+ry2

6. Tentukantitiksimetrispadaketigakuadranlainnya

7. Gerakkansetiapposisi(x,y)padagarismelingkardarielispdengantitik
pusat(xc,yc)dantentukannilaikoordinat
x=x+xcy=y+yc
8. Ulangilangkahuntukbagianpertamadiatas,sehingga2ry2x>=2rx2y

ContohalgoritmaelipsMidpoint
Untukmenggambarkanalgoritmamidpointdalampembentukanelipsdengantitik
pusat(0,0)danmayoraxisrx=6,sertaminoraxisry=8,perhitunganberdasarkanpada
kuadranpertamasebagaiberikut:,nilaiparameterdapatditentukan
2ry2x=0
2ry2x=2rx2ry
p1o=ry2+rx2ry1/4rx2
=215
Koordinattitikawal(x,r)=(0,8)
K

Pk

0
1
2
3
4
5
6
7
8
9

215
23
297
241
108
236
16
600
492
456

ProseduralgoritmaelipsMidpoint

(Xk+1,Yk+1)oktan1
(0,8)
(1,8)
(2,8)
(3,7)
(4,6)
(5.5)
(5,4)
(6,3)
(6,2)
(6,1)
(6,0)

Prosedurberikutmenampilkanposisipixelpadamonitordenganalgorima
Midpoint.Inputyangdigunakanadalahkoordinattitikpusatmayoraxis,danminoraxis.
PosisipixelditentukandenganrutinsetPixel.
uses graph,crt;
{tambahkan pada bagian ini prosedur penginisialisasian device,
lihat pada bab 1}
procedure elipsPlotPoints(xCenter,yCenter,x,y:integer);
begin
putPixel(xCenter+x, yCenter+y,30);
putPixel(xCenter-x, yCenter+y,30);
putPixel(xCenter+x, yCenter-y,30);
putPixel(xCenter-x, yCenter-y,30);
end;

procedure elipsMidPoint(xCenter,yCenter,Rx, Ry:integer);

var
Rx2,Ry2,x,y,twoRx2,twoRy2,py,px,p:integer;
begin
Rx2:=Rx*Rx;
Ry2:=Ry*Ry;
x:=0;
y:=Ry;
twoRx2:=2*Rx2;
twoRy2:=2*Ry2;
px:=0;
py:=twoRx2*y;
elipsPlotPoints(xCenter,yCenter,x,y);
//bagian1
p:=round(Ry2-(Rx2*Ry)+(0.25*Rx2));
while px<py do
begin
x:=x+1;
px:=px+twoRy2;
if p<0 then
p:= p+(Ry2+px)
else
begin

y:=y-1;
py:=py-twoRx2;
p:=p+(Ry2+px-py);
end;
elipsPlotPoints(xCenter,yCenter,x,y);
end;
//bagian 2
p:=round(Ry2*(x+0.5) *(x+0.5)+Rx2*(y-1) *(y-1)-Rx2*Ry2);
while y>0 do
begin
y:=y-1;
py:=py-twoRx2;
if p>0 then
p:=p+(Rx2-py)
else
begin
x:=x+1;
px:=px+twoRy2;
p:=p+Ry2+px-py;
end;
elipsPlotPoints(xCenter,yCenter,x,y);
end;
end;
begin
init;
elipsMidPoint(130,120,120,190);
readkey;
destroy;
end.

6. Fillareaprimitive
Terdapatduadasarpendekatanuntukmengisiareapadarastersystem.Pertama,
menentukanoverlapinternaluntukscanlineyangmelintasiarea.Metodelainyaitu
denganmemulaidarititiktertentupadaposisididalampolygondanmenggambar
denganarahmenyebarkepinggir,sampaibataspolygon.
1. Algoritmascanline

Titikpotongdiurutkandarikirikekanan.Posisiyangberhubunganpada
framebufferantarasepasangtitikpotongdiberiwarnatertentu.Posisiempat
pixelsebagaititikpotongantaragarisbataspolygonditentukanolehduabuah
pixelpadakoordinatdarrix=8kex=13dandarix=23kex=34
2. Algoritmaboundaryfill.
Metodeinibermanfaatuntukpaketaplikasigrafikinteraktifdimanatitik
dalamdapatdenganmudahditentukan.Prosedurboundaryfillmenerimainout
koordinatsuatutitik(x,y),warnaisidangarisbatas.Dimulaidarititik(x,y),
prosedurmemeriksaposisititiktetangga,yaituapakahmerupakanwarnabatas.
Bilatidak,makatitiktersebutdigambardenganwarnaisi.Prosesinidilanjutkan
sampaisemuatitikpadabatasdiperiksa.Prosedurberikutmenampilkanmetode
rekursifmengisi4bidangdenganintensitaspadaparameterfill.
procedure

boundaryFil( x,y,fill,boundary:integer);

var
current:integer;
begin
current:= getPixel(x,y);
if (current <> boundary) and (current <> fill) then
begin
putPixel(x,y,fill);
boundaryFill(x+1,y,fill,boundary);
boundaryFill(x-1,y,fill,boundary);
boundaryFill(x,y+1,fill,boundary);
boundaryFill(x,y-1,fill,boundary);
end;
end;

3. Algoritmafloodfill
Pendekatanlainuntukmengisisuatubidangpolygonadalahalgorima
floodfill.Metodeinidimulaipadatitik(x,y)danmendefinisikanseluruhpixel
padabidangtersebutdenganwarnayangsama.Bilabidangyangakandiisi

warnamemilikibeberapawarna.Pertamatamayangdibuataadalahmembuat
nilaipixelbaru,sehinggasmuapixelmemilikiwarnayangsama.Prosedur
berikutmenggambarkanmetodefloodfilluntukmengisiwarnasuatupolygon.
procedure floodFill( x,y,fillColor,oldColor:integer);
begin
if getPixel(x,y) = oldcolor then
begin
putPixel(x,y,fillcolor);
floodFill(x+1,y , fillColor, oldColor);
floodFill(x-1,y , fillColor, oldColor);
floodFill(x,y+1 , fillColor, oldColor);
floodFill(x,y-1 , fillColor, oldColor);
end;
end;

BABIII

TransformasiDuaDimensi
1

TransformasiDasar
a. Translasi
Translasidilakukandenganpenambahantranslasipadasuatutitikkoordinatdengan

translationvectorataushiftvector,yaitu(tx,ty).Koordinatbarutitikyangditranslasi
dapatdiperolehdenganmenggunakanrumus
x=x+tx
y=y+ty
translasiadalahtransfomasidenganbentukyangtetapmemindahkanobjekapaadanya.
Titikyangakanditranslasiakandipindahkankelokasilainmenurutgarislurus.

ContohTranslasi
Untukmenggambarkantranslasisuatuobjekyangberupasegitigadengankoordinat
A(10,10),B(30,10),danC(10,30)dengantranslationvector(10,20),pertamatama
dihitungkoordinathasiltranslasi
TitikA
xA=xA+tx=10+10=20
yA=yA+ty=10+20=30
HasiltranslasititikA(20,30)
TitikB
xB=xB+tx=30+10=40
yB=yB+ty=10+20=30
HasiltranslasititikB(40,30)
TitikC
xC=xC+tx=10+10=20

yC=yC+ty=30+20=50
HasiltranslasititikC(20,50)
DengandemikianhasiltranslasisegitigadengankoordinatA(20,30)B(40,30)
C(20,50).Segitigayangbarusamabentuknyadengansegitigayanglama.
ContohProgramtranslasigaris(10,10,500,10)denganvectortranslasi20,10
uses graph,crt;
var
x0,y0,x1,y1:integer;

{tambahkan pada bagian ini prosedur penginisialisasian device, lihat

pada bab 1}
procedure drawLine(xstart,ystart,xend,yend:integer);
var
step,k:integer;
dx,dy:real;
x_inc,y_inc,x,y:real;
begin
dx:=xend-xstart;
dy:=yend-ystart;
x:=xstart;
y:=ystart;
if abs(dx) > abs(dy) then
step:=round(abs(dx))
else
step:=round(abs(dy));
x_inc:=dx/step;
y_inc:=dy/step;
putPixel(round(x),round(y),30);
for k:=1 to step do
begin
x:=x+x_inc;
y:=y+y_inc;
putPixel(round(x),round(y),30);
end;
end;

procedure transLine(xstart,ystart,xend,yend,xtrans,ytrans:integer; var

xstartout,ystartout,xendout,yendout:integer);
begin
xstartout:=xstart+xtrans;
ystartout:=ystart+ytrans;
xendout:=xend+xtrans;
yendout:=yend+ytrans;
end;
begin
init;
{menggambar garis dari titik 10,10 ke 500,10}
drawLine(10,10,500,10);
transLine(10,10,500,10,20,10,x0,y0,x1,y1);
drawLine(x0,y0,x1,y1);
readkey;
destroy;
end.

Penskalaan
Transformasiskalaadalahperubahanukuransuatuobjek.Koordinatbarudiperoleh
denganmelakukanperkaliankoordinatdenganasclingfactor,yaitu(sx,sy)dimanasx
adalhscalingfacoruntuksumbuxdamsyadalahscalingfactoruntuksumbuy.koordinat
barutitikyangdiskaladapatdiperolehdengan
x=x.sx
y=y.sy
scalingfactorsxdansydapatdiberikansembarangnilaipositif.Nilailebihdari1
menandakanbahwasebuahobjekdiperbesarsedangnilainilaikurangdari1
menunjukkanbahwaobjekdiperkecil.
Contohpenskalaan
Untukmenggambarkanskalasuatuobjekyangmerupakansegiempatdengan
koordinatA(10,10),B(30,10),C(30,20),D(10,20)diskaladenganscalingfactor(3,2),

pertamatamadihitungkoordinathasilskalasatudemisatu,pertamatamadihitung
koordinathasilskalasatudemisatu
TitikA
xA=xA.sx=10*3=30
yA=yA.sy=10*2=20
HasilskalatitikA(30,20)
TitikB
xB=xB.sx=30*3=90
yB=yB.sy=10*2=20
HasilskalatitikB(90,20)
TitikC
xC=xC.sx=30*3=90
yC=yC.sy=20*2=40
HasilskalatitikC(90,40)
TitikD
xD=xD.sx=10*3=30
yD=yD.sy=20*2=40
HasilskalatitikD(30,40)
Skaladenganfixedpoint
Lokasiskalasuatuobjekdapatdikontroldenganmenentukantitiktertentu
yangdisebutfixedpoint(xf,yf).Koordinatfixedpointdapatdapatpada
sembarangposisi.Poligonkemudiandiskalarelativeterhadapfixedpointdengan
melakukanskalajarakdaritiaptitikterhadapfixedpoint.Untuktitikdengan
koordinat(x,y)diperoleh(x,y)sebagaiskala
x=xf+(xxf)sx
y=yf+(yyf)sy

ContohProgrampenskalaangaris(10,10,50,10)denganskala2
uses graph,crt;
var
x0,y0,x1,y1:integer;
{tambahkan pada bagian ini prosedur penginisialisasian device,
lihat pada bab 1}
procedure drawLine(xstart,ystart,xend,yend:integer);
var
step,k:integer;
dx,dy:real;
x_inc,y_inc,x,y:real;
begin
dx:=xend-xstart;
dy:=yend-ystart;
x:=xstart;
y:=ystart;
if abs(dx) > abs(dy) then
step:=round(abs(dx))
else
step:=round(abs(dy));
x_inc:=dx/step;
y_inc:=dy/step;
putPixel(round(x),round(y),30);
for k:=1 to step do
begin
x:=x+x_inc;
y:=y+y_inc;
putPixel(round(x),round(y),30);
end;
end;
procedure scaleLine(xstart,ystart,xend,yend,scale:integer; var
xstartout,ystartout,xendout,yendout:integer);
begin
xstartout:=xstart*scale;
ystartout:=ystart*scale;
xendout:=xend*scale;
yendout:=yend*scale;
end;

begin
init;
drawLine(10,10,50,10);
scaleLine(10,10,50,10,2,x0,y0,x1,y1);
drawLine(x0,y0,x1,y1);
readkey;
destroy;
end.

Rotasi
Rotasiduadimensimemindahkansebuahobjekmenurutgarismelingkar.Untuk
melakukanrotasidiperlukansudutrotasiadanpivotpoint(xp,yp).Nilaipositifdari
sudutrotasimenentukanarahrotasiberlawananadenganarahjarumjam.Sedangkan
sudutrotasinegativememutarobjeksearahdenganjarumjam.
Rumustransformasiuntukrotasisuatutitik(x,y)dengansudutrotasiasebagai
berikut:
x=xcosaysina
y=ysina+ycosa
ContohRotasi
Untukmenggambarkanrotasisuatuobjekyangberupasegitigadengankoordinat
A(10,10),B(30,10),danC(10,30)dengansudutrotasi30terhadaptitikpusatkoordinat
Cartesian(10,10),dilakukandenganmenghitungkoordinathasilrotasitiaptitiksatudemi
satu.
TitikA
xA=xp+(xAxp)cos30(yAyp)sin30
=10+(1010)*0.9(1010)*0.5=10
yA=yp+(xAxp)sin30(yAyp)cos30
=10+(1010)*0.5+(1010)*0.9=10
HasilrotasititikA(10,10)

TitikB
xB=xp+(xBxp)cos30(yByp)sin30
=10+(3010)*0.9(1010)*0.5=28
yB=yp+(xBxp)sin30(yByp)cos30
=10+(3010)*0.5+(1010)*0.9=20
HasilrotasititikA(28,20)
TitikC
xC=xp+(xCxp)cos30(yCyp)sin30
=10+(1010)*0.9(3010)*0.5=0
yC=yp+(xCxp)sin30(yCyp)cos30
=10+(1010)*0.5+(3010)*0.9=28
HasilrotasititikA(0,28)
contohprogrammerotasigarisdenganpusatrotasi40,50dansudutrotasi180'
uses graph,crt;
var
x0,y0,x1,y1:integer;
{tambahkan pada bagian ini prosedur penginisialisasian device, lihat
pada bab 1}
procedure drawLine(xstart,ystart,xend,yend:integer);
var
step,k:integer;
dx,dy:real;
x_inc,y_inc,x,y:real;
begin
dx:=xend-xstart;
dy:=yend-ystart;
x:=xstart;
y:=ystart;
if abs(dx) > abs(dy) then
step:=round(abs(dx))
else
step:=round(abs(dy));

x_inc:=dx/step;
y_inc:=dy/step;
putPixel(round(x),round(y),30);
for k:=1 to step do
begin
x:=x+x_inc;
y:=y+y_inc;
putPixel(round(x),round(y),30);
end;
end;
procedure
rotateLine(xstart,ystart,xend,yend,xcenter,ycenter:integer;angle:real;
var xstartout,ystartout,xendout,yendout:integer);
begin
xstartout:=round((xcenter+((xstart-xcenter)*cos(angle)))-((ystartycenter)*sin(angle)));
ystartout:=round((ycenter+((xstart-xcenter)*sin(angle)))-((ystartycenter)*cos(angle)));
xendout:=round((xcenter+((xend-xcenter)*cos(angle)))-((yendycenter)*sin(angle)));
yendout:=round((ycenter+((xend-xcenter)*sin(angle)))-((yendycenter)*cos(angle)));
end;
begin
init;
drawLine(10,10,50,10);
rotateLine(10,10,50,10,40,50,180,x0,y0,x1,y1);
drawLine(x0,y0,x1,y1);
readkey;
destroy;
end.

Refleksi
Refleksiadalahtransfomasimembuatmirrordarisuatuobjek.Objekhasil
refleksidibuatrelatifterhadapsumbudarirefleksidenganmemutar180'terhadapsumbu
refleksi.Sumburefleksidapatdipilihpadabidangxy.Jenisjenisrefleksiadaberbagai

macamtetapialgoritmayangdigunakansemuasamatinggalmengubahmatriks
transfomasinyasaja.
Contohrefleksiterhadapsumbuy=0.
uses graph,crt;
var
x0,y0,x1,y1:integer;
result: array [1..1,1..3] of integer;
matTrans:array [1..3,1..3] of integer;
before: array [1..3,1..3] of integer;

{tambahkan pada bagian ini prosedur penginisialisasian device, lihat

pada bab 1}
procedure drawLine(xstart,ystart,xend,yend:integer);
var
step,k:integer;
dx,dy:real;
x_inc,y_inc,x,y:real;
begin
dx:=xend-xstart;
dy:=yend-ystart;
x:=xstart;
y:=ystart;
if abs(dx) > abs(dy) then
step:=round(abs(dx))
else
step:=round(abs(dy));
x_inc:=dx/step;
y_inc:=dy/step;
putPixel(round(x),round(y),30);
for k:=1 to step do
begin
x:=x+x_inc;
y:=y+y_inc;
putPixel(round(x),round(y),30);
end;
end;
procedure initMatrix;

var
i,j:integer;
begin
for i:=1 to 3 do
for j:=1 to 3 do
begin
if i=j then
matTrans[i,j]:=1
else
matTrans[i,j]:=0;
end;

matTrans[3,3]:=-1;
end;
procedure calculateMatrix(xstart,ystart:integer; var
xstartout,ystartout:integer);
var
i,j,k,jumlah:integer;
begin
initMatrix;
before[1,1]:=xstart;
before[1,2]:=ystart;
before[1,3]:=1;

for i:=1 to 3 do
for j:=1 to 3 do
begin
jumlah:=0;
for k:=1 to 3 do
begin
result[i,j]:=jumlah+(matTrans[i,k]*before[k,j]);
end;
end;
xstartout:=result[1,1];
ystartout:=result[1,2];
end;
procedure reflectLine(xstart,ystart,xend,yend:integer; var
xstartout,ystartout,xendout,yendout:integer);

begin
calculateMatrix(xstart,ystart,xstartout,ystartout);
calculateMatrix(xend,yend,xendout,yendout);
end;
begin
init;
{menggambar garis dari titik 10,10 ke 500,10}
drawLine(10,10,500,10);
reflectLine(10,10,500,10,x0,y0,x1,y1);
drawLine(x0,y0,x1,y1);
readkey;
destroy;
end.

BAB IV
ClippingTitikdanGaris
Clippingadalahpendefinisangambardidalammaupundiluarsuatubidang
tertentu.Clippingdapatdiaplikasikanpadaworldcoordinate,sehinggahanyaisiyang
beradadalamwindowdipetakankedevicecoordinate.Caralain,worldcoordinate
lengkapdapatdipetakankedevicecoordinatelebihdahulu,kemudiandiclippadabatas
viewport.
1. Clippingtitik
Padaclipwindowyangberbentuksegiempat,titik)x,y)akanditampilkanbila
xwmin<=x<=xwmax
ywmin<=y<=ywmax
dimanabatasclipwindow(xwmin,xwmax,ywmin,ywmax)dapatberadadidalam
batasworldcoordinateatauviewportcoordinate.Bilasalahsatutidakterpenuhi
makatitiktersebuttidakakandiclip.
ContohAlgoritmaClippingtitik
uses graph,crt;
var
x,y,xmin,ymin,xmax,ymax:integer;
jawab:char;
{tambahkan pada bagian ini prosedur penginisialisasian device,
lihat pada bab 1}
procedure clipPoint(x,y,xmin,ymin,xmax,ymax:integer);
begin
if (x>=xmin) and (x<=xmax) and (y>=ymin) and (y<=ymax) then
begin
init;
putPixel(x,y,30);
readkey;
destroy;
end

else
writeln('Point is not visible');
end;
begin
jawab:='n';
while jawab = 'n' do
begin
writeln('enter the coordinates of clipping window ');
writeln('enter x(min) y(min)');
read(xmin);
readln(ymin);
writeln('enter x(max) y(max)');
read(xmax);
readln(ymax);
writeln('enter the coordinates of point x y');
read(x);
readln(y);
clipPoint(x,y,xmin,ymin,xmax,ymax);
writeln('do yo want to exit (y/n)');
readln(jawab);
end
end.

2. ClippingGaris
Gambardiatasmemprlihatkanhubunganantaraposisigarisdenganviewport.Bagian
bagiangarisyangberadadiluarviewporttidakakanditampilkan.Berikutini
algoritmaclippinggarisyangpalibgseringdigunakan:
1. Periksasegmengarisuntukmenentukansepenuhnyaberadadidalamclip
window.
2. Bilatidak,makadicobauntukmenentukanapakahsepenuhnyadiluarwindow.
3. Bilatidakdapatmengidentifikasisepenuhnyadidalam,ataupundiluarwindow,
makadilakukanperhitunganperpotongandengansatuataulebihbatasclipping.
ClippinggarisCohenSutherland

AlgoritmaCohenSutherlandmerupakanalgoritmayangpalingpopuler.
Biasanyametodeinimempercepatpemrosesansegmengarisdenganmengurangi
jumlahperpotonganyangharusdihitung.Setiapendpointdarigarisdalamsuatugambar
dinyatakandalam4digitkodebineryangdisebutregioncode,yangmengidentifikasikan
lokasidarititikrelatifterhadapbatasclippingyangberbentuksegiempat.
ContohProsedurClippinggarisCohenSutherland
uses graph,crt;
var
pixels:array[0..1,0..3] of integer;
x1,y1,x2,y2,xmin,ymin,xmax,ymax:integer;
xn1,xn2,yn1,yn2,m:real;
jawab:char;
{tambahkan pada bagian ini prosedur penginisialisasian device, lihat
pada bab 1}

procedure DrawBressLine(xa,ya,xb,yb:integer);
var
dx,p,dy,xEnd:integer;
x,y:real;
begin
dx:= abs(xb-xa);
dy:= abs(yb-ya);
p:=2*dy-dx;
if xa > xb then
begin
x:=xb;
y:=yb;
xEnd:=xa;
end
else
begin
x:=xa;
y:=ya;
xEnd:=xb;
end;

putPixel(round(x),round(y),30);
while x < xEnd do
begin
x:=x+1;
if p < 0 then
p:=p+(2*dy)
else
begin
y:=y+1;
p:=p+(2*(dy-dx));
end;
putPixel(round(x),round(y),30);
end;
end;
procedure su_co( x1,y1,x2,y2,xmin,ymin,xmax,ymax:integer);
var
i,j,fl:integer;
begin
for i:=0 to 1 do
for j:=0 to 3 do
pixels[i,j]:=0;
if y1 > ymax then
pixels[0,0]:=1;
if y1<ymin then
pixels[0,1]:=1;
if x1>xmax then
pixels[0,2]:=1;
if x1<xmin then
pixels[0,3]:=1;
if y2>ymax then
pixels[1,0]:=1;
if y2<ymin then
pixels[1,1]:=1;
if x2>xmax then
pixels[1,2]:=1;
if x2<xmin then
pixels[1,3]:=1;
for j:=0 to 3 do

begin
if (pixels[0,j]=0) and (pixels[1,j]=0) then
continue;
if (pixels[0,j]=1) and (pixels[1,j]=1) then
begin
fl:=3;
break;
end;
fl:=2;
end;
case fl of
1:
begin
DrawBressLine(x1,y1,x2,y2);
end;
3:
writeln('a" Line Is Not Visible...:-(');
2:
begin
m:=(y2-y1)/(x2-x1);
xn1:=x1;
yn1:=y1;
xn2:=x2;
yn2:=y2;
if pixels[0,0]=1 then
begin
xn1:=x1+(ymax-y1)/m;
yn1:=ymax;
end;
if pixels[0,1]=1 then
begin
xn1:=x1+(ymin-y1)/m;
yn1:=ymin;
end;
if pixels[0][2]=1 then
begin
yn1:=y1+(xmax-x1)*m;
xn1:=xmax;

end;
if pixels[0][3]=1 then
begin
yn1:=y1+(xmin-x1)*m;
xn1:=xmin;
end;
if pixels[1][0] = 1 then
begin
xn2:=x2+(ymax-y2)/m;
yn2:=ymax;
end;
if pixels[1][1]=1 then
begin
xn2:=x2+(ymin-y2)/m;
yn2:=ymin;
end;
if pixels[1][2]=1 then
begin
yn2:=y2+(xmax-x2)*m;
xn2:=xmax;
end;
if pixels[1][3]=1 then
begin
yn2:=y2+(xmin-x2)*m;
xn2:=xmin;
end;
DrawBressLine(round(xn1),round(yn1),round(xn2),round(yn2));
end;
end;
end;
begin
jawab:='n';
while jawab = 'n' do
begin
writeln('enter the coordinates of clipping window ');
writeln('enter x(min) y(min)');
read(xmin);
readln(ymin);

writeln('enter x(max) y(max)');

read(xmax);
readln(ymax);
writeln('enter the coordinates of line');
writeln('enter X1 Y1');
read(x1);
readln(y1);
writeln('enter X2 Y2');
read(x2);
readln(y2);
init;
DrawBressLine(x1,y1,x2,y2);
readkey;
destroy;
init;
su_co(0,0,80,80,xmin,ymin,xmax,ymax);
readkey;
destroy;
writeln('do yo want to exit (y/n)');
readln(jawab);
end;
end.

ClippinggarisLiangBarsky
ClippinggarisLiangBarskyberdasarkanatasanalisispersamaanparametrikdari
segmengarisyangdapatditulisdalambentuk:
x=x1+u*dx
y=y1+u*dy
dimanadx=x2x1dandy=y2y1.Padaumumnyaalgoritmainilebihefisiendibandingkan
algoritmaCohenSutherland,karenaperhitungantitikpotongdiabaikan.Setiapperubahan
hanyamemerlukansatubagiandanhanyamenghitungsekaliuntukmendapatkanu1dan
u2.SebaliknyaalgoritmaCohenSutherlandberualngualngmenghitungtitikpotong
sepanjangsuatugaris.
ContohProsedurClippinggarisLiangBarsky

uses graph,crt;
var
x1,y1,x2,y2:real;
jawab:char;
xmin,ymin,xmax,ymax:integer;
{tambahkan pada bagian ini prosedur penginisialisasian device,
lihat pada bab 1}

procedure DrawBressLine(xa,ya,xb,yb:integer);
var
dx,p,dy,xEnd:integer;
x,y:real;
begin
dx:= abs(xb-xa);
dy:= abs(yb-ya);
p:=2*dy-dx;
if xa > xb then
begin
x:=xb;
y:=yb;
xEnd:=xa;
end
else
begin
x:=xa;
y:=ya;
xEnd:=xb;
end;
putPixel(round(x),round(y),30);
while x < xEnd do
begin
x:=x+1;
if p < 0 then
p:=p+(2*dy)
else
begin
y:=y+1;
p:=p+(2*(dy-dx));

end;
putPixel(round(x),round(y),30);
end;
end;
function clipt( d,q:real; var tL, tU:real ):boolean;
begin
if

d < 0

then

begin
if

q < (tU * d ) then

clipt:=false;

if

q < (tL * d ) then

tL := q / d;
end
else if

d > 0 then

begin
if q < (tL * d ) then
clipt:= false;
if

q < (tU * d ) then

tU := q / d;

end
else if q < 0 then
begin
clipt:= false;
end;
clipt:= true;
end;
procedure liang_barsky_line(x1,y1,x2,y2:real);
var
dx,dy,tL,tU:real;
begin
dx := x2 - x1;
dy := y2 - y1;
tL := 0;
tU := 1;
if

clipt( -dx, x1 - xmin, tL, tU ) = true then

begin
if

clipt( dx, xmax - x1, tL, tU ) = true

begin

then

if

clipt( -dy, y1 - ymin, tL, tU ) = true

then

begin
if clipt( dy, 300 - ymax, tL, tU ) = true then
begin
if tU < 1 then
begin
x2 := x1 + (tU * dx);
y2 := y1 + (tU * dy);
end;
if

tL > 0 then

begin
x1 := x1+(tL * dx);
y1 := y1+(tL * dy);
end;
DrawBressLine(round(x1),round(y1),round(x2),round(y2));
end;
end;
end;
end;
end;
begin
jawab:='n';
while jawab = 'n' do
begin
writeln('enter the coordinates of clipping window ');
writeln('enter x(min) y(min)');
read(xmin);
readln(ymin);
writeln('enter x(max) y(max)');
read(xmax);
readln(ymax);
writeln('enter the coordinates of line');
writeln('enter X1 Y1');
read(x1);
readln(y1);
writeln('enter X2 Y2');
read(x2);
readln(y2);

init;
DrawBressLine(round(x1),round(y1),round(x2),round(y2));
readkey;
destroy;
init;
liang_barsky_line(x1,y1,x2,y2);
readkey;
destroy;
writeln('do yo want to exit (y/n)');
readln(jawab);
end;
end.

Referensi:

Didiet.TitikDanGaris.http://lynxluna.org/papers/math/Chap1.Titikdan
Garis.pdf.Diaksestanggal19oktober2005

Sutopo,AriesHadi.Pengantargrafikakomputer.GavaMedia,Yogyakarta.
2002