PENDAHULUAN PENGERTIAN Grafika/grafis (graphics) Gambar yang dibuat/direkayasa dari bentuk geometri Grafika Komputer (computer

graphics) Gambar yang dibuat/direkayasa dari bentuk geometri dengan bantuan komputer Image/Citra Gambar yang diambil dari obyek nyata Image prosesing (pengolahan citra) merupakan teknik untuk memodifikasi atau menginterpretasi gambar yang ada, seperti foto dan rangkaian gambar film. Dua macam prinsip pengolahan citra adalah :  Meningkatkan kualitas gambar  Memberikan persepsi dari informasi visual, seperti pada robotic Untuk melakukan pengolahan citra, pertama-tama membuat digitalisasi dari foto atau membuat foto menjadi file image. Selanjutnya metode digital dapat digunakan untuk memodifikasi gambar sehingga mendapat kualitas yang baik. Selain itu, gambar dapat dihasilkan merupakan kombinasi dari beberapa gambar. Uraian Sumber Ukuran Memori Elemen yg diproses Kecepatan proses Dimensi Elemen gambar Detail Obyek yg dimanipulasi Grafika 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. SISTEM GRAFIKA KOMPUTER • Sistem grafika komputer pasif adalah sistem dimana operator tidak bisa berinteraksi secara langsung dengan gambar yang dibangkitkan. • Sistem Grafika komputer interaktif (interactive Computer Graphics) adalah sistem yang memungkinkan operator untuk berdialog langsung dengan apa yang terlihat pada layar komputer. PENERAPAN GRAFIKA KOMPUTER • Pemakaian dalam bidang sains, teknologi dan bisnis
Bahan Ajar Grafika Komputer /Hal.

GK Dibuat/rekayasa Kecil Titik-titik pokok Tinggi 2D,3D Bentuk geometri Kasar Tiap bentuk geometri

Image Dari obyek nyata Besar Semua titik Lamban 2D Pixel Halus Tiap titik/pixel

1

Dalam bidang ini bentuk grafik dua dimensi (2D) dan tga dimensi (3D) banyak dimanfaatkan untuk menunjukkan suatu fungsi matematik, fenomena fisis, fungsi ekonomi, histogram, diagram batang, pie chat, diagram penjadwalan pekerjaan, diagram produksi dll. • Kartografi Dalam bidang ini, grafika komputer banyak digunakan untuk menyajikan informasi geografis dan fenomena alamiah lain. Contoh : peta geografi, peta relief, peta eksplorasi minyak dan pertambangan, peta cuaca, peta kepadatan penduduk dll Simulasi dan animasi Contoh : film starwars, armageddon, titanic dll Contoh kelompok simulai : simulasi reaksi nuklir dan kimia, aliran hidrodinamis, perubahan struktur (deformasi) dari suatu benda yang diberi beban melebihi kekuatannya Computer Aided Design and Drafting Dalam CAD, grafika computer biasa digunakan untuk merancang komponen dari sistem mekanis, elektris, elektromekanis, piranti elektronis maupun piranti lain. Termasuk dalam kelompok ini adalah struktur bangunan, reaktor kimia, badan mobil, pesawat terbang, kapal lengkap dengan ruang-ruang yang aa, jaringan komputer. Dalam bidang ini tekanan untama dari pemakaian grafika komputer adalah untuk memproduksi gambar dengan ketelitian yang sangat tinggi. Seni dan Komersial Dalam bidang ini, grafika komputer banyak dimanfaatkan untuk pembuatan ulang (reproduksi) gambar yang memiliki nilai historis tinggi dan penting untuk dilestarikan, seperti gambargambar dari pelukis terkenal. Juga digunakan untuk pembuatan iklan / logo dari suatu produk Antarmuka grafis (Graphical User Interfaces GUI) Dalam bidang ini grafika computer seolah-olah menyediakan suatu bahasa antarmuka pemakai (user interfaces) yang baru, karena ”dialog” antara pemakai dan komputer tidak lagi diketikkan dari keyboard, tetapi pemakai cukup memiliki suatu simbol / icon yang tersedia pada layar dengan menggunakan mouse, lightpen dll.

KLASIFIKASI PENERAPAN GRAFIKA KOMPUTER Ada beberapa criteria yang dapat digunakan untuk mengelompokkan penerapan grafika computer pada bidang-bidang diatas 1. Kriteria Pertama adalah ”tipe dari objek dari gambar yang dihasilkan”. Terapan yang termasuk di dalam kriteria ini antara lain : Gambar-gambar garis dari objek dua dimensi (2D) dan 3D (Sering disebut Wired-frame picture), misal: garis-garis yang menunjukkan struktur suatu bangunan, gambar garis untuk objek 3D dengan bagian tertentu yang tidak nampak dihilangkan, gambar 2D dengan grayscale yang berbeda, gambar 3D yang memperhatikan efek pencahayaan/bayangan dan terapan lain yang sejenis. 2. Kriteria Kedua didasarkan atas ”jenis interaksi dan derajat pengendalian objek / gambar dalam layar”. a. Dalam offline plotting, gambar bisa dibentuk dari sekumpulan data yang diketahui atau diambil dari satu basis data, sehingga gambar yang dihasilkan tidak bisa diubah kecuali dengan mengubah basis data yang diketahui.

Bahan Ajar Grafika Komputer /Hal.

2

b. Dalam interactive plotting, operator bisa berinteraksi dengan gambar, sehingga operator bisa mengubah gambar yang tertampil pada layar dengan menggunakan piranti yang tersedia. c. Dalam interactive design, operator bisa menggambarkan suatu bentuk tertentu dimulai dari layar dalam keadaan kosong, kemudian ditambahkan sejumlah objek dimana operator dengan mudah dan bebas bisa mengubah gambar yang telah terbentuk. Operator juga bisa memperbesar atau memperkecil gambar jika perlu melihat bagianbagian tertentu secara lebih rinci. 3. Kriteria ketiga adalah ”role of the picture” atau bagaimana gambar yang tertampil punya arti operator atau siapa saja yang melihatnya. Dalam bidang tertentu seperti kartografi, gambar yang dihasilkan merupakan produk utama, sedang pada bidang lain gambar yang dihasilkan hanya merupakan visualisasi dari suatu objek atau fenomena yang ingin diamati. 4. Kriteria keempat adalah hubungan antara objek dan gambar yang tertampil. Dalam hal ini operator bisa menampilkan sebuah gambar dalam sekali tampil, sekelompok gambar yang saling berhubungan, atau dengan teknik lain. KOMPONEN LAYAR PENAMPIL Pada dasarnya, semua layar penampil dengan kemampuan grafis punya 3 komponen utama : Pengingat digital (frame buffer) Citra yang akan ditampilkan ke layar disimpan sebagai matrix nilai elemen nxm menunjukkan intensitas dari citra grafis yang akan ditampilkan Layar Penampil Piranti pengendalian tampilan (Display controller) atau pengolah tampilann (Display processor) Berfungsi untuk melewatkan isi pengingat digital dan mengolahnya untuk ditampilkan ke layar penampil.  Tampilan vektor atau tampilan kaligrafi (Vektor, caligraphic atau stroke display) dikembangkan tahun 60-an. Pada jenis ini pengingat digital berisi daftar tampilan (display list) atau tampilkan (display program) yang berisi perintah pengambaran titik, perintah penggambaran garis, dan perintah penggambaran karakter. Perintah ini selanjutnya oleh pengolah tampilan akan mengubah data digital menjadi tegangan analog yang dipakai untuk memancarkan elektron yang bisa mengenal tabung layar tampilan berlapis fosfor akan menyebabkan fosfor tersebut berpendar dan terlihat ada gambar. Karena sisnar pendar dari fosfor tersebut tidak tahan lama dalam puluhan atau ratusan mili detik, maka elektron-elektron tersebut harus ditembakkan minimal 30 kali per detik untuk menghindari adanya kedip (flicker). Proses ini disebut sebagai penyegaran eletron (electron refreshing).  Tampilan berdasarkan teknologi TV dan disebut raster display. Dikembangkan tahun 70an. Pada tampilan ini, garis, karakter dan bentuk-bentuk lain selalu digambar berdasar komponen
Bahan Ajar Grafika Komputer /Hal.

3

terkecilnya yaitu titik, dan biasa disebut sebagai pixel atau pel(picture element). Sebuah titik pada layar tampilan bisa dihidup matikan dengan mudah dalam pengingat digital karena 0 untuk titik matik dan 1 untuk titik yang menyala. Didalam pengingat digital, citra grafis yang akan ditampilkan disimpan sebagai polabit dengan mengubah pola bit (piksel) yang ada dalam pengingat digital, bisa dibentuk gambar sesuai dengan keinginan. Untuk gambar hitam-putih, warna hitam disajikan menggunakan bit 1, dan warna putih menggunakan bit 0. Untuk gambar berwarna pengaturan yaitu lebih rumit. Yang dimaksud dengan raster atau resolusi layar (screen resolution) adalah matrix piksel yang menutup seluruh permukaan layar tampilan. Semakin besar ukuran matrix pikxel yang dibentuk pada suatu layar tampilan, semakin bagus dan halus pula gambar yang bisa dihasilkan oleh layar tersebut. Teknologi Tampilan / Display Dan Sistem Grafika

