PENGERTIAN
Grafika/grafis (graphics)
Gambar yang dibuat/direkayasa dari bentuk geometri
Image/Citra
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
• 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
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.
Tampilan
Vector Raster
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.
Canvas->Pixel[x][y]=warna
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
8. Poligon (Polygon)
Method Poligon digunakan untuk mengambar segi banyak
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.
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
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
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
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
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
Langkah 7
Isikan Sintak dibawah ini untuk Event Onclick pada item ”Width” dari Komponen MainMenu1
2. Mengenal Brush
Langkah 2
Buka File Ubrush.h dan deklarasikan fungsi BersihkanCanvas pada Bagian Public
void _fastcall BersihkanCanvas();
Langkah 3
Isikan sintak berikut untuk event OnClick pada item ”Style” dari komponen MainMenu1
sebagai berikut
//---------------------------------------------------------------------------
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);
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
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
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.
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 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.)
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.
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).
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.
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
(0,0)
midy
midx (400,640)
LATIHAN
Pada gambar diatas terlihat bahwa tampilan garis pada layar komputer tidak
sesempurna garis di atas kertas.
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;
}
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
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
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
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
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
2. SKALA
Skala dapat diartikan sebagai suatu peubahan terhadap objek tertentu yang
mengakibatkan berubahnya ukuran obyek secara keseluruhan.
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
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
Persamaan
X’=x*cos θ -y*sin θ
Y’=x*sin θ + y*cos θ
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
Gambar
100
90
80
70
asal
60
hasil
-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 !
#include <vcl.h>
#pragma hdrstop
}
//---------------------------------------------------------------------------
}
//---------------------------------------------------------------------------
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 θ
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
#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;
//---------------------------------------------------------------------------
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;
Hasil
Transformasi 2D
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 θ
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
#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);
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(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);
}
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
#include "shark.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//---------------------------------------------------------------------------
xg1=95; yg1=220;
xg2=95; yg2=200;
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);
PaintBox1->Canvas->Pen->Width=1;
}
//---------------------------------------------------------------------------
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);
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);
}
//---------------------------------------------------------------------------