Upload
ridwan-setiawan
View
409
Download
8
Embed Size (px)
Citation preview
LAPORAN PRAKTIKUM
GRAFIK KOMPUTERDiajukan Untuk Memenuhi Salah Satu Syarat
Kelengkapan Praktikum Grafik Komputer
Oleh : Hamdan Fauzi (0706043) Ridwan Setiawan (0706073)
SEKOLAH TINGGI TEKNOLOGI GARUT( S T T G )
2009
BAB I
PENDAHULUAN
1. Gambaran Umum Tentang Grafik Komputer
Grafika komputer pada dasarnya adalah suatu bidang ilmu komputer yang mempelajari
tentang cara-cara untuk meningkatkan dan memudahkan komunikasi antara manusia dengan mesin
(komputer) dengan jalan membangkitkan, menyimpan, dan memanipulasi gambar model suatu objek
menggunakan komputer. Grafika komputer memungkinkan kita untuk berkomunikasi lewat gambar-
gambar, bagan-bagan, dan diagram-diagram.
Software untuk menggambar grafik pada computer ada dua jenis, yaitu software yang
berbentuk library atau pustaka pada suatu bahasa pemrograman (paket pemrograman grafika)
dimana pada software yang berbentuk library suatu bahasa pemrograman akan dilengkapi fungsi -
fungsi grafik yang berasal dari paket software grafik tersebut seperti pascal, C dan software yang
berbentuk aplikasi khusus gambar grafik dibuat tanpa mengetahui bagaimana hal itu dapat terjadi
seperti Corel dan Autocad.
2. Pascal Sebagai Salah Satu Bahasa Pemrograman Untuk Grafik Komputer
Turbo Pascal adalah sebuah bahasa pemrograman tingkat tinggi (High Level languange)
yang terkenal dengan pemrograman terstruktur dan bernaung dibawah sistem operasi MS-DOS.
Adapun aplikasi Turbo Pascal adalah untuk penanganan matematik, database, game, bisnis,
teknik dan lain-lain termasuk untuk menciptakan sebuah grafik.
Untuk menangani proses pembuatan grafik, Turbo Pascal dilengkapi dengan berbagai
prosedur-prosedur dan fungsi-fungsi. Disini kita menggunakan unit standard Graph yang
menyediakan suatu kumpulan rutin grafik yang canggih, sehingga dapat dimanfaatkan untuk
keperluan-keperluan pembuatan grafik. Unit ini dapat mendukung penggunaan beberapa graphic
adapter seperti CGA, EGA, Hercules, AT&T 400, MCGA, 3270 PC dan VGA.
BAB II
PEMBAHASAN PRAKTIKUM
MODUL I
Merancang Grafik Dua Dimensi dan Tiga Dimensi Dengan Pendekatan Garis
A. LANDASAN TEORI
Turbo Pascal menyediakan fasilitas khusus untuk menggambar garis, yaitu menggunakan
prosedur line, lineTo dan lineRel.
1. Prosedur line
Prosedur ini digunakan untuk menggambar garis dari titik ujung ke titik pangkal yang
koordinatnya diketahui dan ditentukan.
Bentuk umum prosedur line : line(X1,Y1,X2,Y2 : integer);
Keterangan (X1,Y1) : koordinat titik ujung garis
(X2,Y2) : koordinat titik ujung pangkal garis
Contoh : line (20,20,200,20);
2. Prosedur lineTo
Prosedur ini digunakan untuk menggambar garis dari posisi CP ke titik dengan koordinat
yang lain. Jika prosedur line posisi CP tidak mengalami perubahan, maka pada prosedure
lineTo posisi CP berpindah ke titik yang baru.
Bentuk umum : lineTo(X,Y : integer);
dengan (X,Y) adalah koordinat titik pangkal dari garis yang akan dibuat, sekaligus
merupakan posisi CP yang baru setelah garis tersebut tergambar.
Contoh : lineTo(20,200);
3. Prosedur lineRel
Prosedur ini mempunyai kegunaan yang hampir sama dengan prosedur lineTo,
Perbedaannya adalah bahwa parameter dalam prosedur lineTo merupakan koordinat dari
titik yang dituju, sedangkan nilai parameter dalam prosedur lineRel menunjukkan
perubahan ke arah sumbu X dan ke arah sumbu Y dihitung dari posisi CP.
Bentuk umum :
lineRel(DX,DY : integer);
dengan (DX,DY) menunjukkan perubahan nilai absis dan ordinat dihitung dari posisi CP.
Contoh : lineRel(100,200);
Garis yang dihasilkan oleh prosedur-prosedur diatas dapat dipengaruhi oleh tebal, corak
garis, warna. Pascal menyediakan beberapa prosedur diantaranya :
Prosedur SetLineStyle untuk tebal serta corak yang diinginkan, dengan bentuk umum :
SetLineStyle(Corak, Pola, Tebal : Word);
Prosedur SetColor untuk memberikan efek warna latar depan sesuai yang diinginkan,
bentuk umum :
SetColor(Warna:Word);
Prosedur SetBkColor untuk memberikan efek warna latar belakang sesuai yang diinginkan,
bentuk umum :
SetBkColor(Warna:Word);
B. HASIL KEGIATAN PRAKTIKUM Setelah melakukan praktikum ini, mahasiswa dapat mengetahui dan memahami bahwa
bangun atau grafik dua dimensi dan tiga dimensi tersusun atas garis-garis yang saling
berhubungan.
Mahasiswa mampu membandingkan software yang berbentuk library atau pustaka pada
suatu bahasa pemrograman dengan software yang berbentuk aplikasi khusus gambar
grafik.
C. TUGAS DAN PERTANYAANBuatlah sebuah gambar grafik dua dimensi dan tiga dimensi dengan pendekatan garis dengan pascal dan bandingkan dengan hasil dari software aplikasi!
D. PEMBAHASAN TUGAS1. Pseudecode
2 DimensiProgram Membuat_Bangun_dgn_Pendekatan_Garis;uses crt,graph;var driver,mode,x:integer; y,v,w:real; a,b,c,d,e,f,g,h:LongInt;begin clrscr; writeln('|===========================|'); writeln('| Gambar Persegi |'); writeln('|===========================|'); writeln; write('Panjang Sisi: '); readln(x); y:=(x/2); v:=320-y; a:=Round(v);
w:=240-y; b:=round(w); c:=a+x; e:=c; g:=a; d:=b; f:=b+x; h:=f; If x<=450 then begin driver:=detect; InitGraph(driver,mode,'c:\Tp\bgi'); SetColor(Blue); Line(a,b,c,d); readln; SetColor(Green); Line(c,d,e,f); readln; SetColor(Yellow); Line(e,f,g,h); readln; SetColor(Red); Line(g,h,a,b); readln;
CloseGraph; end; writeln('Terlalu Besar, Masukan Ukuran <=450!!!');end.
3 DimensiP rogram Membuat_Bangun_ 3D dgn_Pendekatan_Garis;uses crt,graph;var DriverGrafik,x,y,ModeGrafik:integer;Begin Clrscr; DriverGrafik := Detect; InitGraph(DriverGrafik,ModeGrafik,'c:\tp\bgi');
SetColor(yellow); Line(100,100,200,100); Line(100,100,100,200); Line(100,200,200,200); Line(200,200,200,100); Line(150,70,240,70); Line(200,100,240,70); Line(240,70,240,150); Line(200,200,240,150); Line(100,100,150,70); Line(150,70,150,150); Line(100,200,150,150); Line(150,150,240,150); readln; closeGraph;end.
2. Output :
Bangun 2D Bangun 3D
MODUL II
Merancang Grafik Dua Dimensi dan Tiga Dimensi Dengan Pendekatan Geometri
A. LANDASAN TEORIDidalam Turbo Pascal, bisa membuat bentuk-bentuk geometri, antara lain adalah empat
persegi panjang (dengan prosedur rectangle), segi banyak (dengan prosedur drawPoly), lingkaran (dengan prosedur circle), elips dan busur (dengan prosedur ellipse dan Arc) .
1. Prosedur rectangleProsedur ini digunakan untuk menggambar geometri empat persegi panjang. Dengan
bentuk umum sebagai berikut :
rectangle(X1,Y1,X2,Y2 : integer);
dengan (X1,Y1) : koordinat titik kiri atas dari empat persegi panjang
(X2,Y2) : koordinat titik kanan bawah dari empat persegi panjang
Agar bentuk empat persegi panjang terlihat sempurna pada layar tampilan, nilai X1,Y1,X2,Y2 harus memenuhi aturan :
0 <= X1 < X2 < getMaxX 0 <= Y1 < Y2 < getMaxY
2. Prosedur drawPolyProsedur ini digunakan untuk menggambar geometri segi banyak, seperti belah
ketupat, jajargenjang, trapesium, dll. Dengan bentuk umum :
drawPoly (CacahTitik : word ; var TitikSudut);
dengan CacahTitik : banyaknya titik dari segi banyak
TitikSudut : koordinat titik-titik sudut dari segi banyak
Dalam bentuk diatas, parameter TitikSudut adalah parameter tak bertepi yang berisi koordinat titik sudut segi banyak.
Agar segi banyak yang akan dibuat adalah segi banyak tertutup, maka koordinat titik sudut terakhir harus sama dengan koordinat titik sudut yag pertama.
3. Prosedur circleProsedur ini digunakan untuk menggambar geometri lingkaran. Dengan bentuk umum :
circle(X,Y : integer ; Jejari : word);
dengan (X,Y) : koordinat titik pusat lingkaran
Jejari : jari-jari lingkaran (bernilai bulat positif)
4. Posedur ellipse dan Prosedur arcProsedur ini digunakan untuk menggambar geometri elips atau bulat telor. Dengan
bentuk umum :
ellipse(X,Y : integer ; SdtAwal, SdtAkhir : word ; JariX, JariY : word);
dengan (X,Y) : titik pusat elips
SdtAwal : sudut awal penggambaran elips
SdtAkhir : sudut akhir penggambaran elips
JariX : jari-jari mendatar (ke arah sumbu X)
JariY : jari-jari tegak(ke arah sumbuY)
Sudut elips (SdtAwal, SdtAkhir) dinyatakan dalam satuan derajat dan di hitung mulai dari derajat 0 yang terletak di sisi kanan. Sudut positif dinyatakan searah putaran jarum jam, dan berlaku sebaliknya.
Unutk busur lingkaran, Turbo Pascal menyediakan satu prosedur tersendiri, yaitu prosedur arc.
Bentuk umum :
arc(X,Y : integer ; SdtAwal, SdtAkhir : word ; Jejari : word);
dengan (X,Y) : titik pusat busur lingkaran
SdtAwal : sudut awal penggambaran busur lingkaran
SdtAkhir : sudut akhir penggambaran busur lingkaran
Jejari : jari-jari busur lingkaran
B. HASIL KEGIATAN PRAKTIKUM
Setelah melakukan praktikum ini, mahasiswa dapat mengetahui dan memahami bahwa
bangun atau grafik dua dimensi dan tiga dimensi dalam pemrograman pascal bisa dibuat
dengan prosedure
Mahasiswa mampu membandingkan software yang berbentuk library atau pustaka pada
suatu bahasa pemrograman dengan software yang berbentuk aplikasi khusus gambar grafik.
C. TUGAS DAN PERTANYAAN
Buatlah sebuah gambar grafik dua dimensi atau tiga dimensi dengan pendekatan geometri!
D. PEMBAHASAN TUGAS
1. Pseudocode
Bangun geometri dengan prosedur
uses crt,graph;
var
dr,md,a,b:integer;
begin
clrscr;
dr:= Detect;
Initgraph(dr,md,'c:\tp\bgi');
setcolor(white);
rectangle(200,200,400,400);
rectangle(250,150,450,350);
line(450,150,400,200);
line(450,350,400,400);
line(250,350,200,400);
line(250,150,200,200);
readln;
closegraph;
end.
Membuat bangun geometri dengan
gabungan antara prosedur
uses crt,graph;
var DriverGrafik,ModeGrafik:integer;
Begin
Clrscr;
DriverGrafik := Detect;
InitGraph(DriverGrafik,ModeGrafik,'c:
\tp\bgi');
SetColor(red);
settextstyle(7,0,5);
outtextxy(15,10,'S');
SetColor(red);
settextstyle(7,0,5);
outtextxy(15,70,'M');
SetColor(yellow);
settextstyle(7,0,5);
outtextxy(15,130,'I');
SetColor(green);
settextstyle(7,0,5);
outtextxy(15,190,'L');
SetColor(green);
settextstyle(7,0,5);
outtextxy(15,250,'E');
SetColor(Green);
settextstyle(7,0,5);
outtextxy(600,120,'P');
SetColor(Green);
settextstyle(7,0,5);
outtextxy(600,190,'E');
SetColor(yellow);
settextstyle(7,0,5);
outtextxy(600,260,'A');
SetColor(red);
settextstyle(7,0,5);
outtextxy(600,330,'C');
SetColor(red);
settextstyle(7,0,5);
outtextxy(600,400,'E');
SetColor(White);
settextstyle(1,0,1);
outtextxy(50,450,'Dans Azie');
SetColor(White);
settextstyle(1,0,1);
outtextxy(300,450,'&');
SetColor(White);
settextstyle(1,0,1);
outtextxy(475,450,'Rid-oneS');
SetColor(Blue);
setlinestyle(solidln,5,thickwidth);
ellipse(320,300,180,360,80,30);
setlinestyle(solidln,5,thickwidth);
SetColor(yellow);
circle(320,240,175);
Setcolor(green); ;
setlinestyle(Solidln,1,2);
circle(375,180,20);
Setcolor(green);
circle(250,180,20);
readln;
closeGraph;
end.
2. O
3. utput Program
E. Bangun geometri dengan prosedur
F. Membuat bangun geometri dengan gabungan antara prosedur
MODUL III
Merancang Grafik Statistik
A. LANDASAN TEORISebuah informasi dapat tersaji dalam bentuk grafik sehingga dapat membantu pengguna
informasi tersebut menjadi lebih paham. Di dalam Turbo Pascal terdapat sejumlah fasilitas yang mempermudah pembuatan grafik penyajian, biasanya berupa diagram titik, diagram baris, diagram batang dan piechart.
1. Diagram TitikDiagram titik menunjukkan hubungan langsung antara dua buah nilai data (X,Y). Untuk
setiap pasang nilai X dan Y, sebuah titik digambarkan pada diagram yang dimaksud.
Diagram titik biasanya digunakan unutk menunjukkan keenderungan atau korelasi dari sekelompok data. Meskipun dalam diagram titik kita biasa menghubungkan setiap titik yang ada dengan menggunakan baris, tetapi sebaiknya hal ini hanya dilaksanakan jika garis itu mempunyai arti khusus terhadap diagram titik yang disajikan.
2. Diagram BarisDiagram baris biasanya digunakan unutk menunjukkan perubahan nilai dari sederetan data
relatif terhadap waktu, karena diagram baris biasanya digunakan unutk menunjukkan suatu kecenderungan atau korelasi dari setiap data.
3. Diagram BatangDiagram batang (bar chart) merupakan bentuk diagram yang juga sering digunkan untuk
menyajikan data. Dengan menggunakan diagram batang, setiap anggota dari sekumpulan data yang diketahui disajikan menggunakan batang (empat persegi panjang atau balok) baik secara horizontal maupun vertikal. Masing-masing batang digunakan untuk menyajikan nlai relatif terhadap nilai data yang lain.
Diagram Batang Dua DimensiDalam Turbo Pascal kita dapat membuat diagram batang dua dimensi dengan
menggunakan kombinasi prosedur rectangle (untuk menggambar empat persegi panjangnya) dan prosedur floodfill (untuk mengecat empat persegi panjang sesuai dengan pola cat yang dipilih). Tetapi ada satu prosedur khusus yang dirancang unutk membuat diagram batang dua dimensi yaitu prosedur bar.
Bentuk umum :
bar(X1, Y1, X2, Y2 : integer);
dengan (X1, Y1) : koordinat titik kiri atas
(X2, Y2) : koordinat titik kanan bawah
Diagram Batang Tiga Dimensi
Dalam Turbo Pascal untuk membuat diagram batang tiga dimensi digunakan prosedur bar3D. Prosedur ini mempunyai bentuk umum :
bar3D(X1, Y1, X2, Y2 : integer ; Tebal : word ; Atas : boolean);
dengan (X1, Y1) : koordinat titik kiri atas
(X2, Y2) : koordinat titik kanan bawah
Tebal : ketebalan balok (dalam satuan pixel)
Atas : digambar tidaknya garis bagian atas balok
4. Diagram Roti (piechart)Diagram roti digambar menggunakan lingkaran yang dipotong-potong sesuai dengan
data yang akan disajikan. Seperti diketahui, lingkaran hanya mempunyai sudur sebesar 360o.
Untuk membuat diagram roti ada dua cara, yaitu dengan menggunakan prosedur pieSlice, yang mempunyai bentuk dasar sebuah lingkaran atau prosedur sector yang mempunyai bentuk dasar elips.
Bentuk umum :
pieSlice(X, Y : integer; Awal, Akhir, Jari : word);
sector(X, Y : integer; Awal, Akhir, JariX, JariY : word);
dengan (X, Y) : titik pusat dari diagram roti
Awal : sudut awal potongan roti
Akhir : sudut akhir potongan roti
Jari : jari-jari diagram roti (prosedur pieSlice)
JariX : Jari-jari mendatar (prosedur sector)
JariY : Jari-jari tegak (prosedur sector)
B. HASIL KEGIATAN PRAKTIKUM Setelah melakukan praktikum ini, mahasiswa dapat membuat grafik untuk kepentingan data
statistic. Mahasiswa mampu memahami tatacara dalam pembuatan grafik untuk membuat data
statistik
C. TUGAS DAN PERTANYAAN
Buatlah sebuah gambar grafik untuk menyajikan sekumpulan data statistik!
D. PEMBAHASAN TUGAS
1. Pseudocode
uses crt,graph;
var
dr,mo,Chart:integer;
Jan,feb,mar,ap,mei,jun,jul,ag,sep,ok,nov,des,c:Real;
a,b:longint;
{Range dan Latar}
procedure latar;
var x,y:integer;
begin
rectangle(5,5,460,460);
setfillstyle(1,blue);
floodfill(5,5,blue);
line(80,90,80,390);
line(80,390,600,390);
y:=360; x:=120;
while y>=90 do
begin setcolor(16); Line(80,y,560,y);
setcolor(white); Line(75,y,80,y);
y:=y-30; end;
while x<=560 do
begin setcolor(16); Line(x,90,x,390);
setcolor(white); Line(x,390,x,395);
x:=x+40; end;
SetTextStyle(1,0,3);
outtextXy(100,10,'STATISTIK PENGGUNA
INTERNET TAHUN 2009'); setcolor(yellow);
SetTextStyle(0,1,0);
outtextXy(120,400,'Jan');
SetTextStyle(0,1,0);
outtextXy(160,400,'Feb');
SetTextStyle(0,1,0);
outtextXy(200,400,'Mar');
SetTextStyle(0,1,0);
outtextXy(240,400,'Apr');
SetTextStyle(0,1,0);
outtextXy(280,400,'Mei');
SetTextStyle(0,1,0);
outtextXy(320,400,'Jun');
SetTextStyle(0,1,0);
outtextXy(360,400,'Jul');
SetTextStyle(0,1,0);
outtextXy(400,400,'Agu');
SetTextStyle(0,1,0);
outtextXy(440,400,'Sep');
SetTextStyle(0,1,0);
outtextXy(480,400,'Okt');
SetTextStyle(0,1,0);
outtextXy(520,400,'Nov');
SetTextStyle(0,1,0);
outtextXy(560,400,'Des');
SetTextStyle(2,0,4);
outtextXy(50,360,'100');
outtextXy(50,330,'200');
outtextXy(50,300,'300');
outtextXy(50,270,'400');
outtextXy(50,240,'500');
outtextXy(50,210,'600');
outtextXy(50,180,'700');
outtextXy(50,150,'800');
outtextXy(50,120,'900');
outtextXy(50,90,'1000');
end;
begin
{Pilihan Tipe Grapik}
Clrscr;
writeln('|
============================================|
');
writeln('| Pilihan Grafik: |');
writeln('| |');
Writeln('| 1.Titik 2.Garis 3.Balok 4.Pie |');
writeln('| |');
writeln('|
============================================|
'); Writeln;
Write('Masukan Tipe Grapik : '); readln(Chart);
If Chart > 4 Then
Begin
Writeln('Masukan Anda Tidak Sesuai'); Readln;
Exit;
End;
clrscr;
Writeln('Masukan Jumlah Penjualan /bulan
(unit)');writeln;
Write('Januari : ');Readln(Jan);
Write('Februari : ');Readln(Feb);
Write('Maret : ');Readln(Mar);
Write('April : ');Readln(Ap);
Write('Mei : ');Readln(Mei);
Write('Juni : ');Readln(Jun);
Write('Juli : ');Readln(Jul);
Write('Agustus : ');Readln(Ag);
Write('September: ');Readln(Sep);
Write('Oktober : ');Readln(Ok);
Write('November : ');Readln(Nov);
Write('Desember : ');Readln(Des);
InitGraph(dr,mo,'E:\Tp\BGI');
Case Chart of
1: Begin
latar;
Jan:=(390-(Jan*(30/100)));
Feb:=(390-(Feb*(30/100)));
Mar:=(390-(Mar*(30/100)));
ap:=(390-(ap*(30/100)));
Mei:=(390-(Mei*(30/100)));
Jun:=(390-(Jun*(30/100)));
Jul:=(390-(Jul*(30/100)));
Ag:=(390-(ag*(30/100)));
Sep:=(390-(Sep*(30/100)));
Ok:=(390-(ok*(30/100)));
Nov:=(390-(Nov*(30/100)));
Des:=(390-(Des*(30/100)));
a:=Round(jan);
PutPixel(120,a,Yellow);
a:=Round(Feb);
PutPixel(160,a,Yellow);
a:=Round(Mar);
PutPixel(200,a,Yellow);
a:=Round(Ap);
PutPixel(240,a,Yellow);
a:=Round(Mei);
PutPixel(280,a,Yellow);
a:=Round(Jun);
PutPixel(320,a,Yellow);
a:=Round(jul);
PutPixel(360,a,Yellow);
a:=Round(ag);
PutPixel(400,a,Yellow);
a:=Round(Sep);
PutPixel(440,a,Yellow);
a:=Round(Ok);
PutPixel(480,a,Yellow);
a:=Round(Nov);
PutPixel(520,a,Yellow);
a:=Round(Des);
PutPixel(560,a,Yellow);
End;
2: Begin
Latar;
Jan:=(390-(Jan*(30/100)));
Feb:=(390-(Feb*(30/100)));
Mar:=(390-(Mar*(30/100)));
ap:=(390-(ap*(30/100)));
Mei:=(390-(Mei*(30/100)));
Jun:=(390-(Jun*(30/100)));
Jul:=(390-(Jul*(30/100)));
Ag:=(390-(ag*(30/100)));
Sep:=(390-(Sep*(30/100)));
Ok:=(390-(ok*(30/100)));
Nov:=(390-(Nov*(30/100)));
Des:=(390-(Des*(30/100)));
b:=round(jan);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(80,390,120,b);
setcolor(Red);
circle(120,b,2);
a:=round(Jan);
b:=round(Feb);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(120,a,160,b);
setcolor(Red);
circle(160,b,2);
a:=round(Feb);
b:=round(mar);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(160,a,200,b);
setcolor(Red);
circle(200,b,2);
a:=round(Mar);
b:=round(Ap);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(200,a,240,b);
setcolor(Red);
circle(240,b,2);
a:=round(Ap);
b:=round(Mei);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(240,a,280,b);
setcolor(Red);
circle(280,b,2);
a:=round(Mei);
b:=round(Jun);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(280,a,320,b);
setcolor(Red);
circle(320,b,2);
a:=round(Jun);
b:=round(Jul);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(320,a,360,b);
setcolor(Red);
circle(360,b,2);
a:=round(Jul);
b:=round(ag);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(360,a,400,b);
setcolor(Red);
circle(400,b,2);
a:=round(Ag);
b:=round(Sep);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(400,a,440,b);
setcolor(Red);
circle(440,b,2);
a:=round(Sep);
b:=round(Ok);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(440,a,480,b);
setcolor(Red);
circle(480,b,2);
a:=round(Ok);
b:=round(Nov);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(480,a,520,b);
setcolor(Red);
circle(520,b,2);
a:=round(Nov);
b:=round(Des);
setlinestyle(solidln,2,thickwidth);
setcolor(Yellow);
Line(520,a,560,b);
setcolor(Red);
circle(560,b,2);
End;
3: Begin
Latar;
Jan:=(390-(Jan*(30/100)));
Feb:=(390-(Feb*(30/100)));
Mar:=(390-(Mar*(30/100)));
ap:=(390-(ap*(30/100)));
Mei:=(390-(Mei*(30/100)));
Jun:=(390-(Jun*(30/100)));
Jul:=(390-(Jul*(30/100)));
Ag:=(390-(ag*(30/100)));
Sep:=(390-(Sep*(30/100)));
Ok:=(390-(ok*(30/100)));
Nov:=(390-(Nov*(30/100)));
Des:=(390-(Des*(30/100)));
a:=round(Jan);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(90,390,120,a);
a:=round(Feb);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(130,390,160,a);
a:=round(Mar);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(170,390,200,a);
a:=round(Ap);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(210,390,240,a);
a:=round(Mei);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(250,390,280,a);
a:=round(Jun);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(290,390,320,a);
a:=round(Jul);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(330,390,360,a);
a:=round(Ag);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(370,390,400,a);
a:=round(Sep);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(410,390,440,a);
a:=round(Ok);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(450,390,480,a);
a:=round(Nov);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(490,390,520,a);
a:=round(Des);
SetColor(Red);
setlinestyle(solidln,2,thickwidth);
Rectangle(530,390,560,a);
End;
4: Begin
c:=(jan+feb+mar+ap+mei+jun+jul+ag+sep+ok+nov+d
es);
Jan:=(jan/c)*100;
Feb:=(Feb/c)*100;
Mar:=(Mar/c)*100;
ap:=(ap/c)*100;
Mei:=(mei/c)*100;
Jun:=(jun/c)*100;
Jul:=(jul/c)*100;
Ag:=(ag/c)*100;
Sep:=(sep/c)*100;
Ok:=(ok/c)*100;
Nov:=(nov/c)*100;
Des:=(des/c)*100;
b:=round((jan/100)*360);
setcolor(1);
setfillstyle(1,1);
pieslice(320,240,0,b,100);
a:=b;
b:=round((feb/100)*360+a);
setcolor(white);
Setfillstyle(1,white);
pieslice(320,240,a,b,100);
a:=b;
b:=round((mar/100)*360+a);
setcolor(3);
Setfillstyle(1,3);
pieslice(320,240,a,b,100);
a:=b;
b:=round((ap/100)*360+a);
setcolor(yellow);
Setfillstyle(1,yellow);
pieslice(320,240,a,b,100);
a:=b;
b:=round((mei/100)*360+a);
setcolor(5);
Setfillstyle(1,5);
pieslice(320,240,a,b,100);
a:=b;
b:=round((jun/100)*360+a);
setcolor(2);
Setfillstyle(1,2);
pieslice(320,240,a,b,100);
a:=b;
b:=round((jul/100)*360+a);
setcolor(4);
Setfillstyle(1,4);
pieslice(320,240,a,b,100);
a:=b;
b:=round((ag/100)*360+a);
setcolor(7);
Setfillstyle(1,7);
pieslice(320,240,a,b,100);
a:=b;
b:=round((sep/100)*360+a);
setcolor(8);
Setfillstyle(1,8);
pieslice(320,240,a,b,100);
a:=b;
b:=round((ok/100)*360+a);
setcolor(6);
Setfillstyle(1,6);
pieslice(320,240,a,b,100);
a:=b;
b:=round((Nov/100)*360+a);
setcolor(9);
Setfillstyle(1,9);
pieslice(320,240,a,b,100);
a:=b;
b:=round((Des/100)*360+a);
setcolor(11);
Setfillstyle(1,11);
pieslice(320,240,a,b,100);
SetTextStyle(1,0,3);
outtextXy(100,10,'STATISTIK PENJUALAN HP
TAHUN 2009');
setcolor(1);
SetTextStyle(0,0,0);
outtextXy(120,400,'Jan');
SetColor(White);
SetTextStyle(0,0,0);
outtextXy(160,400,'Feb');
SetColor(3);
SetTextStyle(0,0,0);
outtextXy(200,400,'Mar');
SetColor(Yellow);
SetTextStyle(0,0,0);
outtextXy(240,400,'Apr');
SetColor(5);
SetTextStyle(0,0,0);
outtextXy(280,400,'Mei');
SetColor(2);
SetTextStyle(0,0,0);
outtextXy(320,400,'Jun');
SetColor(4);
SetTextStyle(0,0,0);
outtextXy(360,400,'Jul');
SetColor(7);
SetTextStyle(0,0,0);
outtextXy(400,400,'Agu');
SetColor(8);
SetTextStyle(0,0,0);
outtextXy(440,400,'Sep');
SetColor(6);
SetTextStyle(0,0,0);
outtextXy(480,400,'Okt');
SetColor(9);
SetTextStyle(0,0,0);
outtextXy(520,400,'Nov');
SetColor(11);
SetTextStyle(0,0,0);
outtextXy(560,400,'Des');
End;
End;
readln;
closegraph;
end.
2. Output
Jan Feb Mar Apr Mei Jun Jul Agst Sep Okt Nov Des
0
200
400
600
800
1000
1200
Jan Feb Mar Apr Mei Jun Jul Agst Sep Okt Nov Des
STATISTIK PENGGUNA INTERNET TAHUN 2009
MODUL IV
Melakukan Transformasi Grafik Dua Dimensi
A. LANDASAN TEORI
Transformasi pada dasarnya adalah mengubah posisi titik, misalnya P, dari sembarang
objek ke posisi lain, misalnya Q, menggunakan persamaan atau algoritma tertentu. Hal ini berarti
terdapat suatu fungsi T yang memetakan koordinat P menjadi koordinat Q dan bisa dituliskan
sebagai :
T(Px,Py) = (Qx,Qy)
dan juga dapat ditulis sebagai :
Q = T ( P )
dengan P = (Px,Py) dan Q = (Qx,Qy)
Untuk sembarang gambar, karena komponen terkecil dari gambar adalah titik, maka
gambar tersebut bisa ditransformasikan seluruhnya dengan cara transformasi titik-titik yang
dianggap penting, misalnya titik-titik sudutnya.
Sejumlah transformasi dasar adalah pergeseran (translation), penskalaan (scaling),
pemutaran (rotation) dan shearing.
Pergeseran (translation)
Sembarang titik pada bidang xy bisa digeser ke sembarang tempat dengan
menambahkan besaran pada absis x dan ordinat y. Sembarang objek dapat digeser ke
posisinya yang baru pada setiap titik objek tersebut. Proses pergeseran bisa berlangsung
sangat lama, karena setiap garis dari objek tersebut terdiri dari titik-titik yang jumlahnya tidak
terbatas. Tetapi, pada kenyataannya cukup menggeser dua titik ujungnya saja dan kemudian
menggandeng dua titik tersebut untuk membentuk garis hasil pergeseran.
Penskalaan (scaling)
Penskalaan adalah proses untuk memperbesar atau memperkecil suatu gambar.
Dengan faktor skala yang mempunyai nilai absolut lebih besar dari 1, akan diperoleh gambar
yang lebih besar dan semakin menjauh dari titik (0,0). Sebaliknya, dengan faktor skala yang
mempunyai nilai absolut lebih kecil dari 1, akan diperoleh gambar yang lebih kecil dan
mendekat ke titik (0,0).
Pemutaran (rotation)
Seperti halnya pada pergeseran dan penskalaan, untuk pemutaran sembarang objek,
dapat melaksanakannya dengan cara melakukan pemutaran pada setiap titik ujung garis.
Dalam hal pemutaran, kita dapat memutar objek searah dengan arah putaran jarum jam atau
berlawanan dengan arah putaran jarum jam.
Shearing
Shearing adalah suatu proses untuk mentransformasikan objek dengan cara
“membebani” objek tersebut pada arah tertentu, sehigga dihasilkan suatu objek yang
terdistorsi. Contoh sederhana, pembentukkan huruf italik (miring) dari sembarang huruf.
Dalam pembentukkan huruf italik, proses shearing dilakukan pada arah sumbu x.
B. HASIL KEGIATAN PRAKTIKUM
Setelah melakukan praktikum ini, mahasiswa dapat mengetahui dan memahami bahwa
objek-objek grafik dua dimensi dapat dimanipulasi dengan proses transformasi.
C. TUGAS DAN PERTANYAAN
Buatlah sebuah gambar grafik dua dimensi untuk menyajikan proses transformasi!
D. PEMBAHASAN TUGAS
Pseuducode
uses crt, graph;var
a,b,c,d:real;dr,md,e:integer;mat:array[0..3,0..3] of real;
Procedure Trans(a1,a2,a3,a4,a5,a6,a7,a8,a9:real; q:integer);var
amat,bmat:array[0..3] of real;w,x:real;
o,p,y,z,i,j:integer;begin
mat[1,1]:=a1;mat[1,2]:=a2;mat[1,3]:=a3;mat[2,1]:=a4;mat[2,2]:=a5;mat[2,3]:=a6;mat[3,1]:=a7;mat[3,2]:=a8;mat[3,3]:=a9;amat[1]:=10;amat[2]:=10;amat[3]:=1;x:=0;for i:=1 to 3 do
beginfor j:=1 to 3 dobegin
w:=(amat[j])*(mat[j,i]);x:=(x+w);
end;bmat[i]:=x;
x:=0; end; Initgraph(dr,md,'E:\tp\bgi'); line(10,10,60,10); line(60,10,60,60); line(60,60,10,60); line(10,60,10,10); readln; setcolor(yellow); case q of 1:begin o:=round(bmat[1]); p:=round(bmat[2]);
y:=(round(bmat[1]-10))+60; z:=(round(bmat[2]-10))+60;
line(o,p,y,p); line(y,p,y,z); line(y,z,o,z); line(o,z,o,p); readln; closegraph; end; 2:begin o:=(round(bmat[1])-10); p:=(round(bmat[2])-10); line((10-o),(10-p),(60+o),(10-p)); line((60+o),(10-p),(60+o),(60+p)); line((60+o),(60+p),(10-o),(60+p)); line((10-o),(60+p),(10-o),(10-o)); readln; closegraph; end;
3:begin o:=((round(bmat[1]))-10); p:=((round(bmat[2]))-10); line((10+p),(10+p),(60+p),(10+p)); line((60+p),(10+p),(60-o),(60-o)); line((60-o),(60-o),(10-o),(60-o)); line((10-o),(60-o),(10+p),(10+p)); readln; closegraph; end; end;
end;
begin Repeat
writeln('=====TRANSFORMASI PERSEGI=====');
writeln('|1. Translasi |');writeln('|2. Scalling |');writeln('|3. Shearing |');
writeln('|4. Keluar |');
writeln('==============================');
Write('Masukan Pilihan Transformasi: '); readln(e);
clrscr;case e of1:begin
write('Masukan Besar Translasi Untuk x: '); readln(a);
write('Masukan Besar Translasi Untuk y: '); readln(b); Trans(1,0,0,0,1,0,a,b,1,e);
end;2:begin
write('Masukan Besar Scala: '); readln(a); Trans(a,0,0,0,a,0,0,0,1,e);
end;
3:beginwrite('Masukan Besar
Pembebanan Ke Sumbu x: '); readln(a);write('Masukan Besar
Pembebanan Ke Sumbu y: '); readln(b); a:=a/10; b:=b/10;
Trans(1,a,0,b,1,0,0,0,1,e);end;
else end; until e=4;end.
MODUL V
Merancang Grafik Animasi
A. LANDASAN TEORI
Animasi pada dasarnya adalah transformasi objek. Ada beberapa teknik animasi,
diantaranya adalah inbetweening dan pemindahan citra dengan menggunakan statement
getImage dan putImage.
Teknik Animasi inbetweening
Ide dasar dari teknik ini adalah dengan menentukkan posisi awal dan posisi akhir
objek, dan kemudian menghitung posisi baru objek yang baru, sampai objek berada pada
posisi akhir yang dituju.
Dimisalkan terdapat sebuah titik pada posisi (10,10) dan akan digerakkan ke posisi
(210,160) dalam 20 langkah. Dengan demikian, dalam setiap langkah, posisi titik akan
bertambah 20 pixel ke arah sumbu x, dan 15 pixel kearah sumbu y. Pemindahan titik dari
satu posisi ke posisi yang lain secara umum dituliskan dalam prosedur berikut :
Procedure animasiTitik(AwalX,AwalY,AkhirX,AkhirY : word; Langkah : byte);
Var LangkahX, LangkahY : real;X, Y : real;
begin LangkahX := (AkhirX-AwalX + 0.0)/Langkah; LangkahY := (AkhirY-AwalY + 0.0)/Langkah; X := AwalX; Y := Ay; putpixel(AwalX,AwalY,white); repeat putpixel(trunc(X), trunc(Y), getBkcolor); X := X + langkahX; Y := Y + LangkahY; putpixel(trunc(X), trunc(Y), white); delay(600); until trunc(X) >= AkhirX;
end;
Animasi Dengan Menggerakkan Citra
Animasi dengan cara menggerakkan citra di sekeliling layar mengikuti urutan
operasi yang sudah tertentu. Urutan operasi tersebut :
Alokasikan perubah dinamis untuk menyimpan citra yang sudah dipesan sebelumnya
dengan menggunakan prosedur getMenu.
Simpan citra yang akan dianimasi pada tempat yang sudah dipesan sebelumnya
dengan menggunakan prosedur getImage.
Pindahkan posisi citra ke lokasi lain dengan menggunakan prosedur putImage.
Jika sudah selesai, tempat penyimpanan citra yang dianimasi dapat dihapus kembali
dengan menggunakan prosedur freeMenu.
Dari keempat langkah diatas, langkah terakhir digunakan unutk membebaskan
alokasi perubah dinamis sehingga bisa digunakan unutk menyimpan citra yang lain.
Penjelasan dari prosedur diatas :
Menentukkan ukuran citra
Ukuran perubah dinamis yang akan dialokasikan, ditentukan dengan
menggunakan fungsi imageSize. Fungsi ini mempunyai bentuk umum :
imageSize(X1,Y1,X2,Y2 : integer);
dengan (X1,Y1) : koordinat titik kiri atas citra
(X2,Y2) : kordinat titik kanan bawah citra
Alokasi perubah dinamis
Perubah dinamis dapat dialokasikan menggunakan prosedur berikut :
getMenu(var Pdinamis : pointer; Ukuran : word);
dengan Pdinamis : nama perubah dinamis yang akan dialokasikan
Ukuran : besarnya perubah dinamis (dlm byte) yang akan dialokasikan
Menyimpan citra
Prosedur yang digunakan untuk mengcopy citra dari layar ke perubah dinamis
adalah prosedur getImage. Bentuk umum :
getImage(X1,Y1,X2,Y2 : integer; var Pdinamis);
dengan (X1,Y1) : koordinat titik kiri atas dari citra yang akan dicopy
(X2,Y2) : kordinat titik kanan bawah dari citra yang akan dicopy
Pdinamis : perubah dinamis yang dialokasikan sebelumnya
Memindah citra
Pemindahan citra dapat dianggap sebagai mengcopy kembali isi perubah
dinamis ke layar pada posisi sembarang. Pemindah citra atau penampilan ulang dari
citra yang tertutup, dikerjakan dengan menggunakan prosedure putImage. Bentuk
umumnya :
putImage(X1,Y1 : integer; var Pdinamis; Metode : word);
dengan (X1,Y1) : posisi awal penggambaran ulang
Pdinamis : perubah dinamis unutk menyimpan gambar semula
Metode: cara penampilan gambar
Konstanta cara penampilan kembali citra :
Nilai Konstanta Nama Konstanta Keterangan
0 copyPut Menampilkan citra seperti apa adanya
1 xorPut
Setiap bit dari citra yang ada di layar dan citra
akan ditampilkan ulang dioperasikan berdasar
operasi logika XOR
2 orPut
Setiap bit dari citra yang ada di layar dan citra
akan ditampilkan ulang dioperasikan berdasar
operasi logika OR
3 andPut
Setiap bit dari citra yang ada di layar dan citra
akan ditampilkan ulang dioperasikan berdasar
operasi logika AND
4 notPutCitra akan ditampilkan ulang secrar inverse
video.
Dealokasi perubah dinamis
Penghapusan citra setelah tidak digunakan lagi, dilaksanakan dengan
mendealoksi perubah dinamis yang telah dialokasikan sebelumnya. Prosedur yang
digunakan adlah freeMenu yang mempunyai bentuk umum :
freeMenu(var Pdinamis : pointer; Ukuran : word);
dengan Pdinamis : nama perubah dinamis yang akan dihapus
Ukuran : besarnya perubah dinamis (dlm byte) yang akan dihapus
B. HASIL KEGIATAN PRAKTIKUM
Setelah melakukan praktikum ini, mahasiswa dapat
Mengetahui dan memahami bahwa bagaimana cara merancang grafik animasi dengan
menggunakan teknik inbetweening dan teknik menggerakkan citra
Membuat animasi dengan memanfaatkan prosedur-prosedur yang terdapat di Turbo
Pascal.
C. TUGAS DAN PERTANYAAN
Buatlah sebuah gambar grafik animasi, dan bedakan dengan software aplikasi yang
langsung tanpa menuliskan program
D. PEMBAHASAN TUGAS
Pseudocode
Uses Graph,crt;Var gd,gm,x,y,z : integer;Begin ClrScr; InitGraph(gd,gm,'E:\tp\bgi'); X := 25; Y := GetMaxY; z:=1; Repeat setcolor(z); circle(x ,y div 2,50); Delay(250); ClearDevice; x:=x+25; z:=z+1; Until KeyPressed; CloseGraph;End.
Output
BAB III
KESIMPULAN
Dari pembahasan dan hasil prktikum, maka dapat di ambil beberapa kesimpulan
diantaranya :
Prosedur line akan menghasilkan garis dari titik (X1,Y1) sampai titik (X2,Y2).
Prosedur lineTo akan menghasilkan garis dari posisi CP ke titik lain yang koordinatnya
ditentukan.
Prosedur lineRel akan menghasilkan garis dari posisi CP ke arah sumbu X dan ke arah sumbu Y.
Grafik dua dua dimensi dan tiga dimensi bisa tersusun atas garis-garis yang saling
berhubungan.
Untuk menggambar/merancang grafik dua dimensi dan tiga dimensi dapat menggunakan
pendekatan garis, serta dapat menggunakan prosedur-prosedur menggambar garis yang
tersedia di Turbo Pascal tersebut untuk diaplikasikan dalam pembuatan grafik dua dimensi
atau tiga dimensi.
Grafik dua dimensi dan tiga dimensi tersusun atas garis dan bangun geometri yang saling
berhubungan.
Untuk menggambar/merancang grafik dua dimensi dan tiga dimensi dapat menggunakan
pendekatan geometri, serta dapat menggunakan prosedur-prosedur geometri yang tersedia di
Turbo Pascal tersebut untuk diaplikasikan dalam pembuatan grafik dua dimensi atau tiga
dimensi
Grafik dua dimensi dan tiga dimensi dapat juga digunakan untuk merepresentasikan data
dalam bentuk gambar berupa statistik.
Objek grafik dua dimensi seringkali mempunyai sifat simetri sehingga untuk menggambar
keseluruhan objek, cukup dengan menggambar separuhnya saja dan selanjutnya dapat
dilakukan manipulasi dengan cara transformasi
Pergeseran (translation) adalah menggeser sembarang titik pada bidang xy ke sembarang
tempat dengan menambahkan besaran pada absis x dan ordinat y
Animasi merupakan transformasi objek.
Ide dasar dari teknik inbetweening adalah dengan menentukkan posisi awal dan posisi akhir
objek, dan kemudian menghitung posisi baru objek yang baru, sampai objek berada pada
posisi akhir yang dituju.
Teknik menggerakkan citra adalah dengan menentukkan posisi awal dan posisi akhir citra, dan
kemudian menghitung posisi baru citra yang baru, sampai citra berada pada posisi akhir yang
dituju.