Grafcom

Transformasi dua dimensi
Dasar Teori

Viewport
Objek yang akan digambar pada layar biasanya memiliki ukuran yang jauh lebih besar dibanding ukuran layar, sehingga perlu dilakukan pemetaan/transformasi yang memungkinkan objek tersebut bisa digambar pada layar. Meskipun demikian, objek seringkali terlalu rumit untuk ditampilkan pada layar dengan koordinat yang sangat terbatas. Sehingga biasanya kita memilih bagian tertentu dari objek untuk ditampilkan pada layar. Didalam memilih objek yang akan ditampilkan biasanya dibatasi oleh sebuah kotak yang disebut dengan jendela (window).
Dalam praktek kita bisa menggunakan seluruh atau sebagian lebar layar untuk menmpilkan objek yang berada pada sebuah jendela. Daerah layar yang dipilih untuk menampilkan objek yang dimaksud disebut viewport. Dalam keadaan normal, viewport akan meliputi seluruh layar lebar. Meskipun demikian, kita bisa memilih bagian tertentu dari layar untuk dijadikan sebuah viewport.
Transformasi
Sejumlah objek seringkali mempunyai sifat simetri. Sehingga untuk menggambar seluruh objek, cukup dilaksanakan dengan melakukan manipulasi terhadap objek yang sudah ada, misalnya dengan pencerminan, pergeseran, atau pemutaran objek yang sudah digambar terlebih dahulu.
Kita akan mempelajari cara mentransformasikan objek grafis khususnya objek grafis 2D sebagai salah satu cara untuk memanipulasi objek grafis dan sistem koordinat yang dipakai dengan cara yang lebih terorganisir dan efisien. Salah satu contoh penting untuk diketahui adalah pemakaian transformasi jendela ke viewport.
Ada dua cara untuk melakukan transformasi, yaitu transformasi objek dan transformasi kordinat. Pada transformasi objek semua titik pada sembarang objek akan dirubah sesuai dengan aturan tertentu sementara kordinatnya tetap. Pada transformasi sistem koordinat, objek tetap tetapi karena sistem koordinatnya diganti maka kedudukan objek harus disesuaikan dengan kedudukan sistem kordinat yangbaru.
Jenis-jenis transformasi
1. Translasi
Sembarang titik pada bidang xy bisa digeser ke sembarang tempat dengan menambahkan besaran pada absis x dan ordinat y. Translasi adalah transformasi dengan bentuk tetap memindahkan objek apa adanya. Dengan menggunakan persamaan Q = PM + tr, maka hasil pergeseran bisa dinyatakan sbb:
(Qx, Qy) = (Px +trx, Py+try)
dimana trx adalah vektor translasi menurut sumbu x sedang try adalah vektor translasi menurut sumbu y, dan matrik M bisa dikatakan sebagai matrix identitas.
Sembarang objek bisa digeser ke posisinya yang baru dengan mengoperasikan persamaan diatas pada setiap titik dari objek tersebut. Hal ini karena setiap garis dari objek tersebut terdiri dari titik-titik yang jumlahnya tak terbatas, maka proses penggeseran bisa berlangsung sangat lama. Tetapi pada kenyataannya kita cukup menggeser dua titik ujungnya saja dan kemudian menggandeng dua titik tersebut untuk membentuk garis hasil pergeseran.
Contoh translasi:
Untuk menggambarkan translasi objek yang berupa garis dengan koordinat A(10,10), B(30,10) dengan vektor translasi (10,20)

Titik A Qx=Px +trx =10 + 10 =20
Qy=Py + try =10+20=30
Hasil translasi A = (20, 30)
Titik B Qx=Px + trx = 30+10 = 40
Qy=Py + try = 10+20 =30
Hasil translasi B = (40, 30)

