[tOuRankU]-Grafika_Komputer

MODUL PRAKTIKUM

Ver 1.0

Oleh : M. Gunta ra

ST M I K A K A K OM 2005

Modul Praktikum Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara Guntara 0

BAB 1. Penghasil Garis (Line generator ) Algoritma DDA 1.1.

menggunakan

Maksud dan Tujuan

1.1.1 Maksud Penghasil garis (line ( line generator ) a da la h prosed prosed ur yang digunakan untuk untuk me ng ha silkan/ ilkan/ me m p rod uksi uksi be ntuk g a ris ya ng te rsusun usun d a ri titik titik-ti -titik tik elem en ga mb ar (pixel (pixel)) d enga n a lgo ritma DDA (digital differencial analyzer)

1.1.2 Tujuan 1. Agar mahasiswa dapat mengetahui bagaimana algoritma untuk mem bua t satu satu g a ris 2. Ag a r ma ha siswa d a p a t me mb ua t ga ris d a ri p ixel 3. Aga r ma hasi hasiswa d ap at me mb and ingkan ga ris yang d ibut de nga n eserved w ord C ord C ++ a lgo ritm a DD DDA A d eng a n ga ris yang d iha silka n d a ri reserved Builder

1.2.

Teori Singkat

Pada prinsipnya sebuah garis hanyalah kumpulan dari titik-titik yang d iga mb a r sec a ra k kontinu ontinu d a n lini inier. Sa la h sa tu a lgo ritm a y ya a ng d a p a t digunkan untuk membuat garis adalah algoritma DDA (digital ( digital differential analyzer) dengan p dengan p seud o a lgo ritm seb a ga i beriku berikut. t. Persa ersa ma a n g a ris luurs uurs d eng a n koo rd inat c a rte sius a d a la h y=m .x + b

........ ............ ........ ...... 1-1

d eng a n m a d a la h kemiri kemiringa n ga ris, b tiik tiik p a d a sumb u y. Jika d ika ika ta hui 2 tiik tiik akhir akhir d a ri seg seg me n g a rios ya ng d ipo sisik isika a n p a d a titik titik x1, x1,y1 y1 dan x x2 2,y2 ma ka untuk me nentukan kem iringa n ga ris a d a la h : m = y2- y 1

................. ................. 1-2

x2-x1 m= y1- m .x1

........ ............ ........ ...... 1-3

Denga n d emiki emikian algoritma algoritma DD DDA A a da lah seb ag ai b eri erikut. 1. 2. 3. 4.

Tentukan 2 titik untuk membentuk garis beri 2 titik tersebut dengan titik awal (x0,y0) (x0,y0) dan titik akhir (x1,y1) Hitung dx=x1-x0 dan dy=y1-y0 tentukan jarak jarak maks jumlah penambahan penambahan nilai x dan nilai y dengan cara  jika ⏐dx⏐ >⏐dy⏐ maka step=⏐dx⏐,  jika tidak maka step=⏐dy⏐ 5. Hitunjg penambahan koordinat piksel dengan cara x_tambah=dx/step dan y_tambah=dy/step

Modul Praktikum Praktikum Grafika Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 1

6. tentukan koordinat berikutnya (x k+1,Yk+1) dengan koordinat (x+x_tambah,y+y_tambah) 7. Posisi pixel pada layar ditenbtukan dengan pembulatan nila tersebut 8. Ulangi langkah 4 sampai posisi pixel mencapai x=x1 dan y=y1

1.3.

Praktik

Lakukan langkah sebagai berikut L Perhatian ! 1. 2.

Modul ini diasumsikan bahwa praktikan sudah memahami dasar-dasar C++ Builder) Pada penulisan kode prrogram C++ ,huruf besar dan huruf kecil berbeda, misal Canvas

canvas

1. Akttifka n C++ Build er (CB) da n buka fo rm b a ru 2. Buat form de nga n tom b ol seb a ga i b erikut.

Properties Name: button1 Caption:Garis dari DDA

Garis dari DDA

Properties Name: button2 Caption:Garis dari C++

Garis dari C++

3. Ketik kod e p rog ra m pa d a Button1-ClickEvent seb a ga i be rikut void __f ast call TForm1:: Butt on1Cli ck(TObj ect *Sender) { int x0,y0,x 1,y1,dx, dy,st ep,absdx,absdy,k; fl oat x,y, x_tambah,y_t ambah; x0=10;y0=10; koordinat titik awal garis x1=100;y1=200; Åkoordinat t it ik akhir gari s dx=x1-x0; dy=y1-y0; x=float(x0);y=float(y0); if (dx>dy) step=dx;

else step=dy; x_tambah=(float) dx/step; y_tambah=(float) dy/step ; for (k=0;k
Åbari s ini untuk memperl ambat penggambaran ti t ik Canvas->Pixels[int(x)][int(y)]=clRed; Åmenggambar t it ik

proses

}

Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 2

}

4. Buat kod e progra m pad a button2-clickevent seb a ga i b erikut. void __f ast call TForm1:: Butt on2Cli ck(TObj ect *Sender) { Canvas->MoveTo(200,10); Åtitik awal garis Canvas->LineTo(300,200); Åtitik akhir garis }

5. Jala nka n a p likasi ini. 6. Klik tom b ol kiri, a mjati ap a yang terja d i d a n kem ud ia n klik tom b ol ka na n da nama ti ap a yang terjad i.

1.4.

Latihan

L Perhatian ! Latihan pada modul praktikum ini dikerjakan saat praktikum

1. Ga ntila h titik a wa l d a n titik a khir d eng a n koord inat ya ng la in (sem ba rang ). Amatilah yang terjad i 2. Pa d a form diata s b ua tla h ga ris d eng a n p erinta h CB d eng a n koordinat aw al d an akhir sam a de nga n no 1 d iata s

1.5.

Tugas

L Perhatian ! Tugas pada modul praktikum ini dikerjakan dirumah dan dicantumkan pada laporan resmi setiap modul

1. Ama tila h a da kah pe rbe da an kualitas ga ris yang dibua t d eng an a lgoritm a DDA da n ga ris ya ng d iprod uksi oleh C B ! 2. Me nga p a ha l terseb ut bisa terja d i ? 3. Menga pa p erintah mengg unakan reserved w ord milik C++ Builder (CB) leb ih ringka s ?


BAB 2. Menggambar obyek dari bentuk geometri 2.1.

Maksud dan Tujuan

2.1.1 Maksud Bentuk ge om etri a d a la h b entuk g a mb a r b erupa lingkaran , a ta u kurva

ga ris, p oligo n, elip s,

2.1.2 Tujuan Agar mahasiswa dapat membuat program untuk menggambar bentukbe ntuk ge om etri

2.2.

Teori Singkat

Bentuk ge om etri d an kode programnya a da la h.  Garis MoveTo(x0,y0) LineTo(x1,y1) LineTo(xn,yn)

Deng a n x0,y0: koo rd inat t itik aw a l g a ris X1,y1:koordinat akhir garis ke-1 Xn,yn:koo rdina t a khir g a ris ke-2 (n:2,3,4, d st.) 

Kotak Rectangle(x0,y0,x1,y1)

Denga n x0,y0: koord inat sudut a wa l kota k X1,y1:koo rd inat sud ut a khir kot a k (sud ut d iag ona l) 

Ling ka ran / Ellips Ellipse(x0,y0,x1,y1)

Deng a n x0,y0: koordina t sud ut a w a l ellipse X1,y1:koordinat sudut akhir ellipse Bila ja ra k a nta ra x1-x0 sa ma d eng a n y1-y0 ma ka tersebut berbentuk lingkaran. 

ga mb a r

Kurva Arc(X0,Y0,X1,Y1,…., xn, yn)

Deng a n x0,y0:tiik kurva a wa l X1,y1:titik kurva ke-1 Xn,yn:titik kurva ke-n (n:2,3,4,d st.) 

Polygon POINT var(j umlah max sudut polygon-1 ) Var[0]= P oint(x0,y0); Var[1]= P oint(x1,y1); ….. Var[n]= P oint(xn,yn); Polygon((TPoint *)var,j umlah max sudut -1);

Deng a n x0,y0:tiik a w a l p olig on


X1,y1:titik sud ut p o lygo n ke -1 Xn,yn:titik sudut polygon ke-n (n:2,3,4,dst.)

2.3.

Praktik

1. Bua tlah form sep erti d iba w a h ini Memb uat b entuk geo metri

Garis Kotak Lingkaran Kurve Polygon

No: Kom po nen 1 :TLa b el 2:Ra d ioGroups

Properties Ca p tion : Memb uat bentuk geo metri Ca p tion :Bentuk Name : Bentuk Item s : Garis Kotak Lingkaran Ellips Kurve Polygon

3:PaintBox

Name:PaintBox1(default)

2. Ketik kod e p a d a Bentuk-ClickEvent seb a ga i be rikut. void __f ast call TForm1: :Bent ukCli ck(TObj ect *Sender) { int INDEKS=Bent uk- >ItemIndex ; Æ mengambil nomor r adio but t on Edit1->Text =IntToSt r( INDEKS); Æ mengambil nomor radio but t on Paint Box1->Canvas->Rectangle(0,0,ClientWidth-2,ClientHeight-2); swit ch (INDEKS) { case 0: pil ihan radio paling at as (nil ai 0-nol) Paint Box1->Canvas->MoveTo(10,10); Å gambar gari s Paint Box1->Canvas->LineTo(100,200); break; case 1: Å pilihan radio baris ke-2(nilai 1) PaintBox1->Canvas->Rectangle(10,10,100,200); Å gambar kot ak break; case 2: PaintBox1->Canvas->Ellipse(10,10,200,200); Å gambar lingkaran break;


case 3: Paint Box1->Canvas->Arc(10, 10,50, 200,300, 200,30, 20); Å gambar busur break; case 4: POINT t it ik[ 5]; Å deklarasi array untuk titik-titik 5 sudut titik[0]=Point(10,10); titik[1]=Point(70,10); titik[2]=Point(180,100); titik[3]=Point(250,200); titik[4]=Point(0,200); PaintBox1->Canvas->Polygon((TPoint*)titik,4); Å gambar polygon 5 titik sudut break; } }

3. Jala nka n a p likasi ini 4. Klik p a d a m a sing-ma sing tom b ol ra d io Button, a ma ti yang t erja d i.

2.4.

Latihan

1. Ta mb a h 1 fa silitas la g i untuk me ng g a mb a r ellipse, sehingga pada p iliha n Bentuk d ita mb a h p iliha n untuk “Ellipse” . 2. Buat kod e untuk me mg ga mb a r elip s terseb ut 3. Jala nka n a p likasi te rseb ut.

2.5.

Tugas

1. Ap a pe rbe da an meng ga mb ar ellipse d enga n lingkara n


BAB 3. Menggambar suatu obyek dari geometri 3.1.

Maksud dan Tujuan

3.1.1 Maksud Yang dimaksud dengan menggambar suatu obyek adalah memproduksi/membuat gambar dengan obyek tertentu (real atau a b stra k) yang d ib entuk da ri geo me tri ba ik berupa g a ris, lingka ra n a ta upiun kurva

3.1.2 Tujuan 1. Aga r ma hasiswa d ap a t meng ata hui c ara memb entuk suatu gam ba r 2. Aga r ma hasiswa d ap at memb uat suatu ga mb ar de ngan bentuk geometri

3.2.

Teori Singkat

3.2.1 Membetuk suatu obyek dari geometri Sua tu ga mb a r ob yek b a ik riil ma upun a b stra k d p a a t disusun ata s d a sa r be ntuk ge om etri, sep erti c ontoh ga mb ar d iba wa h ini.

Ga mb ar d iata s me rupa kan pe rpa dua n d ari kota k, ga ris d an lingkaran.

3.2.2 Membuat arsiran Bentuk-betnuk yang dapat diarsir adalah kotak, lingkaran/ellipse, dan poligon. Perintah arsiran ini ditempatkan sebelum suatu geometri d iga mb a r. Perinta h untuk me nga rsir a d a la h Brush= j enis ar sir an Color=RGB(merah,kuning,biru)

Dengan jenis a rsiran = bsSolid : arsira n m era ta bsVertical : a rsira n g a ris v ertika l bsHorizontal : a rsira n g a ris v ertika l bsDiagonal : a rsira n ga ris d iag ona l bsCross : kotak=kotak m erah : 0 – 255 kuning:0-255


biru:0-255

3.3.

Praktik

1. Bua tla h form ba ru d eng a n b entuk seb a ga i b erikut. Membuat Gam ba r Obyek

Rumah

No: Kom po nen 1 :Tlab el 2:Ra d ioGroups

Properties Ca p tion : Membuat gam bar ob yek Ca p tion :G a m b a r Name : Gamb ar Item s :

Rumah 3:PaintBox

Name:PaintBox1(default)

2. ketik kode p a d a Gam ba r-ClickEvent seb a ga i be rikut. void __fastcall TForm1: :GambarCli ck(TObj ect *Sender) { int INDEKS=Gambar->It emIndex ; PaintBox1->Canvas->Rectangle(0,0,ClientWidth-2,ClientHeight-2); swit ch (INDEKS) { case 0: Paint Box1->Canvas->Rectangle( 50,150,200,300); Å gambar bangunan kot ak Paint Box1->Canvas->Rectangle( 70,170,120,290); Å gambar kot ak pint u Paint Box1->Canvas->MoveTo(90,170); Paint Box1->Canvas->LineTo(90,290); Å garis t engah pint u Paint Box1->Canvas->MoveTo(50,150); Å gambar segit iga at ap Paint Box1->Canvas->LineTo(200,150); Paint Box1->Canvas->LineTo(125,10); Paint Box1->Canvas->LineTo(50,150); Paint Box1->Canvas->Ellipse(100,80,150,125); Å gambar l ingkaran at ap break; } }

3. Ja la nkan ap lika si te rseb ut da n klik p a d a rad io button. 4. Warnalilah bagian tembok dengan warna hijau dan bagian atap kuning, sedangkan didalam lingkaran warna hitam, sehingga kode d iata s me nja d i seb a g a i b erikut.


void __fastcall TForm1: :GambarCli ck(TObj ect *Sender) { int INDEKS=Gambar->It emIndex ; PaintBox1->Canvas->Rectangle(0,0,ClientWidth-2,ClientHeight-2); swit ch (INDEKS) { case 0: PaintBox1->Canvas->Brush->Style=bsSolid; arsiran solid (merata) PaintBox1->Canvas->Brush->Color=RGB(0,255,0); warna arsiran tembok hijau Paint Box1->Canvas->Rectangle( 50,150,200,300); Å gambar bangunan kot ak PaintBox1->Canvas->Brush->Color=RGB(255,100,100); warn arsiran pi nt umer ah muda Paint Box1->Canvas->Rectangle( 70,170,120,290); Å gambar kot ak pint u Paint Box1->Canvas->MoveTo(90,170); Paint Box1->Canvas->LineTo(90,290); Å garis t engah pint u Paint Box1->Canvas->MoveTo(50,150); Å gambar segit iga at ap Paint Box1->Canvas->LineTo(200,150); Paint Box1->Canvas->LineTo(125,10); Paint Box1->Canvas->LineTo(50,150); PaintBox1->Canvas->Brush->Color=RGB(0,0,0); warna arsiran lingkaran hitam Paint Box1->Canvas->Ellipse(100,80,150,125); Å gambar l ingkaran at ap break; } }

5. Ja lla nka n ap likasi ini d a n liha t pe rb ed a a nnya.

Catatan Bagian atap segitiga tidak dapat diarsir karena disusun dari garis. Agar dpat diarsir maka segitiga menggunakan polygon.

3.4.

Latihan

1. Gantilah segitiga bagian atap dengan menggunakan polygon dan b erikan a rsira n p a d a p olygon t erseb ut 2. gantilah arsiran pada segitiga tidak menggunakan c sSolid tetapi c s Vertical

3.5.

Tugas

Bua tlah g a mb a r ob yek riil la in ya ng te rd iri a ta s : lingkaran / ellipse, kot a k d a n g a ris d eng a n ae rira n da n wa rna a rsira n be b a s sesua i keinginan sa ud a ra .


BAB 4. Transformasi Translasi dan Pembesaran 4.1.

Maksud dan Tujuan

4.1.1 Maksud Tra na formasi ad a la h p roses p eruba ha n b a ik be ntuik ma upun leta k. Sed a ngkan t ra nsla si a d a la h pe rp ind a han suat u ob yek ke te mp a t la in dengan bentuk sama, sedangkan pembesaran adalah berubah ukuran sua tu ob yek d eng a n be ntuk yang ma sih sa ma .

4.1.2 Tujuan 1. Agar mahasiswa dapat memahami cara memindah suatu obyek ke temp at lain 2. Aga r ma hasiswa d a pa t mem p erbe sar/m em pe rkec ial suatu ob yek

4.2.

Teori Singkat

4.2.1 Transformasi Translasi (penggeseran) Persamaan transformasi X’ = x+Tx

............ 4-1

Y’=y+Ty

............ 4-2

Denga n x,y : koord ina t titik a wa l X’ ,y’:koo rdina t t titik ha sil tran sfo rm a si Tx: faktor peng ge seran m end a ta r Ty: fakto r pe ng g eseran ve rtika l

4.2.2 Transformasi Pembesaran (scalling ) Persamaan transformasi X’=x.Sx

............ 4-3

Y’=y.Sy

............ 4-4

Denga n x,y : koord ina t titik a wa l X’ ,y’:koo rdina t t titik ha sil tran sfo rm a si Sx: faktor p eng ge seran m end a ta r Sy: fakto r pe ng g eseran vertika l

4.3.

Praktik

L Perhatian ! Persamaan/rumus transformasi pada modul ini menggunakan koordinat cartesian, sehingga bila diterapkanlangsung ke program maka gambar akan terbalik karena pada program, sumbu y positif adalkah ke bawah.

1. Bua tlah form seb a g a i b erikut seb a g a i b erikut


Tran sfo rma si Tran slasi d a n Pem b esa ran 2

1

Translasi

4 Pembesaran

kali 5 3


Properties Ca p tion : Tran nsfo rma si Tran slaso i da n Pem b esara n Ca p tion :Transformasi Name : Transformasi Item s :

Tra nsla si Pembesaran 3:PaintBox 4:Edit 5:Ed it

Name:PaintBox1(default) Name:Ed it1 (d efa ult) Na me :Ed it2 (default )

2. Ta mb a hka n dekla ra si va riab el ini p a d a file hea d er class TForm1 : public TForm { __published: / / IDE-managed Component s TLabel *Label1; ……………. Publi c: / / User declarati ons __f ast call Tform1(Tcomponent * Owner ); int x1,y1,x2,y2; };

3. ketikka n kod e b erikut p a d a Edit1-OnExit void __f ast call TForm1: :Edit 1Exi t (TObj ect *Sender) { int Tx; Tx=St rToInt(Edit 1->Text ); x1=x1+Tx; x2=x2+Tx; PaintBox1->Canvas->Rectangle(x1,y1,x2,y2); }

4. Ta mb a hka n kode be rikut p a d a Edit2-OnExit;


void __f ast call TForm1: :Edit 2Exi t (TObj ect *Sender) { int S; S=StrToInt(Edit2->Text); x1=x1*S;y1=y1*S; x2=x2*S;y2=y2*S; PaintBox1->Canvas->Rectangle(x1,y1,x2,y2); }

4. Jala nka n a p likasi te rseb ut d a n klik Pilihan Translasi, kem udia n m a sukkan suatu nilai pada isian Edit1, agar bereaksi maka cursor dikeluarkan (OnExit) dari isian tersebut dan amati hasilnya 5. Co b a p ula p iliha n yang lain d a n a ma ti ha silnya.

4.4.

Latihan

1. Mo d ifikasila h a p likasi ini, p a d a p ilihan pembesaran, p em b esa ra n horisonta l da n p em b esa ra n vertika l.

4.5.

terdapat

Tugas

1. Me nga p a ha sil tra nsforma si p em b esa ra n d ia ta s b erpida h d a ri ga mb a r a sa l ? 2. Me nga p a p a d a kota k d ia ta s c ukup 2 titik yang d itra nsformasika n, b ukan 4 titik ?


BAB 5. Transformasi Rotasi dan Shearing 5.1.

Maksud dan Tujuan

5.1.1 Maksud Tra nssfo rm a si rota si a d a lah p ro ses p erp ind a ha n sua tu titik sec a ra m elingka r de nga n sudut yang da pa t ditentukan, sed a ngkan shea ring ad alah pe ruba han b entuk suatu ob yek akiba t pe mb eb ana n pa da suatu titik.

5.1.2 Tujuan 1. Agar mahasiswa mampu membuat program untuk memutar suatu ga mb ar grafis 2. Aga r ma hasiswa ma mp u mem bua t program untuk me mb erika n efek pe mb eba nan pa da suatu gram ba r grafis

5.2.

Teori Singkat

5.2.1 Rotasi Rotasi adalah proses perpindahan suatu titikk ke tempat lain secara me lingka r d eng a n titik p oros tertentu (defa ult 0,0) d eng a n sud ut ya ng d a p a t d ia tur. Leta k titik sete la h d iputa r d eng a n sud ut θ d eng a n titik pusa t d i (0,0) a d a la h X’=x.cos

- y .sin

........... 5-1

Y’=x.sin +y.cos ........... 5-2

Dengan : sud ut p uta r b erla wa na n a ra h ja rum ja m. Rotasi ini di dunia grafika banyak sekali digunakan untuk berbagai simulasi misa lnya rod a b erpu ta r, simulasija m a na log d a n la in-la in.

5.2.2 Shearing Shea ring (pe mb eb ana n) ad alah proses pe rob aha n suatu be ntuk a kiba t ad anya p emb eb a nan pa da titik tertentu. Bila suatu titik d ibe ba ni d enga n faktor beban H maka titik tersebut akan berpindah tempat mengikuti p ersma a n seb a ga i berikut. X’=x+Hx.y ........... 5-3 Y’=y+Hy.x ........... 5-4

Dengan Hx : Fa ktor pe mb eb ana n mend a tar Hy : faktor p em b eb a nan ve rtika l Pembebanan ini banyak digunakan untuki mensimulasikan suatu obyek akibat adanya tekanan samping misalnya simulasi pohon akibat terkena angin atau untuk pem bua tan ba yangan suatu bend a a kiba t pencahayaan.


5.3.

Praktik

1. Bua t form seb a g a i b erikut. 2

4 rma si Rot a si d a n Pem b eb a na n Tra nsfo 1 Rotasi

3

d e ra a t

Pembebanan

satuan

5


Properties Ca p tion : Tran nsfo rma si Tran slaso i da n Pem b esara n Ca p tion :Transformasi Name : Transformasi Item s :

Ro ta si Pembebanan 3:PaintBox 4:Edit 5:Ed it

Name:PaintBox1(default) Name:Ed it1 (d efa ult) Na me :Ed it2 (default )

2. Ket ikkan kod e b eriktu p a d a Edit1-OnExit void __f ast call TForm1: :Edit 1Exi t (TObj ect *Sender) { float sudut_der=StrToFloat(Edit1->Text); float sudut_rad=(sudut_der/180)*22/7; x1hasil=x1*cos(sudut_rad)-y1*sin(sudut_rad); y1hasil=x1*sin(sudut_rad)+y1*cos(sudut_rad); x2hasil=x2*cos(sudut_rad)-y2*sin(sudut_rad); y2hasil=x2*sin(sudut_rad)+y2*cos(sudut_rad); x1=int(x1hasil);y1=int(y1hasil); x2=int(x2hasil);y2=int(y2hasil); PaintBox1->Canvas->MoveTo(x1,y1); PaintBox1->Canvas->LineTo(x2,y2); }

3. Ket ikkan kod e verikut p a d a Edit2-OnExit void __f ast call TForm1: :Edit 2Exi t (TObj ect *Sender) { int beban=St rToInt(Edit 2->Text ); x1hasil=x1+beban*y1; y1hasil=y1;


x2hasil=x2+beban*y2; y2hasil=y2; x3hasil=x3+beban*y3; y3hasil=y3; PaintBox1->Canvas->Pen->Color=clRed; Paint Box1->Canvas->Pen->Widt h=5; PaintBox1->Canvas->MoveTo(x1hasil,y1hasil); PaintBox1->Canvas->LineTo(x2hasil,y2hasil); PaintBox1->Canvas->LineTo(x3hasil,y3hasil); PaintBox1->Canvas->LineTo(x1hasil,y1hasil); }

4. Ta mb a hka n de kla ra si va ria b el p a d a file hea d er seb a ga i b erikut. class TForm1 : public TForm { __published: / / IDE-managed Component s TLabel *Label1; ………………………….. void __f ast call Edit 1Exit (TObj ect *Sender); void __f ast call Edit 2Exit (TObj ect *Sender); private: // User declarations public: // User declarations __f ast call TForm1(TComponent * Owner ); int x1,y1,x2,y2,x3,y3; float x1hasil,y1hasil,x2hasil,y2hasil,x3hasil,y3hasil; };

5. Jalankan aplikasi dan cobalah masing-maisng pilhan di klik . Amati perbedaan masing-masing

5.4.

Latihan

Ga ntila h b ent uk g a ris p a d a t ra nsforma si rot a si me njad i seg itig a .

5.5.

Tugas

1. Me nga p a p a d a rota si b ila d ib eri sud ut p ositif a ra h p erputa a ra nnya searahjarum jam ? (berbeda dengan ketentuan teori, bila sudut positif arah puta ran b erlaw ana n jarum jam ) 2. Bagaimana caranya (tidak perlu dibuat programnya) agar titik pusat p erputa ra n a d a d i titik a wa l ga ris terseb ut ? 3. Menga pa p ad a pem beb anan yang bergeser justru ba gian ba wa h, d an b a ga ima na a ga r b ila ya ng b erge ser ujung runcing ba gian a tas ?


BAB 6. Mengendalikan grafis dengan direct manipulation 6.1.

Maksud dan Tujuan

6.1.1 Maksud Maksud direct manipulation adalah obyek gambar b eruba h sesua i deng a n ma ksud/ fungsi alat input.

dapat

lansung

6.1.2 Tujuan 1. Ag a r ma ha siswa m a mp u me ma ha mi c a ra b eriintra ksi d eng a n grafis d enga n a lat-alat input 2. Aga r maha siswa ma mp u me mb uat p rog ra m g rafis yang da p at d ikend alikan lang sung ba ik de nga n tomb ol ma upun keybo a rd.

6.2.

Teori Singkat

Proses pengendalian yang telah dilakukan pada prakitkum sebelumnya sering disebut dengan command manipulation/undirect manipulation , karena untuk mengubah maupun menggerakkan harus memasukkan nilai tertentu pada komponen edit. Cara ini menjadi sangat tidak praktis bila ob yek yang digerakkan meme rlukan gerakan/ pe ruba han dinam is d an cepat. Sa la h sa tu mo d el dialog untuk berinteraksi yang p op uler sa a t ini a d a la h manipulasi langsung (direct manipulation ) . Disebut manipulasi langsung karena suatu obyek gambar akan berubah seketika itu sesuai dengan pe ngend alian d ari alat inputnya. Ala t inp ut yang sering d iguna kan untuk kepe rlua n ini a nta ra lain : tom b ol ← ↑ → ↓ pa da keyboa rd, bentuk tomb ol pa da layar yang dikenda likan dengan mouse, Joystickk, steering wheel p a d a aplikasi permainan, dan lain-lain. Apliikasi yang berbasis direc t ma nipulation saat ini beredar luas dan tidak lepas dari graphical user interface atau antar muka dengan grafis. Pada Window Explorer misalnya, untuk mengkopi tidak harus dengan prosedur di blok, c op y dan p aste, teta pi cukup klik file/ folde r yang a kan d ipinda h d an tempatkan ditempat baru, dan proses gerakan dapat langsung diikuti. Begitu juga pada simulasi, permainan, maupun real time monitor, hampir semua saat menggunakan metode berinteraksi dengan cara ini karena ham p ir mend ekati p roses p eng end a lia n ya ng d ila kuja n seha ri-hari.

6.3.

Praktik

1. Bukalah kemb ali ap likasi yang a da p a da m od ul 4, tam ba hkan tomb ol p a d a fo rm te rseb ut sehingg a m enjad i seb a ga i b erikut.


Transforma si Translasi d a n p em b esa ran Transformasi

Translasi

Pembesaran

2. Ketikla h kod e p a d a Button1-OnClick sb b void __f ast call TForm1: :Butt on1Cli ck(TObj ect *Sender) { Tx=Tx-10; xhasil1=x1+Tx; xhasil2=x2+Tx; PaintBox1->Canvas->Rectangle(xhasil1,y1,xhasil2,y2); } / / ---------------------------------------------------------------------------

3. Ketikla h kod e p a d a Button2-OnClick sb b void __f ast call TForm1: :Butt on2Cli ck(TObj ect *Sender) { Tx=Tx+10; xhasil1=x1+Tx; xhasil2=x2+Tx; PaintBox1->Canvas->Rectangle(xhasil1,y1,xhasil2,y2); } / / ---------------------------------------------------------------------------

4. Tam ba hkan kod e pa da header seb a ga i be rikut. class TForm1 : public TForm { …….. _ __f ast call TForm1(TComponent * Owner ); int x1,y1,x2, y2,Tx,xhasil1, xhasil2; };

5. Ja la nka n d a n klik tom b ol-tom b ol yang a d a d a n a ma ti hasilnya !

6.4.

Latihan

1. Tam ba hkan tom bo l Ata s d an Baw ah pa d a form diata s


2. Leng kap ila h p rog ra mnya sehingg a bila di klik tom b ol Ata s a ta u Ba wa h ga mb a r akan b ergerak sesuai jenis tom b olnya .

6.5.

Tugas

Mengapa hasil gambar pada Praktik ini belum terlihat adanya efek ga mb ar bergerak tetap i hanya ga mb ar yang d ibuat d alam jumlah b anyak ?


BAB 7. Teknik Animasi Inbetweening 7.1.

Maksud dan Tujuan

7.1.1 Maksud Ca ra untuk mem bua t efek ga mb ar be rge rak denga n proses hap us da n peng ga mb aran yang b erulang-ulang.

7.1.2 Tujuan Agar mahasiswa mampu membuat efek gambar bergerak/animasi untuk grafis de nga n alat kenda li tom bo l ma upun keybo ard.

7.2.

Teori Singkat

Ge ra kan p a d a a la t komun ika si b a ik TV, Film, Kom p ute r seb et ulnya ha nya la merupa kan trik, dlam a arti ge rakan itu sema ta-ma ta hanyalah ‘ tipua n’. Hal ini karena gerakan yang da pa t dilihat pa d a berba ga i med ia terseb ut seb etulnya suatu obyek yang diga mb ar da lam jumlah ba nyak d an ditampilkan satu-persatu secara bergantian. Pada saat obyek baru digambar, obyek yang sama sebelumnya dihapus. Bila letak obyek lama da n ba ru be rde kata n sec ara linea r ma ka akan muncul efek ge rakan. Ilustra si me tod e inb etw ee ing ad a la h seb a ga i b erikut (misa l ge ra kan mend ata r suatu ob yek): Lang ka h 1

Uraian Bua t ga mb a r ob yek a sa l

2

Ha p us g a mb a r a sa l te rseb ut

3

Ga mb a r sep erti ob yek a sa l tersebut tetapi diletakkan didekat ga mb ar asal Ha p us g a mb a r ini

4 5

6

Ga mb ar lag i ob yek tsb teta pi diletakkan didekat gambar sblmnya Beg itu set erunya ulang la ng kah tersebut

Gam ba r

R R RR RR R R

Sem akin b erde kata n g am ba r asal d an ga mb ar be riktunya ma ka proses ge ra ka n akan sem a kin nya ta .


7.3.

Praktik

1. Pa ngg il form pa d a mo d ul 6. 2. Ta mb a hkan kod e diba wa h ini sehingg a me nja d i seb a ga i b erikut. a . Pada Button1-OnClick void __f ast call TForm1: :Butt on1Cli ck(TObj ect *Sender) { xhasil1=x1+Tx; xhasil2=x2+Tx; Paint Box1->Canvas->Pen->Color =clWhit e; PaintBox1->Canvas->Rectangle(xhasil1,y1,xhasil2,y2); Tx=Tx-10; xhasil1=x1+Tx; xhasil2=x2+Tx; PaintBox1->Canvas->Pen->Color=clRed; PaintBox1->Canvas->Rectangle(xhasil1,y1,xhasil2,y2);

} b. Pada Button2-OnClick void __f ast call TForm1: :Butt on2Cli ck(TObj ect *Sender) { xhasil1=x1+Tx; xhasil2=x2+Tx; Paint Box1->Canvas->Pen->Color =clWhit e; PaintBox1->Canvas->Rectangle(xhasil1,y1,xhasil2,y2); Tx=Tx+10; xhasil1=x1+Tx; xhasil2=x2+Tx; PaintBox1->Canvas->Pen->Color=clRed; PaintBox1->Canvas->Rectangle(xhasil1,y1,xhasil2,y2); }

4. Am a ti ha silnya, a p a yang terja d i ? 5. Buat la h tom b ol p em b esa ra n form terseb ut. 6. Tulis kod e p a d a Button3-OnClick sep erti d ib a wa h ini void __f ast call TForm1: :Butt on3Cli ck(TObj ect *Sender) { S=S+1; xhasil1=x1*S;yhasil1=y1*S; xhasil2=x2*S;yhasil2=y2*S; PaintBox1->Canvas->Pen->Color=clRed; PaintBox1->Canvas->Rectangle(xhasil1,yhasil1,xhasil2,yhasil2); }

7. Jangan lupa pada header dideklarasikan dulu variabel yhasil1 d a n yhasil2, …… __f ast call TForm1(TComponent * Owner ); int x1,y1,x2,y2,Tx,xhasil1,xhasil2,yhasil1,yhasil2; float S; …..


8. Ja lankan a p lika si ini d a n am a ti ha silnya .

7.4.

Latihan

1. Leng kap ila h program d ia ta s sehingg a sa a t di klik p em b esa ra n , ga mb ar terkesa n mem be sar (gam ba r la ma hilang ) 2. Buatlah tom bo l pe ngec ilan dan buat kodenya sehingga bila di klik tom bo l ini ga mb a r kota k me njad i me ngec il.

7.5.

Tugas

1. Ap a p erbed a a n hasil ga mb a r sete telah tom b ol Kiri ata u Ka na n d i klik p ad a praktek mo dul 6 da n 7 ini ? 2. Tuliskan ba gian program mana me njad ikan ga mb ar da pa t b erpida h tempat ? 3. Tuliskan b a g ia n p rog ra m ma na (pa d a Pra ktik no 6) yang m enyeb a b kan hasil gambar setelah dijalankan dan menekan salah satu tombol (Kiri a ta u Ka nan ) me nja d i sep erti b ergerak sungg uha n? Dan a p a keg unaa n ba gian p rog ram , ini ?


BAB 8. Animasi Grafis dengan Latar Belakang 8.1.

Maksud dan Tujuan

8.1.1 Maksud Animasi grafis denganlatar belakang yaitu proses bergerak/berubahnya nya suat u ob yek gra fis d eng a n la ta r b elakang b erup a grafis p ula .

8.1.2 Tujuan 1. Agar mahasiswa mampu membuat program untuk animasi grafgis d enga n la tar be la kang grafis. 2. Agar mahasiswa dapat memahami trik –trik untuk memberikan efek be rge rak deng ab lata r be lakang te rtentu

8.2.

Teori Singkat

--------sam a d enga n mod ul 7--

8.3. 1.

Praktik

8.4.

Latihan

Buatlah obyek yang bergerak menyerupai benda yang riil dan ubahlah latar belakang agar lebih menarik. Jalankan lagi aplikasi yang saudara b uat t erseb ut.

8.5.

Tugas

Mengapa untuk menghapus gambar obyek tidak perlu harus menggambar obyek tersebut dengan warna sesuai dengan latar (seperti mo d ul 7)?

Mencoba 5 menit akan lebih bermakna dari pada hanya sekedar membaca walau sampai 5 jam ---Selamat Mencoba …Semoga Sukses


[tOuRankU]-Grafika_Komputer

Recommend Documents