Tampilan Vector Storage tube Refresh CRT
Liquid Crystal
Output Primitif Pengertian Output/Grafis Primitif Output/Grafis primitif adalah bentuk geometri dasar yang dapat digunakan untuk membentuk obyek yang lebih komplek. Dengan memasukkan output primitif tersebut sebagai stuktur yang lebih kompleks. Setiap output primitif mempunyai data koordinat dan informasi lain tentang bagaimana cara object ditampilkan pada layar. Titik dan garis lurus adalah bentuk geometri paling sederhana dan komponen gambar. Macam-macam Output/Grafis primitif 1. Titik (Pixel) Titik merupakan satuan gambar/grafis yang terkecil. Dengan menggambar titik maka kita dapat menggambar obyek apapun. Termasuk bentuk geometri dibawah merupakan bentuk –bentuk yang pada dasarnya berasal dari titik-titik. Operasi titik ini sering digunakan pada pengolahan citra (Image processing). Setiap titik pada monitor memiliki parameter :koordinat dan warna. 4

Raster Color CRT
Gas Plasma

Flat Panel
Electro Luminescant

Bahan Ajar Grafika Komputer /Hal.

Kode untuk menggambar titik : Canvas->Pixel[x][y]=warna Dengan x : koordinat mendatar y : koordinat vertikal Warna : warna pixel (dibahas pada bab berikutnya) 2. Garis (line) Garis adalah kumpulan titik-titik/pixel yang tersusun secara lurus dan linier dari titik awal sampai titik akhir Kode : Canvas->MoveTo(x0,y0) Canvas->LineTo(x1,y1) ….. Canvas->LineTo(xn,yn) Garis ini berawal dari titik koordinat (x0,y0) sampai ke (x1,y1) dan selanjutnya ke (xn,yn).

X0,y0

X2,y2 Xn,yn X1,y1

3. Kotak (Box) Kotak merupakan siklus tertutup minimal memiliki 2 titik pokok
X1,y1

X2,y2

Keterangan : X1,y1:koordinat kotak awal X2,y2:koordinat kotak akhir (diagonal) Canvas->Rectangle(x1,y1,x2,y2) 4. Lingkaran/Elip (Circle/Ellipse) Lingkaran adalah kumpulan titik yang melingkar dengan garis tengah mendatar dan vertikal sama, sedangkan untuk elip, garis tengahnya berbeda.
X1,y1 X1,y1

X2,y2

X2,y2

Lingkaran

Elip
Bahan Ajar Grafika Komputer /Hal.

5

Canvas->Ellipse(x1,y1,x2,y2)

5. Busur (Arc) Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat busur. Canvas->Arc(x1,y1,x2,y2,x3,y3,x3,x4,y4);
X1,y1 X3,y3

X4,y4

X2,y2

6. Chord / Tembereng Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat tembereng. Canvas->Chord(x1,y1,x2,y2,x3,y3,x3,x4,y4);
X1,y1 X3,y3

X4,y4

X2,y2

7. Pie/Juring Digunakan untuk mengambar bagaian dari lingkaran yaitu membuat Juring.

Canvas->Pie(x1,y1,x2,y2,x3,y3,x3,x4,y4);
X1,y1 X3,y3

X4,y4

Bahan Ajar Grafika Komputer /Hal.

6

X2,y2

8. Poligon (Polygon)  Method Poligon digunakan untuk mengambar segi banyak POINT var[n]; var[0]=Point(x,y); var[1]=Point(x,y); …. var[n]=Point(x,y); Canvas->Polygon((TPoint*)var,n); Dengan var : variabel N: jumlah titik yang membentuk poligon - 1 //deklarasi variabel

Contoh : POINT titik[4] Titik[0]=POINT(10,10);  a Titik[1]=POINT(100,10); b Titik[2]=POINT(150,100);c Titik[3]=POINT(50,150);d Titik[4]=POINT(0,50); e Canvas->Polygon((Tpoint*) titik,4); Hasil: a e b

c d

9. Polyline  Polyline digunakan untuk membuat ”satu” atau ”banyak” garis dari suatu koordinat ke koordinat lainnya. POINT var[n]; var[0]=Point(x,y); var[1]=Point(x,y); //deklarasi variabel

Bahan Ajar Grafika Komputer /Hal.

7

…. var[n]=Point(x,y); Canvas->Polyline((TPoint*)var,n); Dengan var : variabel N: jumlah titik yang membentuk poligon Contoh : POINT titik[4] Titik[0]=POINT(10,10);  a Titik[1]=POINT(100,10); b Titik[2]=POINT(150,100);c Titik[3]=POINT(50,150);d Titik[4]=POINT(0,50); e CANVAS->POLYLINE((Tpoint*) titik,4);

Hasil: a e b

c d

Atribut Output Primitif Pada umumnya, setiap parameter yang memberi pengaruh pada output primitif ditampilkan sesuai dengan parameter atribut. 1. Atribut Garis Atribut dasar untuk garis lurus adalah style (tipe garis), width (tebal) dan color(warna). Dalam beberapa paket aplikasi grafik, garis dapat ditampilkan dengan mengunakan Pen. 2. Atribut Kurva Parameter untuk atribut kurva sama dengan atribut segmen garis. Kurva dapat ditampilkan dengan berbagai warna, tebal, dot-dash(Style garis) dan pilihan pen atau brush. Selain itu untuk pengisian suatu bidang tertentu termasuk memilih warna antara solid dan pattern tertentu dan memilih warna pattern yang ada. 3. Atribut Karakter

Bahan Ajar Grafika Komputer /Hal.

8

Membuat Aplikasi 1. Mengenal Pen Langkah 1 Rancanglah Form Dengan Nama untuk File Unit adalah Upen.cpp dan Nama file project adalah Pen.bpr Langkah 2 Buat menu dengan komponen TMainMenu terdiri dari Pen dan sub menu Pen adalah ”Style”, ”Color” ,”Width” Langkah 3 Buka File Upen.h (ctrl-F6) dan deklarasikan fungsi-fungsi berikut pada bagian public void _fastcall BersihkanCanvas(); void _fastcall SetDefault(); Langkah 4 Buka File Upen.cpp dan definisikan fungsi-fungsi tersebut pada bagain akhir kode program dengan menggunakan sintak berikut void _fastcall TForm1::BersihkanCanvas() { Canvas->Brush->Style = bsSolid; Canvas->Brush->Color = clWhite; Canvas->FillRect(Rect(0,0,ClientWidth, ClientHeight)); } //--------------------------------------------------------------------------void _fastcall TForm1::SetDefault() { Canvas->Pen->Width = 1; Canvas->Pen->Mode = pmCopy; Canvas->Pen->Style = psSolid; Canvas->Pen->Color = clBlack; } Langkah 5 Isikan sintak berikut pada event OnClick pada item “Style” dari komponen MainMenu1. void __fastcall TForm1::Style1Click(TObject *Sender) { //membuat 7 element array dari tipe TPenStyle TPenStyle JENIS[7] = { psSolid, psDash, psDot, psDashDot, psDashDotDot, psClear, psInsideFrame }; int posisiY = 20; //deklarasi posisiY dengan nilai awal 20 BersihkanCanvas(); //Memanggil Fungsi bersihkanCanvas() SetDefault();//memanggil Fungsi SetDefault() for (int j=0; j<7; j++) { Canvas->Pen->Style = JENIS[j]; //menentukan koordinat awal Canvas->MoveTo(100, posisiY); //menggambar garis dari posisi awal sampai ke posisi ...
Bahan Ajar Grafika Komputer /Hal.

9

// (Lebar layar - 10, posisiY) Canvas->LineTo(ClientWidth-10, posisiY); posisiY +=20; } //Menuliskan teks ke layar pada koordinat tertentu Canvas->TextOut(1, 10, "psSolid "); Canvas->TextOut(1, 30, "psDash "); Canvas->TextOut(1, 50, "psDot "); Canvas->TextOut(1, 70, "psDashDot "); Canvas->TextOut(1, 90, "psDashDotDot "); Canvas->TextOut(1, 110, "psClear "); Canvas->TextOut(1, 130, "psInsideFrame "); } //--------------------------------------------------------------------------Sampai disini, coba jalankan aplikas dan pilih menu Style, kita akan melihat hasil seperti berikut

