Anda di halaman 1dari 52

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 GK Image
Sumber Dibuat/rekayasa Dari obyek nyata
Ukuran Memori Kecil Besar
Elemen yg diproses Titik-titik pokok Semua titik
Kecepatan proses Tinggi Lamban
Dimensi 2D,3D 2D
Elemen gambar Bentuk geometri Pixel
Detail Kasar Halus
Obyek yg dimanipulasi Tiap bentuk geometri Tiap titik/pixel

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. 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 gambar-
gambar 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 bagian-
bagian 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 Raster

Storage Refresh Color Flat


tube CRT CRT Panel

Liquid Gas Electro


Crystal Plasma Luminescant

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.

Bahan Ajar Grafika Komputer /Hal. 4


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);

X3,y3
X1,y1

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);

X3,y3
X1,y1

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);

X3,y3
X1,y1

X4,y4

Bahan Ajar Grafika Komputer /Hal. 6


X2,y2

8. Poligon (Polygon)
 Method Poligon digunakan untuk mengambar segi banyak

POINT var[n]; //deklarasi variabel


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

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 b

9. Polyline
 Polyline digunakan untuk membuat ”satu” atau ”banyak” garis dari suatu koordinat ke
koordinat lainnya.

POINT var[n]; //deklarasi variabel


var[0]=Point(x,y);
var[1]=Point(x,y);

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 b

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, dimensi ke 0
1 D, dimensi ke 1
2 D, dimensi ke 2
3 D, dimensi ke 3
4 D, dimensi ke 4
5 D, 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
z
x

Sistem koordinat 2D 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 >0 >0
II <0 >0
III <0 <0
IV >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)

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

A B
Solusi

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 (400,640)

LATIHAN

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 Sumbu-Y
Horisontal Gerak(X=X+1) Konstan
Vertikal Konstan Gerak(Y=Y+1)
Diagonal Gerak(X=X+1) Gerak(Y=Y+1)
Bebas Gerak(X=X+n) Gerak(Y=Y+m)
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;
}

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))

Bahan Ajar Grafika Komputer /Hal. 23


{ 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. Tentukan koordinat awal garis (x0,y0)
2. tentukan koordinat akhir garis (x1,y1)
3. 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. Buat loop mulai titik ke 1 sampai titik ke step


For k=1 to step
8. Hitung koodinat titik berikutnya
X=x+x_tambah
Y=y+y_tambah
9. 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) P1(x+tx, y)
P3(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   x '1   tx 
p=   p' =   T=  
 x 2  x '2  tx 
Dengan demikian translasi dua dimensi dapat ditulis dalam bentuk matriks
P’ = P + T

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 ya’=ya*Sy=20*0,5=10
Xb’=xb*Sx=50*2=100 yb’=yb*Sy=20*0,5=10
Xc’ =xc*Sx=10*2=20 yc’=yc*Sy=100*0,5=50
Sehingga A’(20,10),B’(100,10),C’(20,50)

Gambar
100
90
80
70 asal
60
50
40
30 hasil
20
10

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 θ 0
R=
-sin θ cos θ 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
asal
60
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: // User declarations
int x1, y1, x2, y2;
int Tx, Ty;
float Sx, Sy;
__fastcall TForm1(TComponent* Owner);
Kode Perintah dalam File Unit
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

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 C
2
1 A B

1 3 x

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. 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 C
2 C”
1 A B B”
D”
1 A” 3 x

B. Cara 2
1. Rotasi/Skala, Misal : A’
2. Hitung dx dan dy , dx = Xt-XA’
dy = Yt-YA’
3. Translasi ke dx, dy

Misal
Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut sebesar 60o
dengan titik pusat (3,2)
y
D C
2
1 A B

1 3 x
Jawab

Aplikasi

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;

Bahan Ajar Grafika Komputer /Hal. 38


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 C
2
1 A B

1 3 x

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. 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 C
2 C”
1 A B B”
D”
1 A” 3 x
B. Cara 2
4. Rotasi/Skala, Misal : A’
5. Hitung dx dan dy , dx = Xt-XA’
dy = Yt-YA’
6. Translasi ke dx, dy

Misal
Dengan menggunakan objek pada Gambar dibawah, putarlah objek tersebut sebesar 60o
dengan titik pusat (3,2)
y
D C
2
1 A B

1 3 x

Jawab
Aplikasi

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: // User declarations
public: // 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: // User declarations
public: // 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