2. Rotasi
Kita bisa memutar objek searah dengan arah perputaran jarum jam(dinyatakan dengan sudut negatif) atau berlawanan arah dengan arah jarum jam(dinyatakan sebagai sudut positif).
Dengan menganggap bahwa besarnya sudut putar adalah sama dengan , maka posisi sebuah titik yang baru adalah:
Qx = Pxcos( ) - Pysin( )
Qy = Pxsin( ) + Pycos( )
Dengan menggunakan notasi matrix, maka besaran M bisa dikatakan sbb:
M = cos(0) sin(0)
-sin(0) cos(0)

3. Skala
Penskalaan adalah proses untuk memperbesar atau memperkecil suatu gambar. Dengan faktor absolut yang lebih besar dari 1, akan diperoleh gambar yang lebih besar dan semakin menjauh dari titik(0,0). Sebaliknya dengan faktor skala yang mempunyai nilai absolut lebih kecill dari 1, akan diperoleh gambar yang lebih kecil dan mendekat ke titik (0,0).
Dengan menggunakan persamaan Q=PM+tr, maka hasil penggeseran bisa dinyatakan sebagai:
(Qx, Qy)=(SxPx, SyPy)
Dengan Sx adalah faktor skala ke arah mendatar dan Sy adalah faktor skala arah tegak dan ofset vektor tr bernilainol. Dengan menggunakan notasi matrix, maka matrixM bisa dinyatakan sbb:
M= (sx 0)
(0 sy)

Download Artikel Lengkap (pdf)




unit Main;

interface

uses
Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,
StdCtrls, ExtCtrls,Math;

const
MAX_VERTEX = 3;
type
TPointFloat = record
x,y:real;
end;

TMainFrm = class(TForm)
Panel1: TPanel;
GroupBox3: TGroupBox;
Label7: TLabel;
Label9: TLabel;
Label10: TLabel;
EDeg: TEdit;
RotasiBtn: TButton;
ECRX: TEdit;
ECRY: TEdit;
GroupBox1: TGroupBox;
Label1: TLabel;
Label2: TLabel;
ETrx: TEdit;
ETry: TEdit;
TranslasiBtn: TButton;
procedure FormCreate(Sender: TObject);
procedure FormPaint(Sender: TObject);
procedure FormResize(Sender: TObject);
procedure TranslasiBtnClick(Sender: TObject);
procedure PenskalaanBtnClick(Sender: TObject);
procedure RotasiBtnClick(Sender: TObject);
private
{ Private declarations }
Segitiga:array[1..MAX_VERTEX] of TPointFloat;
xcenter,ycenter:integer;
procedure GambarSegitiga;
procedure IsiSegitiga;
procedure Translasi(px,py,tr_x,tr_y:real;var qx,qy:real);
procedure Skala(px,py,sx,sy:real;var qx,qy:real);
procedure Rotasi(px,py,deg:real;var qx,qy:real);
public
{ Public declarations }
end;

var
MainFrm: TMainFrm;

implementation

{$R *.DFM}
procedure TMainFrm.IsiSegitiga;
begin
segitiga[1].x:= 100;
segitiga[1].y:= -100;
segitiga[2].x:= 300;
segitiga[2].y:= -100;
segitiga[3].x:= 300;
segitiga[3].y:= 150;
end;

procedure TMainFrm.Translasi(px,py,tr_x,tr_y:real;var qx,qy:real);
begin
qx:=px+tr_x;
qy:=py+tr_y;
end;

procedure TMainFrm.Skala(px,py,sx,sy:real;var qx,qy:real);
begin
qx:=px*sx;
qy:=py*sy;
end;

procedure TMainFrm.Rotasi(px,py,deg:real;var qx,qy:real);
var
radian:real;
cosdeg,sindeg:real;
begin
radian:=degtorad(deg) ; //deg * Pi / 180;
cosdeg:=cos(radian);
sindeg:=sin(radian);
qx:=px * cosdeg - py * sindeg;
qy:=py * cosdeg + px * sindeg;
end;