Langkah 6 Selanjutnya isikan sintak berikut pada event OnClick pada item ”Color” dari komponen MainMenu1 void __fastcall TForm1::Color1Click(TObject *Sender) { BersihkanCanvas(); SetDefault(); //melakukan pengulangan untuk membuat 100 buah garis for (int k=0; k<100; k++) { //untuk mengacak (random) warna pena Canvas->Pen->Color = RGB(random(255),random(255), random(255)); //untuk mengacak penentuan koordinat awal Canvas->MoveTo(random(ClientWidth), random(ClientHeight)); //untuk membuat garis sampai koordinat acak Canvas->LineTo(random(ClientWidth), random(ClientHeight)); } }

Bahan Ajar Grafika Komputer /Hal.

10

Coba jalankan aplikasi tersebut. Pilih Menu Color. Hasil aplikasi akan tampak sebagai berikut

Langkah 7 Isikan Sintak dibawah ini untuk Event Onclick pada item ”Width” dari Komponen MainMenu1 void __fastcall TForm1::Width1Click(TObject *Sender) { int posisiY = 20; BersihkanCanvas(); SetDefault(); for (int i=0; i<10; i++) { Canvas->TextOut(10,posisiY, "Width = " + AnsiString(i)); Canvas->Pen->Width = i; Canvas->MoveTo(80, posisiY + 8); Canvas->LineTo(ClientWidth -10, posisiY + 8); posisiY +=20; } } //--------------------------------------------------------------------------Jalankan aplikasi dan pilih menu Width, kita akan mendapatkan hasil sebagai berikut

2. Mengenal Brush
Bahan Ajar Grafika Komputer /Hal.

11

Langkah 1 Buat aplikasi baru simpan untuk File Unit dengan nama Ubrush.cpp dan untuk File Project Brush.bpr. Kemudian menu dari komponen TmainMenu tambahan Menu dengan Caption ”&Brush” dan submenu dengan Caption ”Style” Langkah 2 Buka File Ubrush.h dan deklarasikan fungsi BersihkanCanvas pada Bagian Public void _fastcall BersihkanCanvas(); Selanjutnya deklarasikan fungsi BersihkanCanvas() pada File Ubrush.cpp sebagai berikut void _fastcall TForm1::BersihkanCanvas() { Canvas->Brush->Style = bsSolid; Canvas->Brush->Color = clWhite; Canvas->FillRect(Rect(0,0,ClientWidth, ClientHeight)); } //--------------------------------------------------------------------------Langkah 3 Isikan sintak berikut untuk event OnClick pada item ”Style” dari komponen MainMenu1 sebagai berikut //--------------------------------------------------------------------------void __fastcall TForm1::Style1Click(TObject *Sender) { BersihkanCanvas(); Canvas->TextOut(10,110, "bsClear"); Canvas->TextOut(120,110, "bsSolid"); Canvas->TextOut(240,110, "bsCrosh"); Canvas->TextOut(360,110, "bsBDiagonal"); Canvas->TextOut(10,250, "bsFDiagonal"); Canvas->TextOut(120,250, "bsDiagCross"); Canvas->TextOut(240,250, "bsHorizantal"); Canvas->TextOut(360,250, "bsVertical"); Canvas->Brush->Style = bsClear; Canvas->Rectangle(10,10,100,100); Canvas->Brush->Color = clRed; Canvas->Brush->Style = bsSolid; Canvas->Brush->Color = clBlue; Canvas->Rectangle(120, 10, 220, 100); Canvas->Brush->Style = bsCross; Canvas->Brush->Color = clGreen; Canvas->Rectangle(240, 10, 340, 100);

Bahan Ajar Grafika Komputer /Hal.

12

Canvas->Brush->Style = bsBDiagonal; Canvas->Brush->Color = clYellow; Canvas->Rectangle(360, 10, 460, 100); Canvas->Brush->Style = bsFDiagonal; Canvas->Brush->Color = clBlack; Canvas->Rectangle(10, 140, 100, 240); Canvas->Brush->Style = bsDiagCross; Canvas->Brush->Color = clBlue; Canvas->Rectangle(120, 140, 220, 240); Canvas->Brush->Style = bsHorizontal; Canvas->Brush->Color = clGreen; Canvas->Rectangle(240, 140, 340, 240); Canvas->Brush->Style = bsVertical; Canvas->Brush->Color = clRed; Canvas->Rectangle(360, 140, 460, 240); } Jalankan aplikasi pilih menu Style, akan mendapat hasil sebagai berikut

Bahan Ajar Grafika Komputer /Hal.

13

KOORDINAT SISTEM DAN LAYAR Koordinat Koordinat dapat diartinya sebagai tata keseimbangan yang membantu kita di dalam menentukan suatu kondisi dengan nilai dan batas dalam konteks geometri. Pada komputer grafik, ada 3 macam sistem koordinat yang harus kita perhatikan, yaitu 1. Koordinat Nyata 2. Koordinat Sistem 3. Koordinat Tampilan atau Layar 1. Koordinat Nyata (World Coordinat) Yang dimaksud dengan koordinat nyata adalah koordinat yang pada saat itu object bersangkutan berada. Dalam bahasa Inggris disebut real world coordinate untuk menghindari kerancuan dengan istilah world coordinate yang digunakan untuk GLOBUS. 2. Dimensi

Dalam penggunaan umum, dimensi berarti parameter atau pengukuran yang dibutuhkan untuk mendefinisikan sifat-sifat suatu objek—yaitu panjang, lebar, dan tinggi atau ukuran dan bentuk. Dalam matematika, dimensi adalah parameter yang dibutuhkan untuk menggambarkan posisi dan sifat-sifat objek dalam suatu ruang. Dalam konteks khusus, satuan ukur dapat pula disebut "dimensi"—meter atau inci dalam model geografi, atau biaya dan harga dalam model ekonomi. Sebagai contoh, untuk menggambarkan suatu titik pada bidang (misalnya sebuah kota pada peta) dibutuhkan dua parameter— lintang dan bujur. Dengan demikian, ruang bersangkutan dikatakan berdimensi dua, dan ruang itu disebut sebagai bersifat dua dimensi. Menggambarkan posisi pesawat terbang (relatif terhadap bumi) membutuhkan sebuah dimensi tambahan (ketinggian), maka posisi pesawat terbang tersebut dikatakan berada dalam ruang tiga dimensi (sering ditulis 3D). Jika waktu ditambahkan sebagai dimensi ke-4, "kecepatan" pesawat terbang tersebut dapat dihitung dengan membandingkan waktu pada dua sembarang posisi.

Bahan Ajar Grafika Komputer /Hal.

14

2. Sistem Koordinat Adalah suatu yang abstrak dan biasanya digunakan untuk perhitungan data yang hasilnya perlu ditampilkan kembali pada layar atau di atas kertas. Sistem koordinat sealau dikaitkan dengan dimensi, dimana 0D, 1 D, 2 D, 3 D, 4 D, 5 D, dimensi ke 0 dimensi ke 1 dimensi ke 2 dimensi ke 3 dimensi ke 4 dimensi ke 5, dan seterusnya

Sebuah titik secara umum sering disebut dimensi ke 0, garis dimensi ke 1, bidang dimensi ke 2, kubus dimensi ke 3, dan seterusnya. Untuk kebutuhan grafik umumnya kita menggunakan dimensi ke 3. Kita mempunyai sistem koordinat untuk 2 dimensi dan 3 dimensi yang dibedakan dengan jumlah sumbu koordinat yang dimiliki oleh masing-masing sistem. Sistem 2 Dimensi memiliki 2 sumbu koordinat, yaitu sumbu x dan sumbu y, sedangkan sistem koordinat 3 dimensi memiliki 3 buah sumbu koordinat, yaitu x, y dan z. y y

x Sistem koordinat 2D

z

x

Sistem Koordinat 3D

2.1 Sistem koordinat dua dimensi
Sistem koordinat Kartesius dalam dua dimensi umumnya didefinisikan dengan dua sumbu yang saling bertegak lurus antar satu dengan yang lain, yang keduanya terletak pada satu bidang (bidang xy). Sumbu horizontal diberi label x, dan sumbu vertikal diberi label y. Pada sistem koordinat tiga dimensi, ditambahkan sumbu yang lain yang sering diberi label z. Sumbu-sumbu tersebut ortogonal antar satu dengan yang lain. (Satu sumbu dengan sumbu lain bertegak lurus.)

Bahan Ajar Grafika Komputer /Hal.

15

Titik pertemuan antara kedua sumbu, titik asal, umumnya diberi label 0. Setiap sumbu juga mempunyai besaran panjang unit, dan setiap panjang tersebut diberi tanda dan ini membentuk semacam grid. Untuk mendeskripsikan suatu titik tertentu dalam sistem koordinat dua dimensi, nilai x ditulis (absis), lalu diikuti dengan nilai y (ordinat). Dengan demikian, format yang dipakai selalu (x,y) dan urutannya tidak dibalik-balik.

Gambar - Keempat kuadran sistem koordinat Kartesius. Panah yang ada pada sumbu berarti panjang sumbunya tak terhingga pada arah panah tersebut. Pilihan huruf-huruf didasari oleh konvensi, dimana huruf-huruf yang dekat akhir (seperti x dan y) digunakan untuk menandakan variabel dengan nilai yang tak diketahui, sedangkan huruf-huruf yang lebih dekat awal digunakan untuk menandakan nilai yang diketahui. Sebagai contoh, pada Gambar 3, titik P berada pada koordinat (3,5). Karena kedua sumbu bertegak lurus satu sama lain, bidang xy terbagi menjadi empat bagian yang disebut kuadran, yang pada Gambar 3 ditandai dengan angka I, II, III, dan IV. Menurut konvensi yang berlaku, keempat kuadran diurutkan mulai dari yang kanan atas (kuadran I), melingkar melawan arah jarum jam (lihat Gambar 3). Pada kuadran I, kedua koordinat (x dan y) bernilai positif. Pada kuadran II, koordinat x bernilai negatif dan koordinat y bernilai positif. Pada kuadran III, kedua koordinat bernilai negatif, dan pada kuadran IV, koordinat x bernilai positif dan y negatif (lihat tabel dibawah ini). Kuadran nilai x nilai y
Bahan Ajar Grafika Komputer /Hal.

16

I II III IV

>0 <0 <0 >0

>0 >0 <0 <0

3. Koordinat Layar Koordinat layar atau screen coordinat adalah koordinat yang dipakai untuk mengatur penampilan suatu objek pada layar, baik itu layar komputer maupun layar lainnya. Umumnya layar 2 dimensi mempunyai 2 sumbu koordinat, yaitu sumbu x dan y. Namun demikian ada yang berusaha untuk membuat layar 3 dimensi, walau kini masih dalam tahap penelitian dan belum ditemukan dipasaran bebas (Ingat istilah Hologram)

