MODUL PRAKTIKUM Ver 1.0 Oleh : M. Guntara STMIK AKAKOM 2005 Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 0 BAB 1. Penghasil Garis (Line generator) Algoritma DDA 1.1. Maksud dan Tujuan menggunakan 1.1.1 Maksud Penghasil garis (line generator) adalah prosedur yang digunakan untuk menghasilkan/memproduksi bentuk garis yang tersusun dari titik-titik elemen gambar (pixel) dengan algoritma DDA (digital differencial analyzer) 1.1.2 Tujuan 1. Agar mahasiswa dapat mengetahui bagaimana algoritma untuk membuat satu garis 2. Agar mahasiswa dapat membuat garis dari pixel 3. Agar mahasiswa dapat membandingkan garis yang dibut dengan algoritma DDA dengan garis yang dihasilkan dari reserved word C++ Builder 1.2. Teori Singkat Pada prinsipnya sebuah garis hanyalah kumpulan dari titik-titik yang digambar secara kontinu dan linier. Salah satu algoritma yang dapat digunkan untuk membuat garis adalah algoritma DDA (digital differential analyzer) dengan pseudo algoritm sebagai berikut. Persamaan garis luurs dengan koordinat cartesius adalah y=m.x + b ................. 1-1 dengan m adalah kemiringan garis, b tiik pada sumbu y. Jika dikatahui 2 tiik akhir dari segmen garios yang diposisikan pada titik x1,y1 dan x2,y2 maka untuk menentukan kemiringan garis adalah : m = y2-y1 x2-x1 m= y1-m.x1 ................. 1-3 ................. 1-2 Dengan demikian algoritma DDA adalah sebagai berikut. 1. 2. 3. 4. Tentukan 2 titik untuk membentuk garis beri 2 titik tersebut dengan titik awal (x0,y0) dan titik akhir (x1,y1) Hitung dx=x1-x0 dan dy=y1-y0 tentukan jarak maks jumlah penambahan nilai x dan nilai y dengan cara jika ⏐dx⏐ >⏐dy⏐ maka step=⏐dx⏐, jika tidak maka step=⏐dy⏐ Hitunjg penambahan koordinat piksel dengan cara x_tambah=dx/step dan y_tambah=dy/step 5. Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 1 6. 7. 8. tentukan koordinat berikutnya (xk+1,Yk+1) dengan koordinat (x+x_tambah,y+y_tambah) Posisi pixel pada layar ditenbtukan dengan pembulatan nila tersebut Ulangi langkah 4 sampai posisi pixel mencapai x=x1 dan y=y1 1.3. 1. 2. Praktik Lakukan langkah sebagai berikut Perhatian ! 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. Akttifkan C++ Builder (CB) dan buka form baru 2. Buat form dengan tombol sebagai berikut. Properties Name: button1 Caption:Garis dari DDA Properties Name: button2 Caption:Garis dari C++ Garis dari DDA Garis dari C++ 3. Ketik kode program pada Button1-ClickEvent sebagai berikut void __fastcall TForm1::Button1Click(TObject *Sender) { int x0,y0,x1,y1,dx,dy,step,absdx,absdy,k; float x,y,x_tambah,y_tambah; x0=10;y0=10; koordinat titik awal garis x1=100;y1=200; koordinat titik akhir garis 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;kMoveTo(200,10); titik awal garis Canvas->LineTo(300,200); titik akhir garis } 5. Jalankan aplikasi ini. 6. Klik tombol kiri, amjati apa yang terjadi dan kemudian klik tombol kanan danamati apa yang terjadi. 1.4. Latihan Perhatian ! Latihan pada modul praktikum ini dikerjakan saat praktikum 1. Gantilah titik awal dan titik akhir dengan koordinat yang lain (sembarang). Amatilah yang terjadi 2. Pada form diatas buatlah garis dengan perintah CB dengan koordinat awal dan akhir sama dengan no 1 diatas 1.5. Tugas Perhatian ! Tugas pada modul praktikum ini dikerjakan dirumah dan dicantumkan pada laporan resmi setiap modul 1. Amatilah adakah perbedaan kualitas garis yang dibuat dengan algoritma DDA dan garis yang diproduksi oleh CB ! 2. Mengapa hal tersebut bisa terjadi ? 3. Mengapa perintah menggunakan reserved word milik C++ Builder (CB) lebih ringkas ? Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 3 BAB 2. Menggambar obyek dari bentuk geometri 2.1. Maksud dan Tujuan garis, poligon, elips, 2.1.1 Maksud Bentuk geometri adalah bentuk gambar berupa lingkaran, atau kurva 2.1.2 Tujuan Agar mahasiswa dapat membuat program untuk menggambar bentukbentuk geometri 2.2. Teori Singkat Bentuk geometri dan kode programnya adalah. Garis MoveTo(x0,y0) LineTo(x1,y1) LineTo(xn,yn) Kotak Dengan x0,y0: koordinat titik awal garis X1,y1:koordinat akhir garis ke-1 Xn,yn:koordinat akhir garis ke-2 (n:2,3,4, dst.) Rectangle(x0,y0,x1,y1) Dengan x0,y0: koordinat sudut awal kotak X1,y1:koordinat sudut akhir kotak (sudut diagonal) Lingkaran/Ellips Ellipse(x0,y0,x1,y1) Dengan x0,y0: koordinat sudut awal ellipse X1,y1:koordinat sudut akhir ellipse Bila jarak antara x1-x0 sama dengan y1-y0 maka tersebut berbentuk lingkaran. Kurva Arc(X0,Y0,X1,Y1,….,xn,yn) gambar Dengan x0,y0:tiik kurva awal X1,y1:titik kurva ke-1 Xn,yn:titik kurva ke-n (n:2,3,4,dst.) Polygon POINT var(jumlah max sudut polygon-1) Var[0]=Point(x0,y0); Var[1]=Point(x1,y1); ….. Var[n]=Point(xn,yn); Polygon((TPoint*)var,jumlah max sudut-1); Dengan x0,y0:tiik awal poligon Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 4 X1,y1:titik sudut polygon ke-1 Xn,yn:titik sudut polygon ke-n (n:2,3,4,dst.) 2.3. Praktik 1. Buatlah form seperti dibawah ini Membuat bentuk geometri Bentuk Garis Kotak Lingkaran Kurve Polygon No: Komponen 1 :TLabel 2:RadioGroups Properties Caption : Membuat bentuk geometri Caption :Bentuk Name : Bentuk Items : Garis Kotak Lingkaran Ellips Kurve Polygon 3:PaintBox Name:PaintBox1(default) 2. Ketik kode pada Bentuk-ClickEvent sebagai berikut. void __fastcall TForm1::BentukClick(TObject *Sender) { int INDEKS=Bentuk->ItemIndex; mengambil nomor radio button Edit1->Text=IntToStr(INDEKS); mengambil nomor radio button PaintBox1->Canvas->Rectangle(0,0,ClientWidth-2,ClientHeight-2); switch (INDEKS) { case 0: pilihan radio paling atas (nilai 0-nol) PaintBox1->Canvas->MoveTo(10,10); gambar garis PaintBox1->Canvas->LineTo(100,200); break; case 1: pilihan radio baris ke-2(nilai 1) PaintBox1->Canvas->Rectangle(10,10,100,200); gambar kotak break; case 2: PaintBox1->Canvas->Ellipse(10,10,200,200); gambar lingkaran break; Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 5 case 3: PaintBox1->Canvas->Arc(10,10,50,200,300,200,30,20); gambar busur break; case 4: POINT titik[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. Jalankan aplikasi ini 4. Klik pada masing-masing tombol radio Button, amati yang terjadi. 2.4. Latihan 1. Tambah 1 fasilitas lagi untuk menggambar ellipse, sehingga pada pilihan Bentuk ditambah pilihan untuk “Ellipse”. 2. Buat kode untuk memggambar elips tersebut 3. Jalankan aplikasi tersebut. 2.5. Tugas 1. Apa perbedaan menggambar ellipse dengan lingkaran Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 6 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 abstrak) yang dibentuk dari geometri baik berupa garis, lingkaran ataupiun kurva 3.1.2 Tujuan 1. Agar mahasiswa dapat mengatahui cara membentuk suatu gambar 2. Agar mahasiswa dapat membuat suatu gambar dengan bentuk geometri 3.2. Teori Singkat 3.2.1 Membetuk suatu obyek dari geometri Suatu gambar obyek baik riil maupun abstrak dpaat disusun atas dasar bentuk geometri, seperti contoh gambar dibawah ini. Gambar diatas merupakan perpaduan dari kotak, garis dan lingkaran. 3.2.2 Membuat arsiran Bentuk-betnuk yang dapat diarsir adalah kotak, lingkaran/ellipse, dan poligon. Perintah arsiran ini ditempatkan sebelum suatu geometri digambar. Perintah untuk mengarsir adalah Brush=jenis arsiran Color=RGB(merah,kuning,biru) Dengan jenis arsiran = bsSolid : arsiran merata bsVertical : arsiran garis vertikal bsHorizontal : arsiran garis vertikal bsDiagonal : arsiran garis diagonal bsCross : kotak=kotak merah : 0 – 255 kuning:0-255 Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 7 biru:0-255 3.3. Praktik Membuat Gambar Obyek Gambar Rumah 1. Buatlah form baru dengan bentuk sebagai berikut. No: Komponen 1 :Tlabel 2:RadioGroups Properties Caption : Membuat gambar obyek Caption :Gambar Name : Gambar Items : Rumah 3:PaintBox Name:PaintBox1(default) 2. ketik kode pada Gambar-ClickEvent sebagai berikut. void __fastcall TForm1::GambarClick(TObject *Sender) { int INDEKS=Gambar->ItemIndex; PaintBox1->Canvas->Rectangle(0,0,ClientWidth-2,ClientHeight-2); switch (INDEKS) { case 0: PaintBox1->Canvas->Rectangle(50,150,200,300); gambar bangunan kotak PaintBox1->Canvas->Rectangle(70,170,120,290); gambar kotak pintu PaintBox1->Canvas->MoveTo(90,170); PaintBox1->Canvas->LineTo(90,290); garis tengah pintu PaintBox1->Canvas->MoveTo(50,150); gambar segitiga atap PaintBox1->Canvas->LineTo(200,150); PaintBox1->Canvas->LineTo(125,10); PaintBox1->Canvas->LineTo(50,150); PaintBox1->Canvas->Ellipse(100,80,150,125); gambar lingkaran atap break; } } 3. Jalankan aplikasi tersebut dan klik pada radio button. 4. Warnalilah bagian tembok dengan warna hijau dan bagian atap kuning, sedangkan didalam lingkaran warna hitam, sehingga kode diatas menjadi sebagai berikut. Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 8 void __fastcall TForm1::GambarClick(TObject *Sender) { int INDEKS=Gambar->ItemIndex; PaintBox1->Canvas->Rectangle(0,0,ClientWidth-2,ClientHeight-2); switch (INDEKS) { case 0: PaintBox1->Canvas->Brush->Style=bsSolid; arsiran solid (merata) PaintBox1->Canvas->Brush->Color=RGB(0,255,0); warna arsiran tembok hijau PaintBox1->Canvas->Rectangle(50,150,200,300); gambar bangunan kotak PaintBox1->Canvas->Brush->Color=RGB(255,100,100); warn arsiran pintumerah muda PaintBox1->Canvas->Rectangle(70,170,120,290); gambar kotak pintu PaintBox1->Canvas->MoveTo(90,170); PaintBox1->Canvas->LineTo(90,290); garis tengah pintu PaintBox1->Canvas->MoveTo(50,150); gambar segitiga atap PaintBox1->Canvas->LineTo(200,150); PaintBox1->Canvas->LineTo(125,10); PaintBox1->Canvas->LineTo(50,150); PaintBox1->Canvas->Brush->Color=RGB(0,0,0); warna arsiran lingkaran hitam PaintBox1->Canvas->Ellipse(100,80,150,125); gambar lingkaran atap break; } } 5. Jallankan aplikasi ini dan lihat perbedaannya. 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 berikan arsiran pada polygon tersebut 2. gantilah arsiran pada segitiga tidak menggunakan csSolid tetapi cs Vertical 3.5. Tugas Buatlah gambar obyek riil lain yang terdiri atas : lingkaran/ellipse, kotak dan garis dengan aeriran dan warna arsiran bebas sesuai keinginan saudara. Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 9 BAB 4. Transformasi Translasi dan Pembesaran 4.1. Maksud dan Tujuan 4.1.1 Maksud Tranaformasi adalah proses perubahan baik bentuik maupun letak. Sedangkan translasi adalah perpindahan suatu obyek ke tempat lain dengan bentuk sama, sedangkan pembesaran adalah berubah ukuran suatu obyek dengan bentuk yang masih sama. 4.1.2 Tujuan 1. Agar mahasiswa dapat memahami cara memindah suatu obyek ke tempat lain 2. Agar mahasiswa dapat memperbesar/memperkecial suatu obyek 4.2. Teori Singkat 4.2.1 Transformasi Translasi (penggeseran) Persamaan transformasi X’ = x+Tx Y’=y+Ty ............ 4-1 ............ 4-2 Dengan x,y : koordinat titik awal X’,y’:koordinat ttitik hasil transformasi Tx: faktor penggeseran mendatar Ty: faktor penggeseran vertikal 4.2.2 Transformasi Pembesaran (scalling) Persamaan transformasi X’=x.Sx Y’=y.Sy ............ 4-3 ............ 4-4 Dengan x,y : koordinat titik awal X’,y’:koordinat ttitik hasil transformasi Sx: faktor penggeseran mendatar Sy: faktor penggeseran vertikal 4.3. Praktik 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. Buatlah form sebagai berikut sebagai berikut Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 10 Transformasi Translasi dan Pembesaran 2 Translasi 4 Pembesaran kali 5 3 1 No: Komponen 1 :Tlabel 2:RadioGroups Properties Caption : Trannsformasi Translasoi dan Pembesaran Caption :Transformasi Name : Transformasi Items : Translasi Pembesaran 3:PaintBox 4:Edit 5:Edit Name:PaintBox1(default) Name:Edit1 (default) Name:Edit2 (default) 2. Tambahkan deklarasi variabel ini pada file header class TForm1 : public TForm { __published: // IDE-managed Components TLabel *Label1; ……………. Public: // User declarations __fastcall Tform1(Tcomponent* Owner); int x1,y1,x2,y2; }; 3. ketikkan kode berikut pada Edit1-OnExit void __fastcall TForm1::Edit1Exit(TObject *Sender) { int Tx; Tx=StrToInt(Edit1->Text); x1=x1+Tx; x2=x2+Tx; PaintBox1->Canvas->Rectangle(x1,y1,x2,y2); } 4. Tambahkan kode berikut pada Edit2-OnExit; Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 11 void __fastcall TForm1::Edit2Exit(TObject *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. Jalankan aplikasi tersebut dan klik Pilihan Translasi, kemudian masukkan suatu nilai pada isian Edit1, agar bereaksi maka cursor dikeluarkan (OnExit) dari isian tersebut dan amati hasilnya 5. Coba pula pilihan yang lain dan amati hasilnya. 4.4. Latihan terdapat 1. Modifikasilah aplikasi ini, pada pilihan pembesaran, pembesaran horisontal dan pembesaran vertikal. 4.5. Tugas 1. Mengapa hasil transformasi pembesaran diatas berpidah dari gambar asal ? 2. Mengapa pada kotak diatas cukup 2 titik yang ditransformasikan, bukan 4 titik ? Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 12 BAB 5. Transformasi Rotasi dan Shearing 5.1. Maksud dan Tujuan 5.1.1 Maksud Transsformasi rotasi adalah proses perpindahan suatu titik secara melingkar dengan sudut yang dapat ditentukan, sedangkan shearing adalah perubahan bentuk suatu obyek akibat pembebanan pada suatu titik. 5.1.2 Tujuan 1. Agar mahasiswa mampu membuat program untuk memutar suatu gambar grafis 2. Agar mahasiswa mampu membuat program untuk memberikan efek pembebanan pada suatu grambar grafis 5.2. Teori Singkat 5.2.1 Rotasi Rotasi adalah proses perpindahan suatu titikk ke tempat lain secara melingkar dengan titik poros tertentu (default 0,0) dengan sudut yang dapat diatur. Letak titik setelah diputar dengan sudut θ dengan titik pusat di (0,0) adalah X’=x.cos θ - y.sin θ ........... 5-1 Y’=x.sin θ+y.cos θ........... 5-2 Dengan θ : sudut putar berlawanan arah jarum jam. Rotasi ini di dunia grafika banyak sekali digunakan untuk berbagai simulasi misalnya roda berputar, simulasijam analog dan lain-lain. 5.2.2 Shearing Shearing (pembebanan) adalah proses perobahan suatu bentuk akibat adanya pembebanan pada titik tertentu. Bila suatu titik dibebani dengan faktor beban H maka titik tersebut akan berpindah tempat mengikuti persmaan sebagai berikut. X’=x+Hx.y ........... 5-3 Y’=y+Hy.x ........... 5-4 Dengan Hx : Faktor pembebanan mendatar Hy : faktor pembebanan vertikal Pembebanan ini banyak digunakan untuki mensimulasikan suatu obyek akibat adanya tekanan samping misalnya simulasi pohon akibat terkena angin atau untuk pembuatan bayangan suatu benda akibat pencahayaan. Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 13 5.3. Praktik 1. Buat form sebagai berikut. 2 4 Transformasi Rotasi dan Pembebanan 1 Rotasi derajat 3 Pembebanan satuan 5 No: Komponen 1 :Tlabel 2:RadioGroups Properties Caption : Trannsformasi Translasoi dan Pembesaran Caption :Transformasi Name : Transformasi Items : Rotasi Pembebanan 3:PaintBox 4:Edit 5:Edit Name:PaintBox1(default) Name:Edit1 (default) Name:Edit2 (default) 2. Ketikkan kode beriktu pada Edit1-OnExit void __fastcall TForm1::Edit1Exit(TObject *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. Ketikkan kode verikut pada Edit2-OnExit void __fastcall TForm1::Edit2Exit(TObject *Sender) { int beban=StrToInt(Edit2->Text); x1hasil=x1+beban*y1; y1hasil=y1; Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 14 x2hasil=x2+beban*y2; y2hasil=y2; x3hasil=x3+beban*y3; y3hasil=y3; PaintBox1->Canvas->Pen->Color=clRed; PaintBox1->Canvas->Pen->Width=5; PaintBox1->Canvas->MoveTo(x1hasil,y1hasil); PaintBox1->Canvas->LineTo(x2hasil,y2hasil); PaintBox1->Canvas->LineTo(x3hasil,y3hasil); PaintBox1->Canvas->LineTo(x1hasil,y1hasil); } 4. Tambahkan deklarasi variabel pada file header sebagai berikut. class TForm1 : public TForm { __published: // IDE-managed Components TLabel *Label1; ………………………….. void __fastcall Edit1Exit(TObject *Sender); void __fastcall Edit2Exit(TObject *Sender); private: // User declarations public: // User declarations __fastcall 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. 5.5. Latihan Tugas Gantilah bentuk garis pada transformasi rotasi menjadi segitiga. 1. Mengapa pada rotasi bila diberi sudut positif arah perputaarannya searahjarum jam ? (berbeda dengan ketentuan teori, bila sudut positif arah putaran berlawanan jarum jam) 2. Bagaimana caranya (tidak perlu dibuat programnya) agar titik pusat perputaran ada di titik awal garis tersebut ? 3. Mengapa pada pembebanan yang bergeser justru bagian bawah, dan bagaimana agar bila yang bergeser ujung runcing bagian atas ? Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 15 BAB 6. Mengendalikan grafis dengan direct manipulation 6.1. Maksud dan Tujuan 6.1.1 Maksud Maksud direct manipulation adalah obyek gambar dapat lansung berubah sesuai dengan maksud/fungsi alat input. 6.1.2 Tujuan 1. Agar mahasiswa mampu memahami cara beriintraksi dengan grafis dengan alat-alat input 2. Agar mahasiswa mampu membuat program grafis yang dapat dikendalikan langsung baik dengan tombol maupun keyboard. 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 obyek yang digerakkan memerlukan gerakan/perubahan dinamis dan cepat. Salah satu model dialog untuk berinteraksi yang populer saat ini adalah manipulasi langsung (direct manipulation). Disebut manipulasi langsung karena suatu obyek gambar akan berubah seketika itu sesuai dengan pengendalian dari alat inputnya. Alat input yang sering digunakan untuk keperluan ini antara lain : tombol ← ↑ → ↓ pada keyboard, bentuk tombol pada layar yang dikendalikan dengan mouse, Joystickk, steering wheel pada aplikasi permainan, dan lain-lain. Apliikasi yang berbasis direct manipulation 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, copy dan paste, tetapi cukup klik file/folder yang akan dipindah dan 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 hampir mendekati proses pengendalian yang dilakujan sehari-hari. 6.3. Praktik 1. Bukalah kembali aplikasi yang ada pada modul 4, tambahkan tombol pada form tersebut sehingga menjadi sebagai berikut. Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 16 Transformasi Translasi dan pembesaran Transformasi Translasi Pembesaran Kiri Kanan 2. Ketiklah kode pada Button1-OnClick sbb void __fastcall TForm1::Button1Click(TObject *Sender) { Tx=Tx-10; xhasil1=x1+Tx; xhasil2=x2+Tx; PaintBox1->Canvas->Rectangle(xhasil1,y1,xhasil2,y2); } //--------------------------------------------------------------------------- 3. Ketiklah kode pada Button2-OnClick sbb void __fastcall TForm1::Button2Click(TObject *Sender) { Tx=Tx+10; xhasil1=x1+Tx; xhasil2=x2+Tx; PaintBox1->Canvas->Rectangle(xhasil1,y1,xhasil2,y2); } //--------------------------------------------------------------------------- 4. Tambahkan kode pada header sebagai berikut. class TForm1 : public TForm { …….. _ __fastcall TForm1(TComponent* Owner); int x1,y1,x2,y2,Tx,xhasil1,xhasil2; }; 5. Jalankan dan klik tombol-tombol yang ada dan amati hasilnya ! 6.4. Latihan 1. Tambahkan tombol Atas dan Bawah pada form diatas Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 17 2. Lengkapilah programnya sehingga bila di klik tombol Atas atau Bawah gambar akan bergerak sesuai jenis tombolnya. 6.5. Tugas Mengapa hasil gambar pada Praktik ini belum terlihat adanya efek gambar bergerak tetapi hanya gambar yang dibuat dalam jumlah banyak ? Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 18 BAB 7. Teknik Animasi Inbetweening 7.1. Maksud dan Tujuan 7.1.1 Maksud Cara untuk membuat efek gambar bergerak dengan proses hapus dan penggambaran yang berulang-ulang. 7.1.2 Tujuan Agar mahasiswa mampu membuat efek gambar bergerak/animasi untuk grafis dengan alat kendali tombol maupun keyboard. 7.2. Teori Singkat Gerakan pada alat komunikasi baik TV, Film, Komputer sebetulnya hanyala merupakan trik, dlama arti gerakan itu semata-mata hanyalah ‘tipuan’. Hal ini karena gerakan yang dapat dilihat pada berbagai media tersebut sebetulnya suatu obyek yang digambar dalam jumlah banyak dan ditampilkan satu-persatu secara bergantian. Pada saat obyek baru digambar, obyek yang sama sebelumnya dihapus. Bila letak obyek lama dan baru berdekatan secara linear maka akan muncul efek gerakan. Ilustrasi metode inbetweeing adalah sebagai berikut (misal gerakan mendatar suatu obyek): Langkah 1 Uraian Buat gambar obyek asal Gambar 2 3 4 5 6 Hapus gambar asal tersebut Gambar seperti obyek asal tersebut tetapi diletakkan didekat gambar asal Hapus gambar ini Gambar lagi obyek tsb tetapi diletakkan didekat gambar sblmnya Begitu seterunya ulang langkah tersebut Semakin berdekatan gambar asal dan gambar beriktunya maka proses gerakan akan semakin nyata. Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 19 7.3. Praktik 1. Panggil form pada modul 6. 2. Tambahkan kode dibawah ini sehingga menjadi sebagai berikut. a. Pada Button1-OnClick void __fastcall TForm1::Button1Click(TObject *Sender) { xhasil1=x1+Tx; xhasil2=x2+Tx; PaintBox1->Canvas->Pen->Color=clWhite; 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); } void __fastcall TForm1::Button2Click(TObject *Sender) { xhasil1=x1+Tx; xhasil2=x2+Tx; PaintBox1->Canvas->Pen->Color=clWhite; 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 4. Amati hasilnya, apa yang terjadi ? 5. Buatlah tombol pembesaran form tersebut. 6. Tulis kode pada Button3-OnClick seperti dibawah ini void __fastcall TForm1::Button3Click(TObject *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 dan yhasil2, …… __fastcall TForm1(TComponent* Owner); int x1,y1,x2,y2,Tx,xhasil1,xhasil2,yhasil1,yhasil2; float S; ….. Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 20 8. Jalankan aplikasi ini dan amati hasilnya. 7.4. Latihan 1. Lengkapilah program diatas sehingga saat di klik pembesaran , gambar terkesan membesar (gambar lama hilang) 2. Buatlah tombol pengecilan dan buat kodenya sehingga bila di klik tombol ini gambar kotak menjadi mengecil. 7.5. Tugas 1. Apa perbedaan hasil gambar setetelah tombol Kiri atau Kanan di klik pada praktek modul 6 dan 7 ini ? 2. Tuliskan bagian program mana menjadikan gambar dapat berpidah tempat ? 3. Tuliskan bagian program mana (pada Praktik no 6) yang menyebabkan hasil gambar setelah dijalankan dan menekan salah satu tombol (Kiri atau Kanan ) menjadi seperti bergerak sungguhan? Dan apa kegunaan bagian program, ini ? Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 21 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 suatu obyek grafis dengan latar belakang berupa grafis pula. 8.1.2 Tujuan 1. Agar mahasiswa mampu membuat program untuk animasi grafgis dengan latar belakang grafis. 2. Agar mahasiswa dapat memahami trik –trik untuk memberikan efek bergerak dengab latar belakang tertentu 8.2. 8.3. 1. 8.4. Teori Singkat Praktik --------sama dengan modul 7-- Latihan Buatlah obyek yang bergerak menyerupai benda yang riil dan ubahlah latar belakang agar lebih menarik. Jalankan lagi aplikasi yang saudara buat tersebut. 8.5. Tugas Mengapa untuk menghapus gambar obyek tidak perlu harus menggambar obyek tersebut dengan warna sesuai dengan latar (seperti modul 7)? Mencoba 5 menit akan lebih bermakna dari pada hanya sekedar membaca walau sampai 5 jam ---Selamat Mencoba …Semoga Sukses Modul Praktikum Grafika Komputer STMIK AKAKOM –Oleh M. Guntara 22