procedure TMainFrm.GambarSegitiga;
var
index:integer;
x,y:real;
begin
Canvas.Rectangle(0,Panel1.Height,Width,Height);
Canvas.Pen.Style:=psSolid;
for index:=1 to MAX_VERTEX+1 do
begin
if index = MAX_VERTEX+1 then
begin
x:=xcenter+Segitiga[1].x;
y:=ycenter-Segitiga[1].y;
end
else
begin
x:=xcenter+Segitiga[index].x;
y:=ycenter-Segitiga[index].y;
end;
if index = 1 then
Canvas.MoveTo(round(x),round(y))
else
Canvas.LineTo(round(x),round(y));
end;
Canvas.Pen.Style:=psDot;
Canvas.MoveTo(xcenter,0);
Canvas.LineTo(xcenter,Height);
Canvas.MoveTo(0,ycenter);
Canvas.LineTo(Width,ycenter);
end;

procedure TMainFrm.FormCreate(Sender: TObject);
begin
xcenter:=Width div 2;
ycenter:=Panel1.Height+((Height-Panel1.Height) div 2);

IsiSegitiga;
GambarSegitiga;
end;

procedure TMainFrm.FormPaint(Sender: TObject);
begin
GambarSegitiga;
end;

procedure TMainFrm.FormResize(Sender: TObject);
begin
xcenter:=Width div 2;
ycenter:=Panel1.Height+((Height-Panel1.Height) div 2);
GambarSegitiga;
end;

procedure TMainFrm.TranslasiBtnClick(Sender: TObject);
var
px,py:real;
tr_x,tr_y:integer;
index:integer;
qx,qy:real;
begin
//ambil nilai trx,try
tr_x:=StrToInt(ETrx.Text);
tr_y:=StrToInt(ETry.Text);
for index:=1 to 3 do
begin
//ambil lokasi titik
px:=Segitiga[index].x;
py:=Segitiga[index].y;
//translasikan
Translasi(px,py,tr_x,tr_y,qx,qy);
//simpan kembali
Segitiga[index].x:=qx;
Segitiga[index].y:=qy;
end;
GambarSegitiga;
end;

procedure TMainFrm.PenskalaanBtnClick(Sender: TObject);

begin

end;

procedure TMainFrm.RotasiBtnClick(Sender: TObject);
var
px,py,xt,yt:real;
qx,qy,deg:real;
index:integer;
begin
//ambil sx,sy
deg:=StrToFloat(EDeg.Text);
//ambil pusat transformasi
xt:=StrToFloat(ECRx.Text);
yt:=StrToFloat(ECRy.Text);
for index:=1 to MAX_VERTEX do
begin
//ambil lokasi
px:=Segitiga[index].x;
py:=Segitiga[index].y;
if (xt <> 0 ) and (yt <> 0 ) then
begin
//translasi -trx,-try
Translasi(px,py,-xt,-yt,qx,qy);
end
else
begin
qx:=px;
qy:=py;
end;
//skalakan sx,sy
Rotasi(qx,qy,deg,qx,qy);
if (xt <> 0 ) and (yt <> 0 ) then
begin
//translasi trx,try
Translasi(qx,qy,xt,yt,qx,qy);
end;
//simpan
Segitiga[index].x:=qx;
Segitiga[index].y:=qy;
end;
//gambar ulang
GambarSegitiga;
end;

end.


Download Program 2 Dimensi

typedef struct {

float x,y;

} point2D_t;

Sturktur Data dari vektor 2D

typedef struct {

float v[3];

} vector2D_t;

Perubahan Titik dan Vektor

Point2Vector

vector2D_t point2vector(point2D_t pnt)

{

vector2D_t vec;

vec.v[0]=pnt.x;

vec.v[1]=pnt.y;

vec.v[2]=1.;

}

Vector2 Point

Fungsi ini digunakan untuk memindahkan tipe data vektor menjadi tipe data titik. Hal ini sangat berguna untuk penyajian grafis setelah proses pengolahan matrik yang dikenakan pada obyek 2D.