(0,0)

Y X

Perbedaan koordinat layar dengan sistem koordinat yang lain adalah posisi nilai 0 untuk sumbu x dan Y. Ada yang menempatkan sumbu (0,0) pada kiri atas dan ada juga yang meletakkan pada kiri bawah. Konversi Koordinat 1. Konversi dari koordinat Nyata ke Sistem Konversi dari koordinat nyata ke sistem dilakukan dengan memperhatikan dimensi dari sistem itu sendiri. Koordinat nyata mempunyai sistem 3 dimensi, sedangkan koordinat sistem ada 2 pilihan yaitu 2 dimensi dan 3 dimensi. Kita juga perlu memperhatikan adakah nilai titik pusat sumbu koordinat karena koordinat nyata kita belum tahu dimana letaknya.

Bahan Ajar Grafika Komputer /Hal.

17

Real Worl

Koordinat sistem (1)

Koordinat Sistem (2)

Koordinat Sistem (3)

Contoh di atas menunjukkan bahwa ada banyak kemungkinan untuk konversi nilai koordinat nyata ke koordinat sistem. Masing-masing posisi memiliki kelemahan dan kelebihan untuk proses selanjutnya. Dengan demikian untuk menentukan nilai sistem koordinat juga perlu mempertimbangkan bagaimana langkah selanjutnya. Jika kita sudah menentukan nilainya, langkah selanjutnya adalah memproses nilai tersebut untuk sistem koordinat. 2. Konversi dari koordinat sistem ke layar Masalah yang penting untuk diperhatikan di sini adalah perbedaan nilai koordinat antar koordinat sistem dengan koordinat layar, di mana koordinat sistem bisa memiliki nilai negatif, sedangkan koordinat layar hanya mengenal nilai positif. Kalau pada koordinat sistem ada salah satu sumbu yang bernilai negatif maka data tersebut (pixel) tidak akan tampil pada layar. Dengan kata lain, pixel tampil di luar layar. Lihat contoh pada gambar dibawah ini :

Bahan Ajar Grafika Komputer /Hal.

18

Koordinat Sistem (3)

Koordinat Layar

Pada contoh di depan, gambar yang ditampilkan di layar muncul secara terbalik karena sistem nilai antara koordinat sistem dan layar berbeda. Agar gambar dapat tampil dengan sempurna, maka jika ada nilai sumbu koordinat yang negatif, nilai tersebut harus diubah menjadi positif terlebih dahulu dengan menggeser semua data yang terkait yang sama sementara nilai sumbu Y dibalik. Nilai koordinat y1 ditukar dengan y2 sedangkan x1 dan x2 tetap seperti semula. Untuk mengkonversi koordinat sistem x dan y ke koordinat dilakukan perhitungan: Scr_x = x + midx, dimana midx = max_x_screen/2 Scr_y = midy - y, dimana midy = max_y_screen/2 Contoh : Untuk layar dengan ukuran 400 x 640, maka Max_x_screen = 400 dan Max_y_screen = 640 1. Terdapat segitiga dengan sistem koordinat titik A(-10,-10), B(80,-10), C(35, 70), konversikan ke koordinat layar

C

A Solusi

B

Bahan Ajar Grafika Komputer /Hal.

19

Scr_x = x + midx, dimana midx = max_x_screen/2 Scr_y = midy - y, dimana midy = max_y_screen/2 Sehingga midx = 400/2 = 200; midy = 640/2 = 320 A’x = x + midx = -10 + 200 = 190 A’y = midy –y = 320 –(-10) = 330 B’x = x + midx = 80 + 200 = 280 B’y = midy –y = 320 –(-10) = 330 C’x = x + midx = 35 + 200 = 235 C’y = midy –y = 320 –(70) = 250 Hasil : A’(190, 330) B’(280,330) C’(235, 250) (0,0)

midy

midx LATIHAN

(400,640)

Bahan Ajar Grafika Komputer /Hal.

20

PEMROGRAMAN GARIS Titik dan Garis Pembentukan titik dilakukan dengan mengkonversi suatu posisi koordinat dengan program aplikasi ke dalam suatu operasi tertentu menggunakan peralatan output. Garis dibuat dengan menentukan posisi titik diantara titik awal dan akhir dari suatu garis. Kemudian , peralatan output membuat garis sesuai titik-titik tersebut. Untuk peralatan analog, seperti plotter dan random –scan display, garis lurus dapat dihasilkan dengan halus. Sedangkan pada peralatan digital, garis lurus dihasilkan dengan menetapkan titik diskrit antara titik awal dan akhir. Posisi titik diskrit sepanjang garis lurus dapat diperhitungkan dari persamaan garis tersebut. Perhitungan titik yang menghasilkan nilai pecahan, dikonversi menjadi posisi pixel. Pembulatan nilai koordinat ke integer menghasilkan garis yang ditampilkan pada layar menyerupai gambar tangga, Kehalusan tampilan pada layar akan tergantung pada resolusi yang digunakan. Resolusi dapat diartikan sebagai kepadatan pixel yang terdapat pada suatu area tertentu. Resolusi 400 x 640 berarti pada layar komputer terdapat sebanyak 400 pixel per layar dengan masing-masing baris mempunyi 640 pixel. Resolusi juga dapat dibedakan menjadi kasar, medium dan halus. Resolusi berpengaruh terhadap baik tidaknya tampilan gambar grafik pada layar komputer. Layar dengan resolusi tinggi (Halus) akan menghasilkan gambar yang bagus pula. Sebagai ilustrasi, lihat gambar berikut. Low Resolusion High Resolusion

Pada gambar diatas terlihat bahwa tampilan garis pada layar komputer tidak sesempurna garis di atas kertas.

Bahan Ajar Grafika Komputer /Hal.

21

Garis dikaterorikan menjadi 4 macam, yaitu horisontal, vertikal, diagonal dan garis bebas. Untuk menampilkan atau menggambar garis layar dibutuhkan minimal 2 titik (endpoint), yaitu titik awal dan akhir. Awal garis kita mulai dengan titik atau pixel pertama, P1, diikuti dengan titik kedua, P2. Untuk mendapatkan titik-titik selanjutnya sampai ke Pn, perlu dilakukan inkrementasi atas nilai koordinat sumbu X dan Y pada titik sebelumnya. Perhitungan inkrementasi untuk masing-masing sumbu adalah berbeda. Garis vertikal, horisontal, diagonal, dan bebas masing-masing mempunyai ciri khas sendiri Tabel Inkrementasi sumbu Jenis Sumbu-X Horisontal Gerak(X=X+1) Vertikal Konstan Diagonal Gerak(X=X+1) Bebas Gerak(X=X+n) n dan m adalah nilai inkrementasi 1. Garis Horisontal Garis horisontal adalah garis yang membentang secara paralel dengan sumbu-X dengan asumsi titik P1 pada koordinat x1 lebih kecil daripada x2 dari P2, sedangkan y1 dan y2 konstan. Algoritma 1. Menentukan titik awal (P1) dan titik akhir (P2) 2. Periksa posisi sumbu (koordinat) : Jika titik awal < titik akhir, lakukan inkrementasi sumbu-x dari titik awal sampai titik akhir. Jika tidak, maka Lakukan dekrementasi sumbu-X dari titik awal sampai titik akhir 3. Tampilkan garis menggunakan nilai parameter koordinat yang telah dihitung. Program gambar garis harisontal void __fastcall TForm1::Button1Click(TObject *Sender) { x1=100; y1=100; x2=200; y2=100; int i; if (x1<x2) for (i=x1;i<=x2;i++) Canvas->Pixels[i][y1]=clRed; else for (i=x1;i>=x2;i--) Canvas->Pixels[i][y1]=clRed; } Sumbu-Y Konstan Gerak(Y=Y+1) Gerak(Y=Y+1) Gerak(Y=Y+m)

Bahan Ajar Grafika Komputer /Hal.

22

