Transcript

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.


Top Related