point2D_t vector2point(vector2D_t vec)

{

point2D_t pnt;

pnt.x=vec.v[0];

pnt.y=vec.v[1];

}

Matrik Transformasi 2D

1. Matrik transformasi adalah matrik yang membuat sebuah obyek mengalami perubahan baik berupa perubahan posisi, maupun perubahan ukuran.
2. Matrik transformasi 2D dinyatakan dalam ukuran 3x3, dimana kolom ke-3 digunakan untuk menyediakan tempat untuk proses translasi.

Translasi

Translasi adalah perpindahan obyek dari titik P ke titik P’ secara linier.

x’ = x + dx

y’ = y + dy

Model Matrik

Matrik Transformasi dari Translasi 2D

Implementasi Matrik Tranformasi Untuk Translasi

matrix2D_t translationMTX(float dx,float dy)

{

matrix2D_t trans=createIdentity();

trans.m[0][2]=dx;

trans.m[1][2]=dy;

return trans;

}

Scaling

Scaling m adalah perpindahan obyek dari titik P ke titik P’, dimana jarak titik P’ adalah m kali titik P

Matrik Transformasi
dari Scaling 2D

Proses scaling dengan menggunakan definisi vektor2D dapat dituliskan dengan

Matrik Transformasi dari Scaling

Implementasi Matrik Tranformasi Untuk Scaling

matrix2D_t scalingMTX(float mx,float my)

{

matrix2D_t scale=createIdentity();

scale.m[0][0]=mx;

scale.m[1][1]=my;

return scale;

}

Rotasi

Rotasi adalah perpindahan obyek dari titik P ke titik P’, yang berupa pemindahan berputar sebesar sudut q

Matrik Transformasi dari Rotasi

Implementasi Matrik Tranformasi Untuk Rotasi

matrix2D_t rotationMTX(float theta)

{

matrix2D_t rotate=createIdentity();

float cs=cos(theta);

float sn=sin(theta);

rotate.m[0][0]=cs; rotate.m[0][1]=-sn;

rotate.m[1][0]=sn; rotate.m[1][1]=cs;

return rotate;

}

Perkalian Matrik

• Perkalian matrik dengan matrik menghasilkan matrik
• Perkalian matrik dengan vektor menghasilkan vektor

Perkalian matrik ini digunakan untuk operasional transformasi dari obyek 2D dan untuk komposisi (menggabungkan) tranformasi

Perkalian Matrik dengan Matrik

Perkalian matrik a dan matrik b menghasilkan matrik c yang dirumuskan dengan

dimana i dan j bernilai 0 s/d 2

Implementasi Perkalian
Matrik dengan Matrik

matrix2D_t operator * (matrix2D_t a, matrix2D_t b)

{

matrix2D_t c;//c=a*b

int i,j,k;

for (i=0;i<3;i++) j="0;j<3;j++)">

c.m[i][j]=0;

for (k=0;k<3;k++)>

c.m[i][j]+=a.m[i][k]*b.m[k][j];

}

return c;

}

Perkalian Matrik dengan Vektor

Perkalian matrik a dan vektor b menghasilkan vektor c yang dirumuskan dengan

dimana i bernilai 0 s/d 2

Implementasi Perkalian Matrik dengan Vektor

vector2D_t operator * (matrix2D_t a, vector2D_t b)

{

vector2D_t c;//c=a*b

int i,j;

for (i=0;i<3;i++)>

c.v[i]=0;

for (j=0;j<3;j++)>

c.v[i]+=a.m[i][j]*b.v[j];

}

return c;

}

Komposisi Transformasi

Komposisi transformasi adalah menggabungkan beberapa tranformasi, sehingga dapat menghasilkan bentuk transformasi yang lebih kompleks

Komposisi tranformasi dapat dilakukan dengan mengalikan matrik-matrik transformasi

Contoh program dengan menggunakan Delphi7

Download Materi Lengkap disini
Download Sample Program disini
Download Program source disini