2. Garis Vertikal Garis vertikal adalah garis yang membentang paralel dengan sumbu-Y dengan asumsi kita mulai dengan titik P1 pada koordinat Y1 lebih kecil dari pada Y2 dari P2, sedangkan x1 dan x2 adalah konstan Algoritma: 1. Menentukan titik awal (P1) dan titik akhir (P2) 2. Periksa posisi sumbu (koordinat) : Jika titik akhir < titik awal, lakukan inkrementasi sumbu-y dari titik awal sampai titik akhir. Jika tidak, maka Lakukan dekrementasi sumbu-y dari titik awal sampai titik akhir 3. Tampilkan garis menggunakan nilai parameter koordinat yang telah dihitung. Program gambar garis vertikal void __fastcall TForm1::Button1Click(TObject *Sender) { x1=200; y1=100; x2=200; y2=200; int i; if (y1<y2) for (i=y1;i<=y2;i++) Canvas->Pixels[x1][i]=clBlue; else for (i=y1;i>=y2;i--) Canvas->Pixels[x1][i]=clBlue; } 3. Garis Diagonal Garis diagonal adalah garis yang membentang parale dengan 45 derajat dari sumbu-x atau sumbu-y dengan asumsi kita mulai dengan titik P1 dengan koordinat x1 dan y1 lebih kecil dari pada y1 dan y2 dari P2 atau sebaliknya Algoritma: 1. Menentukan titik awal (P1) dan titik akhir (P2) 2. Periksa posisi sumbu (koordinat) : Jika titik akhir < titik awal, lakukan inkrementasi sumbu-x dan sumbu-y dari titik awal sampai titik akhir. Jika tidak, maka Lakukan dekrementasi sumbu-x dan sumbu-y dari titik awal sampai titik akhir 3. Tampilkan garis menggunakan nilai parameter koordinat yang telah dihitung. Program gambar garis vertikal Program garis diagonal void __fastcall TForm1::Button1Click(TObject *Sender) { x1=50; y1=100; x2=200; y2=200; int i; if ((x1<x2) && (y1<y2)) 23

Bahan Ajar Grafika Komputer /Hal.

{ do { x1++; y1++; Canvas->Pixels[x1][y1]=clBlue; } while ((x1<=x2)||(y1<=y2)); } else {do { x1--; y1--; Canvas->Pixels[x1][y1]=clBlue; } while ((x1>=x2)||(y1>=y2)); } } //--------------------------------------------------------------------------4. Garis Bebas Garis bebas berbeda dengan garis horisontal, vertikal dan diagonal yang telah kita kenal. Untuk penayangannya pada layar tidak begitu sulit dan bentuk garis yang ditampilkan cukup sempurna. Garis bebas mempunyai ciri, yaitu antara 2 titik, P1 dan P2, selalu membentuk suatu sudut yang besarnya sangat bervariasi. Sudut ini lah yang menentukan kemiringan suatu garis atau disebut juga gradasi. Pengambaran garis bebas salah satunya adalah dengan menggunakan algoritma Digital Differential Analyzer(DDA) adalah algoritma pembentukan garis berdasarkan berhitungan dx maupun dy, menggunakan rumus dy = m.dx. Algoritma DDA 1. 2. 3. Tentukan koordinat awal garis (x0,y0) tentukan koordinat akhir garis (x1,y1) Hitung jarak mendatar ke 2 titik (dx) Dx=x1-x0 4. Hitung jarak mendatar ke 2 titik (dy) Dy=y1-y0 5. Tentukan faktor pembagi (mencari yg lebih panjang) Apakah dx>dy,bila ya Step=dx Bila tidak Step=dy 6. Hitung faktor penambah ke koordinat mendatar dan vertikal titik berikut (x_tambah,y_tambah) X_tambah=dx/step Y_tambah=dy/step 7. 8. 9. Buat loop mulai titik ke 1 sampai titik ke step For k=1 to step Hitung koodinat titik berikutnya X=x+x_tambah Y=y+y_tambah gambar pikxel pada koordinat (x,y)

Bahan Ajar Grafika Komputer /Hal.

24

Catatan : koordinat x,y harus bulat (integer), sehingga hasil dari perhitungan diatas harus diinteger-kan 10. Ulangi langkah ke 7, dan seterusnya sampai titik ke step

2.1.1 Program untuk menciptakan garis dari titik dengan algoritma DDA x0=10;y0=10; x1=100;y1=200; 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 ; int xx,yy; for (k=0;k<step;k++) { x+=x_tambah; y+=y_tambah; Canvas->Pixels[int(x)][int(y)]=clRed; }

Transformasi 2D

Bahan Ajar Grafika Komputer /Hal.

25

Transformasi Gambar dan grafik dapat dibuat berdasarkan prosedur dan atribut output primitif. Dalam aplikasi grafik diperlukan perubahan bentuk, ukuran dan posisi suatu gambar yang disebut dengan manipulasi. Perubahan gambar dengan mengubah koordinat dan ukuran suatu objek disebut transformasi geometri. Kata transformasi berarti berubah bentuk. Transformasi diperlukan untuk  mengubah (transform) posisi suatu objek dari suatu tempat asal ke posisi elemen grafik.  Memindahkan suatu objek dari suatu tempat ke tempat lain  Memutar posisi suatu objek pada titik pusat  Mengubah ukuran suat objek baik memperkecil maupun memperbesar dari ukuran aslinya.  Menarik objek ke samping kiri atau kanan dan bahkan atas bawah. Transformasi dasar yaitu translasi, skala dan rotasi. Selain transformasi tersebut , masih ada transformasi lain yang biasa digunakan untuk mengubah suatu objek , seperti refleksi, streching/shear. 1. Translasi Translasi adalah transformasi terhadap suatu objek dengan menggesernya dari suatu posisi ke posisi lain. C’ C ty tx A B A’ B’

Translasi dilakukan dengan penambahan translasi pada sumbu suatu titik koordinat dengan translasi vector atau shift vector, yaitu (tx, ty) dimana tx adalah translasi vector menurut sumbu x, sedangkan ty adalah translasi vektor menurut sumbu y. Koordinat baru titik yang ditranslasi dapat diperoleh dengan menggunakan rumus x’ = x + tx y’ = y + ty dimana (x,y) adalah koordinat asal suatu objek dan (x’, y’) adalah koordinat baru objek tersebut setelah di translasi. Translasi adalah transformasi dengan bentuk yang tetap, memindahkan object apa adanya. Dengan demikian, setiap titik dari object

Bahan Ajar Grafika Komputer /Hal.

26

akan ditranslasi dengan besaran yang sama. Titik yang ditranslasi akan dipindahkan ke lokasi lain menurut garis lurus. P2(x, y+ty)

P(x,y) P3(x+(-tx),y)

P1(x+tx, y)

P4(x, y-ty)

Contoh translasi Untuk menggambarkan translasi suatu objek yang berupa segitiga dengan sistem koordinat A(10, 10), B(30, 10) dan C(10, 30) dengan translasi vektor (10, 20), pertama-tama dihitung hasil translasi satu demi satu. Penyelesaian Titik Ax’A = xA + tx = 10 + 10 = 20 y'A = yA + ty = 10 + 20 = 30 Hasil translasi titik A’(20, 30) Titik B x’B = xB + tx = 30 + 10 = 40 y'B = yB + ty = 10 + 20 = 30 Hasil translasi titik B’(40, 30) Titik C x’C = xC + tx = 10 + 10 = 20 y'C = yC + ty = 30 + 20 = 50 Hasil translasi titik C’(20, 50) Dengan demikian hasil translasi merupakan segitiga dengan koordinat A’(20, 30), B’(40, 30), C’(20, 50) Latihan : 1. Coba Gambarkan proses tranlasi tersebut 2. Geser objek ABC ke kanan 30 pixel 3. Geser objek ABC ke bawah 10 pixel

Bahan Ajar Grafika Komputer /Hal.

27

4. Terdapat segiempat ABCD dengan koodinat sebagai berikut A(40, 100), B(70, 100), C(70, 70), D(40, 70) a. Translasikan objek ABCD dengan translasi vektor (15, 30) b. Geserlah objek ABCD ke kiri 40 pixel c. Gambarkan Objek ABCD dan kedua proses transalasi A dan B

Kadang-kadang transformasi dinyataan dengan bentuk matriks, sehingga matriks transformasi untuk translasi dapat dinyatakan sebagai berikut  x1  p=    x 2 P’ = P + T  x '1  p' =    x '2  tx  T=    tx 

Dengan demikian translasi dua dimensi dapat ditulis dalam bentuk matriks

2. SKALA Skala dapat diartikan sebagai suatu peubahan terhadap objek tertentu yang mengakibatkan berubahnya ukuran obyek secara keseluruhan.

Perubahan ukuran suatu objek menghasilkan

koordinat baru. Koordinat baru

diperoleh dengan melakukan perkalian koordinat dengan skaling faktor , yaitu (sx, sy), dimana sx adalah scaling factor menurut sumbu x, sedangkan sy adalah scaling

Bahan Ajar Grafika Komputer /Hal.

28

faktor menurut sumbu y. Koordinat baru titik yang diskala dapat diperoleh dengan rumus x’ = x . Sx y’ = y . Sy dimana (x, y) adalah koordinat asal suatu objek dan (x’, y’) adalah koordinat setelah diskala. Scaling factor sx dan sy dapat diberikan sembarang nilai positif. Nilai lebih dari 1 menyebabkan objek diperbesar, sebaliknya bila nilai lebih kecil dari 1, maka objek akan diperkecil. Bila sx dan sy mempunyai nilai sama, maka skala tersebut uniform scaling. Nilai yang tidak sama dari sx dan sy menghasilkan differential scaling, yang biasa digunakan pada program aplikasi. Contoh skala Segitiga A(10,20),B(50,20),dan C (10,100) diperbesar mendatar 2 kali dan vertikal 0,5 kali.Hitung hasil transformasi dan gambarkan hasil. Penyelesaian : Sx=2, Sy=0,5 Xa’=xa*Sx=10*2=20 Xb’=xb*Sx=50*2=100 Xc’ =xc*Sx=10*2=20 ya’=ya*Sy=20*0,5=10 yb’=yb*Sy=20*0,5=10 yc’=yc*Sy=100*0,5=50

Sehingga A’(20,10),B’(100,10),C’(20,50)

Gambar 100 90 80 70 60 50 40 30 20 10

asal

hasil

10 20 30 40 50 60 70 80 90 100 110

Bahan Ajar Grafika Komputer /Hal.

29

3. ROTASI Rotasi dapat diartikan sebagai aksi perputaran suatu objek sebuah sudut θ dari posisi asal pada titik rotasi (r = Rotasion point). Yang berputar adalah titik objek tersebut. Rotasi dua dimensi pada suatu objek akan memindahkan objek tersebut menurut garis melingkar. Pada bidang xy. Untuk melakukan rotasi diperlukan sudut rotasi θ dan pivot point (xp, yp) atau rotation point dimana objek di rotasi. Nilai positif dari sudut rotasi menentukan arah rotasi berlawanan dengan jarum jam, dan sebaliknya nilai negatif akan memutar objek searah jarum jam. persamaan-persamaan transformasi dalam teori grafika komputer diasumsikan titik pusat di 0,0 Persamaan X’=x*cos θ -y*sin θ Y’=x*sin θ + y*cos θ Dengan θ:adalah sudut putar Matriks Cos θ sin θ R= -sin θ cos θ 0 0 0 0 1

Contoh Segitiga ABC diatas diputar 90o,hitung koordinat hasil dan gambarkan! Segitiga A(10,20),B(50,20),dan C (10,100) Penyelesaian θ=90o maka, xa’=xa*cos 90-ya*sin 90=10*0-20*1=-20 ya’=xa*sin 90+ya*cos 90=10*1+20*0=10 xb’=xb*cos 90-yb*sin 90=50*0-20*1=-20 yb’=xb*sin 90+yb*cos 90=50*1+20*0=50 xc ’=xc *cos 90-yc*sin 90=10*0-100*1=-100 yc’=xc*sin 90+yc*cos 90=10*1+100*0=10 jadi A’(-20,10),B’(-20,50),C’(-100,10) Gambar 100 90 80 70 60

asal hasil
Bahan Ajar Grafika Komputer /Hal.

30

50 40 30 20 10 -100 -90 -80 -70 -60 -50 -40 -30 -20 -10 0 10 20 30 40 50 Latihan 1. Terdapat segiempat A(10,10),B(100,10),C(100,100),dan D(10,100) diperbesar 2x hitung dan gambar hasil! 2. terdapat garis A(0,0) dan B(100,100) diputar –90o.hitung dan gambar hasil !

Aplikasi dengan Proses Transformasi 1. Translasi dan Skala Rancang Form Sebagai Berikut

Kode Perintah dalam file Header public: int Tx, Ty; float Sx, Sy; __fastcall TForm1(TComponent* Owner); Kode Perintah dalam File Unit //--------------------------------------------------------------------------#include <vcl.h> #pragma hdrstop // User declarations int x1, y1, x2, y2;

Bahan Ajar Grafika Komputer /Hal.

31

#include "UtranSkal.h" //--------------------------------------------------------------------------#pragma package(smart_init) #pragma resource "*.dfm" TForm1 *Form1; //--------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { } //--------------------------------------------------------------------------void __fastcall TForm1::ButtonTranslasiClick(TObject *Sender) { //PaintBox1->Canvas->Pen->Color = clWhite; //PaintBox1->Canvas->Brush->Color = clWhite; //PaintBox1->Canvas->Rectangle(x1, y1, x2, y2); int Tx; Tx = StrToInt(EditTx->Text); Ty = StrToInt(EditTy->Text); x1 = x1 + Tx; y1 = y1 + Ty; x2 = x2 + Tx; y2 = y2 + Ty; PaintBox1->Canvas->Pen->Color = clRed; PaintBox1->Canvas->Brush->Color = clGreen; PaintBox1->Canvas->Rectangle(x1, y1, x2, y2); } //--------------------------------------------------------------------------void __fastcall TForm1::FormPaint(TObject *Sender) { x1 = 10; x2 = 40; y1 = 10; y2 = 60; PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height); PaintBox1->Canvas->Rectangle(x1, y1, x2, y2);

Bahan Ajar Grafika Komputer /Hal.

32

} //--------------------------------------------------------------------------void __fastcall TForm1::ButtonSkalaClick(TObject *Sender) { PaintBox1->Canvas->Pen->Color = clWhite; PaintBox1->Canvas->Brush->Color = clWhite; PaintBox1->Canvas->Rectangle(x1, y1, x2, y2); Sx = StrToFloat(EditSx->Text); Sy = StrToFloat(EditSy->Text); x1 = int(x1 * Sx); y1=int(y1*Sy); x2 = int(x2*Sx); y2= int(y2*Sy); //PaintBox1->Canvas->Brush->Color = clYellow; PaintBox1->Canvas->Pen->Color = clBlack; PaintBox1->Canvas->Rectangle(x1, y1, x2, y2); } //--------------------------------------------------------------------------void __fastcall TForm1::ButtonGambarClick(TObject *Sender) { x1 = 10; x2 = 40; y1 = 10; y2 = 60; PaintBox1->Canvas->Pen->Color = clYellow; PaintBox1->Canvas->Brush->Color = clYellow; PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height); PaintBox1->Canvas->Pen->Color = clRed; PaintBox1->Canvas->Rectangle(0, 0, PaintBox1->Width, PaintBox1->Height); PaintBox1->Canvas->Ellipse(x1, y1, x2, y2); } //--------------------------------------------------------------------------void __fastcall TForm1::ButtonKeluarClick(TObject *Sender) { Close(); } //--------------------------------------------------------------------------Jika Apilkasi dijalankan

Bahan Ajar Grafika Komputer /Hal.

33

Bahan Ajar Grafika Komputer /Hal.

34

Pertemuan 7 Transformasi 2D Skala atau rotasi menggunakan sembarang titik pusat Seperti telah dijelaskan sebelumnya, skala dan rotasi menggunakan titik (0,0) sebagai titik pusat transformasi. Agar kita dapat menggunakan sembarang titik pusat (Xt, Yt) sebagai titik pusat transformasi dilakukan dengan urutan: A. Cara 1 1. Translasi (-Xt, -Yt) X’ = x + tx ; tx = -Xt 2. Rotasi/Skala 3. Translasi (Xt, Yt) Latihan Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut sebesar 60o dengan titik pusat (3,2) y D 2 1 A 1 Jawab : A = (1,1), B = (3,1), C = (3,2), D=(1,2) Karena objek pada titik pusat (3,2) maka sebelum dilakukan pemutaran, objek harus ditranslasikan sebesar (-3,-2) sehingga titik pusat (3,2) berimpit dengan titik pusat (0,0), setelah itu objek diputar sebesar 60o dan kemudian hasil pemutaran ditranslasikan sebesar(3,2) 1. Translasi sebesar (-3,-2) A = (1-3,1-2) = (-2, -1) B = (3-3, 1-2) = (0, -1) C = (3-3, 2-2) = (0, 0) D = (1-3, 2-2) =(-2, 0) 2. Titik A, B, C, D dirotasikan sebesar 60o sehingga menghasilkan: X’=x*cos θ -y*sin θ Y’=x*sin θ + y*cos θ Xa’ = (-2)*cos 60 –(-1) *sin 60 = 1* 0.5 – 1 * 0.866 = -0.134 Ya’= (-2)*sin 60 + (-1)*cos 60 = -2.232 Xb’ = (0)*cos 60 –(-1) *sin 60 = 0.8660
Bahan Ajar Grafika Komputer /Hal.

C B 3 x

35

Yb’= (0)*sin 60 + (-1)*cos 60 = -0.500 Xc’ = (0)*cos 60 –(0) *sin 60 = 0.0000 Yc’= (0)*sin 60 + (0)*cos 60 = 0.0000 Xa’ = (-2)*cos 60 –(0) *sin 60 = -1.000 Ya’= (-2)*sin 60 + (0)*cos 60 = -1.732 3. Titik A”, B”, C”, D” ditranslasikan sebesar (3,2) sehingga menghasilkan A”=(2.866, -0.232) B”=(3.866, 1.500) C”=(3.000, 2.000) D”=(2.000, 0.268) Hasil akhir dari operasi tersebut dapat dilihat pada gambar dibawah y D 2 1 A D” 1 A” 3 x C C” B B”

B. Cara 2 1. Rotasi/Skala, Misal : A’ 2. Hitung dx dan dy , 3. Misal Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut sebesar 60o dengan titik pusat (3,2) y D 2 1 A 1 Jawab Aplikasi B 3 x C Translasi ke dx, dy dx = Xt-XA’ dy = Yt-YA’

Bahan Ajar Grafika Komputer /Hal.

36

Kode program Jam.h //--------------------------------------------------------------------------#ifndef jam1H #define jam1H //--------------------------------------------------------------------------#include <Classes.hpp> #include <Controls.hpp> #include <StdCtrls.hpp> #include <Forms.hpp> #include <ExtCtrls.hpp> //--------------------------------------------------------------------------class TForm1 : public TForm { __published: // IDE-managed Components TPaintBox *PaintBox1; TTimer *Timer1; TTimer *Timer2; void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall Timer2Timer(TObject *Sender); private: // User declarations public: // User declarations __fastcall TForm1(TComponent* Owner); float x1, x2, y1, y2, x,y; float xt1, xt2, yt1, yt2, sudut; float xs1, xs2, ys1, ys2, dx, dy ; float sudut_rad; }; //--------------------------------------------------------------------------extern PACKAGE TForm1 *Form1; //---------------------------------------------------------------------------

Bahan Ajar Grafika Komputer /Hal.

37

#endif Jam.cpp //--------------------------------------------------------------------------#include <vcl.h> #include <math.h> #pragma hdrstop #include "jam1.h" //--------------------------------------------------------------------------#pragma package(smart_init) #pragma resource "*.dfm" TForm1 *Form1; //--------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { } //--------------------------------------------------------------------------void __fastcall TForm1::PaintBox1Paint(TObject *Sender) { PaintBox1->Canvas->Brush->Color = RGB (100, 90, 110); PaintBox1->Canvas->Ellipse(0,0,400,400); PaintBox1->Canvas->MoveTo(200,0); PaintBox1->Canvas->Pen->Width = 3; PaintBox1->Canvas->LineTo(200,25); PaintBox1->Canvas->MoveTo(200,400); PaintBox1->Canvas->LineTo(200,375); PaintBox1->Canvas->MoveTo(0,200); PaintBox1->Canvas->LineTo(25,200); PaintBox1->Canvas->MoveTo(400,200); PaintBox1->Canvas->LineTo(375,200); PaintBox1->Canvas->MoveTo(200,200); PaintBox1->Canvas->LineTo(200,70); PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10); PaintBox1->Canvas->Ellipse(196,196,204,204); x1=200; y1=200; x2=200; y2=70; x=200; y =70; sudut = 0; } //--------------------------------------------------------------------------void __fastcall TForm1::Timer2Timer(TObject *Sender) { PaintBox1->Canvas->Pen->Width = 4; PaintBox1->Canvas->Pen->Color = RGB (100, 90, 110); PaintBox1->Canvas->MoveTo(x1,y1); PaintBox1->Canvas->LineTo(x2,y2); PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10); PaintBox1->Canvas->Ellipse(196,196,204,204); sudut=-25; xs1=x1 *cos(sudut)-y1*sin(sudut); ys1=x1 *sin(sudut)+y1*cos(sudut); xs2=x2 *cos(sudut)-y2*sin(sudut); ys2=x2 *sin(sudut)+y2*cos(sudut); dx = x1-xs1; 38

Bahan Ajar Grafika Komputer /Hal.

dy = y1-ys1; x1= xs1 + dx; y1= ys1 + dy; x2 =xs2 + dx; y2 = ys2 + dy; PaintBox1->Canvas->Pen->Width = 3; PaintBox1->Canvas->Pen->Color = RGB (0, 0,0); PaintBox1->Canvas->MoveTo(x1,y1); PaintBox1->Canvas->LineTo(x2,y2); PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10); PaintBox1->Canvas->Ellipse(196,196,204,204); } //--------------------------------------------------------------------------Hasil

Transformasi 2D

Bahan Ajar Grafika Komputer /Hal.

39

Skala atau rotasi menggunakan sembarang titik pusat Seperti telah dijelaskan sebelumnya, skala dan rotasi menggunakan titik (0,0) sebagai titik pusat transformasi. Agar kita dapat menggunakan sembarang titik pusat (Xt, Yt) sebagai titik pusat transformasi dilakukan dengan urutan: A. Cara 1 4. Translasi (-Xt, -Yt) X’ = x + tx ; tx = -Xt 5. Rotasi/Skala 6. Translasi (Xt, Yt) Latihan Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut sebesar 60o dengan titik pusat (3,2) y D 2 1 A 1 Jawab : A = (1,1), B = (3,1), C = (3,2), D=(1,2) Karena objek pada titik pusat (3,2) maka sebelum dilakukan pemutaran, objek harus ditranslasikan sebesar (-3,-2) sehingga titik pusat (3,2) berimpit dengan titik pusat (0,0), setelah itu objek diputar sebesar 60o dan kemudian hasil pemutaran ditranslasikan sebesar(3,2) 4. Translasi sebesar (-3,-2) A = (1-3,1-2) = (-2, -1) B = (3-3, 1-2) = (0, -1) C = (3-3, 2-2) = (0, 0) D = (1-3, 2-2) =(-2, 0) 5. Titik A, B, C, D dirotasikan sebesar 60o sehingga menghasilkan: X’=x*cos θ -y*sin θ Y’=x*sin θ + y*cos θ Xa’ = (-2)*cos 60 –(-1) *sin 60 = 1* 0.5 – 1 * 0.866 = -0.134 Ya’= (-2)*sin 60 + (-1)*cos 60 = -2.232 Xb’ = (0)*cos 60 –(-1) *sin 60 = 0.8660 Yb’= (0)*sin 60 + (-1)*cos 60 = -0.500 Xc’ = (0)*cos 60 –(0) *sin 60 = 0.0000 Yc’= (0)*sin 60 + (0)*cos 60 = 0.0000
Bahan Ajar Grafika Komputer /Hal.

C B 3 x

40

Xa’ = (-2)*cos 60 –(0) *sin 60 = -1.000 Ya’= (-2)*sin 60 + (0)*cos 60 = -1.732 6. Titik A”, B”, C”, D” ditranslasikan sebesar (3,2) sehingga menghasilkan A”=(2.866, -0.232) B”=(3.866, 1.500) C”=(3.000, 2.000) D”=(2.000, 0.268) Hasil akhir dari operasi tersebut dapat dilihat pada gambar dibawah y D 2 1 A D” 1 B. Cara 2 4. Rotasi/Skala, Misal : A’ 5. Hitung dx dan dy , 6. Misal Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut sebesar 60o dengan titik pusat (3,2) y D 2 1 A 1 Jawab Aplikasi B 3 x C Translasi ke dx, dy dx = Xt-XA’ dy = Yt-YA’ A” 3 x C C” B B”

Bahan Ajar Grafika Komputer /Hal.

41

Kode program Jam.h //--------------------------------------------------------------------------#ifndef jam1H #define jam1H //--------------------------------------------------------------------------#include <Classes.hpp> #include <Controls.hpp> #include <StdCtrls.hpp> #include <Forms.hpp> #include <ExtCtrls.hpp> //--------------------------------------------------------------------------class TForm1 : public TForm { __published: // IDE-managed Components TPaintBox *PaintBox1; TTimer *Timer1; TTimer *Timer2; void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall Timer2Timer(TObject *Sender); private: public: // User declarations // User declarations

__fastcall TForm1(TComponent* Owner);

Bahan Ajar Grafika Komputer /Hal.

42

float x1, x2, y1, y2, x,y; float xt1, xt2, yt1, yt2, sudut; float xs1, xs2, ys1, ys2, dx, dy ; float sudut_rad; }; //--------------------------------------------------------------------------extern PACKAGE TForm1 *Form1; //--------------------------------------------------------------------------#endif Jam.cpp //--------------------------------------------------------------------------#include <vcl.h> #include <math.h> #pragma hdrstop #include "jam1.h" //--------------------------------------------------------------------------#pragma package(smart_init) #pragma resource "*.dfm" TForm1 *Form1; //--------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { } //--------------------------------------------------------------------------void __fastcall TForm1::PaintBox1Paint(TObject *Sender) { PaintBox1->Canvas->Brush->Color = RGB (100, 90, 110); PaintBox1->Canvas->Ellipse(0,0,400,400); PaintBox1->Canvas->MoveTo(200,0); PaintBox1->Canvas->Pen->Width = 3; PaintBox1->Canvas->LineTo(200,25); PaintBox1->Canvas->MoveTo(200,400); PaintBox1->Canvas->LineTo(200,375); PaintBox1->Canvas->MoveTo(0,200); PaintBox1->Canvas->LineTo(25,200);

Bahan Ajar Grafika Komputer /Hal.

43

PaintBox1->Canvas->MoveTo(400,200); PaintBox1->Canvas->LineTo(375,200); PaintBox1->Canvas->MoveTo(200,200); PaintBox1->Canvas->LineTo(200,70); PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10); PaintBox1->Canvas->Ellipse(196,196,204,204); x1=200; y1=200; x2=200; y2=70; x=200; y =70; sudut = 0; } //--------------------------------------------------------------------------void __fastcall TForm1::Timer2Timer(TObject *Sender) { PaintBox1->Canvas->Pen->Width = 4; PaintBox1->Canvas->Pen->Color = RGB (100, 90, 110); PaintBox1->Canvas->MoveTo(x1,y1); PaintBox1->Canvas->LineTo(x2,y2); PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10); PaintBox1->Canvas->Ellipse(196,196,204,204); sudut=-25; xs1=x1 *cos(sudut)-y1*sin(sudut); ys1=x1 *sin(sudut)+y1*cos(sudut); xs2=x2 *cos(sudut)-y2*sin(sudut); ys2=x2 *sin(sudut)+y2*cos(sudut); dx = x1-xs1; dy = y1-ys1; x1= xs1 + dx; y1= ys1 + dy; x2 =xs2 + dx; y2 = ys2 + dy; PaintBox1->Canvas->Pen->Width = 3; PaintBox1->Canvas->Pen->Color = RGB (0, 0,0); PaintBox1->Canvas->MoveTo(x1,y1); PaintBox1->Canvas->LineTo(x2,y2); PaintBox1->Canvas->Brush->Color = RGB (100, 190, 10); PaintBox1->Canvas->Ellipse(196,196,204,204); }

Bahan Ajar Grafika Komputer /Hal.

44

//--------------------------------------------------------------------------Hasil

ANIMASI Animasi atau gambar bergerak, merupakan salah satu bagian dari grafika komputer. Animasi dapat digunakan untuk menarik perhatian pemakai komputer pada bagian tertentu di layar, menvisualisasi cara kerja suatu alat bantu atau mekanisme tertentu, menampilkan keluaran program dengan gambar-gambar yang menarik dibanding hanya sederet angka, serta tak ketinggalan pula untuk program-program permainan. Teknik Animasi 1. inbetweening Teknik animasi inbetweening merupakan teknik yang mudah untuk dipelajari. Ide dasar dari teknik ini adalah dengan menentukan posisi awal dan posisi akhir dari objek, dan kemudian menghitung posisi objek yang baru, menghapus pada posisi semula dan menggambar objek pada posisi yang baru, sampai objek berada pada posisi akhir yang dituju. Contoh Hiu Rancangan

Bahan Ajar Grafika Komputer /Hal.

45

Hiu.H //--------------------------------------------------------------------------#ifndef sharkH #define sharkH //--------------------------------------------------------------------------#include <Classes.hpp> #include <Controls.hpp> #include <StdCtrls.hpp> #include <Forms.hpp> #include <ExtCtrls.hpp> //--------------------------------------------------------------------------class TForm1 : public TForm { __published: // IDE-managed Components TPaintBox *PaintBox1; TTimer *Timer1; TTimer *Timer2; void __fastcall PaintBox1Paint(TObject *Sender); void __fastcall Timer1Timer(TObject *Sender); void __fastcall Timer2Timer(TObject *Sender); private: public: // User declarations // User declarations

__fastcall TForm1(TComponent* Owner); int x1, y1, x2,y2,x3,y3; int xk1,yk1, xk2, yk2, xk3, yk3, xk4, yk4; int xl1, yl1, xl2, yl2, xl3, yl3; int xg1, yg1, xg2, yg2;

Bahan Ajar Grafika Komputer /Hal.

46

POINT kapal[4]; POINT layar[3]; }; //--------------------------------------------------------------------------extern PACKAGE TForm1 *Form1; //--------------------------------------------------------------------------#endif //--------------------------------------------------------------------------Hiu.Cpp #include <vcl.h> #pragma hdrstop #include "shark.h" //--------------------------------------------------------------------------#pragma package(smart_init) #pragma resource "*.dfm" TForm1 *Form1; //--------------------------------------------------------------------------__fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { } //--------------------------------------------------------------------------void __fastcall TForm1::PaintBox1Paint(TObject *Sender) { PaintBox1->Canvas->Pen->Width=1; PaintBox1->Canvas->Brush->Color=RGB(172,243, 246); PaintBox1->Canvas->Rectangle(0,0, 617,250); PaintBox1->Canvas->Brush->Color=RGB(20,65, 212); PaintBox1->Canvas->Rectangle(0,250, 617,473); xk1=70; yk1=250; xk2=120; yk2=250; xk3=140; yk3=220; xk4=50; yk4=220; xg1=95; yg1=220; xg2=95; yg2=200;

Bahan Ajar Grafika Komputer /Hal.

47

PaintBox1->Canvas->MoveTo(70,250); PaintBox1->Canvas->Brush->Color=RGB(220,129, 178); kapal[0] = Point(70,250); kapal[1] = Point(120,250); kapal[2] = Point(140,220); kapal[3] = Point(50,220); PaintBox1->Canvas->Polygon((TPoint*)kapal,3); PaintBox1->Canvas->MoveTo(95,220); PaintBox1->Canvas->LineTo(95,200); xl1=95;yl1=200; xl2=140; yl2=200; xl3=95; yl3=100; layar[0] = Point(xl1,yl1); layar[1] = Point(xl2,yl2); layar[2] = Point(xl3,yl3); PaintBox1->Canvas->Polygon((TPoint*)layar,2); PaintBox1->Canvas->MoveTo(617,200); PaintBox1->Canvas->Brush->Color=RGB(172,146, 25); POINT titik[5]; titik[0] = Point(617,200); titik[1] = Point(250,250); titik[2] = Point(500,275); titik[3] = Point(617,300); titik[4] = Point(617,200); PaintBox1->Canvas->Polygon((TPoint*)titik,4); PaintBox1->Canvas->Pen->Color=RGB(126,39, 22); PaintBox1->Canvas->Pen->Width=5; PaintBox1->Canvas->MoveTo(540,260); PaintBox1->Canvas->LineTo(520,150); PaintBox1->Canvas->Pen->Color=RGB(22,126, 88); PaintBox1->Canvas->LineTo(560,150); PaintBox1->Canvas->MoveTo(520,150); PaintBox1->Canvas->LineTo(545,120);

Bahan Ajar Grafika Komputer /Hal.

48

PaintBox1->Canvas->MoveTo(520,150); PaintBox1->Canvas->LineTo(520,120); PaintBox1->Canvas->MoveTo(520,150); PaintBox1->Canvas->LineTo(500,110); PaintBox1->Canvas->MoveTo(520,120); PaintBox1->Canvas->LineTo(530,100); PaintBox1->Canvas->MoveTo(520,150); PaintBox1->Canvas->LineTo(480,110); PaintBox1->Canvas->MoveTo(520,150); PaintBox1->Canvas->LineTo(480,150); PaintBox1->Canvas->MoveTo(520,150); PaintBox1->Canvas->LineTo(490,130);

PaintBox1->Canvas->Pen->Width=1; x1=20; y1= 400; x2=10; y2= 440; x3=40; y3= 440; PaintBox1->Canvas->MoveTo(x1, y1); PaintBox1->Canvas->Pen->Color=RGB(119,131, 127); PaintBox1->Canvas->Brush->Color=RGB(119,131, 127); POINT titikhiu[4]; titikhiu[0] = Point(x1,y1); titikhiu[1] = Point(x2,y2); titikhiu[2] = Point(x3,y3); titikhiu[3] = Point(x1,y1); PaintBox1->Canvas->Polygon((TPoint*)titikhiu,3); } //--------------------------------------------------------------------------void __fastcall TForm1::Timer1Timer(TObject *Sender) { PaintBox1->Canvas->Pen->Width = 2; PaintBox1->Canvas->Pen->Color=RGB(0,0, 0); PaintBox1->Canvas->MoveTo(0,250); PaintBox1->Canvas->LineTo(250,250); PaintBox1->Canvas->Pen->Width = 1; PaintBox1->Canvas->Brush->Color=RGB(20,65, 212); //warna latar (laut/biru tua)

Bahan Ajar Grafika Komputer /Hal.

49

PaintBox1->Canvas->Pen->Color=RGB(20,65, 212); //warna latar (laut/biru tua) POINT titikhiu[2]; titikhiu[0] = Point(x1,y1); titikhiu[1] = Point(x2,y2); titikhiu[2] = Point(x3,y3); PaintBox1->Canvas->Polygon((TPoint*)titikhiu,2); x1=x1+7; y1= 400; x2=x2+7; y2= 440; x3=x3+7; y3= 440; PaintBox1->Canvas->Pen->Color=RGB(119,131, 127); //warna hiu PaintBox1->Canvas->Brush->Color=RGB(119,131, 127); //warna hiu titikhiu[0] = Point(x1,y1); titikhiu[1] = Point(x2,y2); titikhiu[2] = Point(x3,y3); titikhiu[3] = Point(x1,y1); PaintBox1->Canvas->Polygon((TPoint*)titikhiu,3); if (x2 > 617) Close(); } //--------------------------------------------------------------------------void __fastcall TForm1::Timer2Timer(TObject *Sender) { PaintBox1->Canvas->Brush->Color=RGB(172,243, 246); PaintBox1->Canvas->Pen->Color=RGB(172,243, 246); PaintBox1->Canvas->MoveTo(70,250); PaintBox1->Canvas->Brush->Color=RGB(172,243, 246); POINT kapal[4]; kapal[0] = Point(xk1,yk1); kapal[1] = Point(xk2,yk2); kapal[2] = Point(xk3,yk3); kapal[3] = Point(xk4,yk4); PaintBox1->Canvas->Polygon((TPoint*)kapal,3); PaintBox1->Canvas->MoveTo(xg1,yg1); PaintBox1->Canvas->LineTo(xg2,yg2);

Bahan Ajar Grafika Komputer /Hal.

50

layar[0] = Point(xl1,yl1); layar[1] = Point(xl2,yl2); layar[2] = Point(xl3,yl3); PaintBox1->Canvas->Polygon((TPoint*)layar,2); xk1=xk1+2; yk1=250; xk2=xk2+2; yk2=250; xk3=xk3+2; yk3=220; xk4=xk4+2; yk4=220; xg1=xg1+2; yg1=220; xg2=xg2+2; yg2=200; xl1=xl1+2;yl1=200; xl2=xl2+2; yl2=200; xl3=xl3+2; yl3=100; PaintBox1->Canvas->Brush->Color=RGB(220,129, 178); PaintBox1->Canvas->Pen->Color=RGB(0,0, 0); PaintBox1->Canvas->MoveTo(xk1,yk1); PaintBox1->Canvas->Brush->Color=RGB(220,129, 178); kapal[0] = Point(xk1,yk1); kapal[1] = Point(xk2,yk2); kapal[2] = Point(xk3,yk3); kapal[3] = Point(xk4,yk4); PaintBox1->Canvas->Polygon((TPoint*)kapal,3); PaintBox1->Canvas->MoveTo(xg1,yg1); PaintBox1->Canvas->LineTo(xg2,yg2); POINT layar[3]; layar[0] = Point(xl1,yl1); layar[1] = Point(xl2,yl2); layar[2] = Point(xl3,yl3); PaintBox1->Canvas->Polygon((TPoint*)layar,2); PaintBox1->Canvas->Pen->Width = 2; PaintBox1->Canvas->Pen->Color=RGB(0,0, 0); PaintBox1->Canvas->MoveTo(0,250); PaintBox1->Canvas->LineTo(250,250); if (xk2 > 250)

Bahan Ajar Grafika Komputer /Hal.

51

Timer2->Enabled = false; } //---------------------------------------------------------------------------

Bahan Ajar Grafika Komputer /Hal.

52

Sign up to vote on this title
UsefulNot useful