Bab I

Pendahuluan
Transformasi 2D adalah suatu model atau bentuk atau teknik
memindahkan atau mengubah nilai posisi objek dalam sistem koordinasi 2
dimensi. Pemindahan objek ini dapat diartikan sebagai pemindahan titik.
Untuk melakukan pemindahan digunakan vektor dan matrix, di mana
vektor menunjukkan titik dan matrix adalah transformasinya. Hasil dari
perkalian vektor dan matrix tersebut adalah hasil transformasinya.
Transformasi dalam grafika komputer terdiri dari:
a. Translasi,
b. Scaling,
c. Rotasi.
Transformasi 2D dapat dilakukan dengan menggunakan perkalian
antara matriks transformasi dan vector posisi dari setiap titik pada objek.
Dapat ditulis dengan:
−
v hasil = A.v −posisi
Translasi adalah perpindahan obek dari titik P(x,y) ke titik P’(x’,y’)
secara linier. Dapat ditulis dengan:
x’ = x + dx
y’ = y + dy
Scaling adalah perpindahan objek dari titik P ke titik P’ sebanyak m
kali titik P. Dapat ditulis dengan:
P’(x’,y’) = m.P(x,y)
Rotasi adalah penpindahan objek dari titik P’(x’,y’) yang berupa
pemindahan berputar sebesar sudut θ. Dapat ditulis dengan:
x’ = x.cos θ
y’ = y.sin θ
Komposisi transformasi adalah menggabungkan beberapa
transformasi sehingga dapat menghasilkan bentuk transformasi yang lebih
kompleks. Komposisi transformasi dapat dilakukan dengan mengalikan
matriks-matriks dari transformasi yang digabungkan.
 Bab II
Pembahasan
A. Struktur data dan perubahannya
Transformasi 2 dimensi adalah suatu model atau bentuk atau teknik
memindahkan atau mengubah nilai posisi objek dalam sistem koordinat 2
dimensi. Pemindahan objek ini dapat diartikan sebagai pemindahan titik.
Untuk dapat melakukan pemindahan maka digunakan 2 variabel dasar
dalam matematika yaitu vektor dan matriks. Vektor menunjukkan titik atau
objek yang dinyataka dalam vektor posisi v=(vx,vy,vz). Sedangkan matriks
adalah sebuah operator yang akan memindahkan objek. Dari matriks inilah
bermacam-macam transformasi dapat dibentuk. Dengan demikian dalam
transformasi ini beberapa struktur harus dibuat terlebih dahulu sebelum
diimplementasikan ke dalam program, yaitu:
1) Struktur data titik 2D,
2) Struktur data vektor 2D,
3) Struktur data matrix 2D.

Struktur data dari titik 2D dapat didefinisikan dengan:

typedef struct{
float x,y;
}point2D_t;

Struktur data dari vector 2D dapat didefinisikan dengan:

typedef struct{
float v[3];
}vector2D_t;

Struktur data dari matrix 2D didefinisikan dengan:

typedef struct{
float m[3][3];
}matrix2D_t;

Struktur data 2D digunakan untuk menggambar objek ke layar

komputer, karena nilainya sudah disesuaikan dengan sistem koordinat pada
layar komputer. Sedangkan struktur data vektor digunakan untuk melakukan
transformasi, hal yang harus dilakukan adalah:
 • Mengubah struktur data titik ke struktur data vektor,
• Menghitung transformasi,
• Mengubah struktur data vektor ke struktur data titik,
• Menggambar objek.

Dalam mengubah struktur data titik ke vektor di gunakan fungsi

point2vector. Berikut impelementasi dari fungsi point2vector adalah sebagai
berikut:
vector2D_t point2vector(point2D_t pnt)
{
vector2D_t vec;
vec.v[0]=pnt.x;
vec.v[1]=pnt.y;
vec.v[2]=1.;
return vec;
}

Dalam mengubah dari vektor menjadi titik maka digunakan fungsi

vector2point. Dimana fungsi ini digunakan untuk membuat vektor hasil
transformasi menjadi titik kembali. Berikut adalah implementasinya dalam
program:
point2D_t vector2point(vector2D_t vec)
{
point2D_t pnt;
pnt.x=vec.v[0];
pnt.y=vec.v[1];
return pnt;
}

B. Translasi
Translasi adalah perpindahan objek dari titik P(x,y) ke titik P’(x’,y’)
secara linier. Dalam translasi 2D diperlukan dua parameter, yaitu
pemindahan ke arah smbu x dan pemindahan ke arah sumbu y. Translasi
(dx,dy) didefinisikan dengan:
x’ = x+dx
y’ = y+dy
atau dapat dituliskan dengan:
 ( ) =( )+( )
x'
y'
x
y
dx
dy

P’(x’,y’)

dy

P(x,y) dx

Gambar Translasi titik

Proses translasi dengan menggunakan operasi matriks dapat dituliskan

dengan:

v1 '  v1  d x  v1 + d x  1.v1 + 0.v 2 + d x .1

v ' = v  + d  = v + d  = 0.v + 1.v + d .1
 2   2  y  2 y  1 2 y 

1  1  0  1  0.v + 0.v + 1.1 

  1 2 
v1 '  1 0 d x  v1 
v ' = 0 1 d  v 
 2  y  2 

1  0 0 1  1 

Sehingga matriks transformasi dari translasi:

1 0 d x 
T = 0 1 d y 
0 0 1 

Sebelum melakukan implementasi matriks tersebut terlebih dahulu

ditentukan matriks identitasnya. Matriks identitas adalah matriks yang nilai
diagonal utamanya sama dengan satu dan yang lainnya nol.

1 0 0
I = 0 1 0
0 0 1
 matrix2D_t createIdentity(void)
{
matrix2D_t u;
int i,j;
for (i=0;i<3;i++) {
for (j=0;j<3;j++)
u.m[i][j]=0.;
u.m[i][i]=1.;
}
return u;
Implementasi fungsi untuk membuat matriks transformasi translasi
adalah sebagai berikut:

matrix2D_t translation(float dx, float dy) {

matrix2D_t trans=createIdentity();
trans.m[0][2]=dx;
trans.m[1][2]=dy;
return trans;
}

C. Scaling
Scaling m adalah perpindahan objek dari titik P ke titik P’, di mana
jarak titik P’ adalah m kali titik P.

P’(x’,y’)

P(x,y)
my.y

mx.x
x

Proses scaling dapat didefinisikan dengan:

x’ = mx . x
y’ = my . y
 Proses scaling dengan menggunakan definisi vektor2D dapat
dituliskan dengan:

 x '  m x .x  m x .x + 0. y + 0.1 m x 0 0
 y ' = m . y  = 0.x + m . y + 0.1 =  0 my 0
   y   y  
1  1  0.x + 0. y + 1.1   0
   0 1
v 1 '  m x 0 0 v1 
v ' =  0 m 0 v 
 2  y  2 
1   0 0 1 1 
Matriks transformasi dari scaling:
m x 0 0
S =  0 my 0
 0 0 1
Implementasi matriks transformasi untuk scaling adalah sebagai
berikut:

matrix2D_t scalling(float mx, float my) {

matrix2D_t scale=createIdentity();
scale.m[0][0]=mx;
scale.m[1][1]=my;
return scale;
}

D. Rotasi
Rotasi adalah perpindahan objek dari titik P(x,y) ke titik P’(x’,y’)
yang berupa pemindahan berputar sebesar sudut θ dengan sumbu rotasi pada
titik (0,0). Rotasi ini dapat digambarkan sebagai berikut:

P’(x’,y’)
y

P(x,y)
θ

x
Operasi rotasi dapat diuraikan sebagai berikut:
1. Rotasi dari titik P yang berada di sumbu X, P(x,0) menjadi P’(x’,y’)
dapat digambarkan dengan:

y
x’=x.cos(θ)
y’=x.sin(θ)
P’(x’,y’)

θ
x
Dengan operasi matrix dapat dituliskan: P(x,0)

 x '   x. cos(θ ) + y.0 cos(θ ) 0  x 

 y ' =  x. sin (θ ) + y.0  =  sin (θ ) 0  y 
      

Sehingga diperoleh matriks transformasinya sebagai berikut:

cos(θ ) 0
Rx =  
 sin (θ ) 0

2. Rotasi pada titik P yang berada di sumbu Y, P(x,0) menjadi P’(x’,y’)

dapat digambarkan dengan:

x’=-y.sin(θ)
y’=y.cos(θ) P(x,0) P’(x’,y’)

x
 Dengan operasi matrix dapat dituliskan:

 x '   x.0 − y. sin (θ )  0 − sin (θ )   x 

 y ' =  x.0 + y. cos(θ )  = 0 cos(θ )   y 
      

Diperoleh matrik transformasi sebagai berikut:

0 − sin (θ ) 
Ry =  
0 cos(θ ) 

3. Rotasi dari titik P(x,y) menjadi P’(x’,y’) merupakan kombinasi dari

kedua macam transformasi di atas yaitu R = Rx + Ry.

x’ = x.cos(θ) – y.sin(θ)
y’ = x.sin(θ) + y.cos(θ)
Operasi rotasi dapat dituliskan dengan:

 x '   x. cos(θ ) − y. sin (θ ) + 1.0  cos(θ ) − sin (θ ) 0  x 

 y ' =  x. sin (θ ) + y. cos(θ ) + 1.0 =  sin (θ ) cos(θ ) 0  y 
      
1   x.0 + y.0 + 1.1   0 0 1 1 

Sehingga diperoleh matrik untuk rotasi sebagai berikut:

cos(θ ) − sin (θ ) 0
R =  sin (θ ) cos(θ ) 0
 0 0 1

Impelementasi matrik di atas dalam program adalah sebagai berikut:

matrix2D_t rotation(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;
}
E. Perkalian Matriks

Dalam perkalian matriks ini dikenal 2 jenis, yaitu:

• Perkalian matrix dengan vector untuk menghasilkan vector dari

titik hasil transformasi.
• Perkalian matrix dengan matrix untuk menghasilkan matrix
transformasi yang baru.

1. Perkalian matriks dengan vektor

Perkalian matriks ini digunakan untuk operasional transformasi dari
objek 2D guna menghasilkan vektor baru dari titik objek yang
ditransformasikan. Berikut adalah implementasi perkalian matrix
dengan vector:

vector2D_t operator * (matrix2D_t a,vector2D_t b)

{
vector2D_t c;
int i,k;
for (i=0;i<3;i++)
{
c.v[i]=0;
for(k=0;k<3;k++)
c.v[i]+=a.m[i][k]*b.v[k];
}
return c;
}

2. Perkalian matrix dengan matrix

Perkalian matrix ini digunakan untuk komposisi (menggabungkan)
transformasi. Dalam hal ini 2 matrix dikalikan untuk menghasilkan
sebuah matrix yang lebih kompleks. Berikut bentuk implementasi
dalam program:
matrix2D_t operator *(matrix2D_t a,matrix2D_t b)
{
matrix2D_t c;
int i,j,k;
for (i=0;i<3;i++)
{
for (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;
}
 Bab III
Program
Program membentuk transformasi gambar 2D:

#include <GL/glut.h>
#include <math.h>

typedef struct{
float x,y;
}point2D_t;

typedef struct{
float r,g,b;
}color_t;

typedef struct{
float v[3];
}vector2D_t;

typedef struct{
float m[3][3];
}matrix2D_t;

void setColor(color_t col)

{
glColor3f(col.r,col.g,col.b);
}
void drawDot(point2D_t p)
{
glBegin(GL_POINTS);
glVertex2i(p.x,p.y);
glEnd();
}

void drawLine(point2D_t a,point2D_t b)

{
glBegin(GL_LINES);
glVertex2i(a.x,a.y);
glVertex2i(b.x,b.y);
glEnd();
}
void drawPolyline(point2D_t pnt[],int n)
{
int i;
glBegin(GL_LINE_STRIP);
for (i=0;i<n;i++){
glVertex2f(pnt[i].x,pnt[i].y);
}
glEnd();
}

void drawPolygon(point2D_t pnt[],int n)

{
int i;
glBegin(GL_LINE_LOOP);
for (i=0;i<n;i++){
glVertex2f(pnt[i].x,pnt[i].y);
}
glEnd();
}

void fillPolygon(point2D_t pnt[],int n,color_t color)

{
int i;
setColor(color);
glBegin(GL_POLYGON);
for (i=0;i<n;i++){
glVertex2f(pnt[i].x,pnt[i].y);
}
glEnd;
}

vector2D_t point2vector(point2D_t pnt)

{
vector2D_t vec;
vec.v[0]=pnt.x;
vec.v[1]=pnt.y;
vec.v[2]=1.;
return vec;
}

point2D_t vector2point(vector2D_t vec)

{
point2D_t pnt;
pnt.x=vec.v[0];
pnt.y=vec.v[1];
return pnt;
}
matrix2D_t createIdentity(void)
{
matrix2D_t u;
int i,j;
for (i=0;i<3;i++) {
for (j=0;j<3;j++)
u.m[i][j]=0.;
u.m[i][i]=1.;
}
return u;
}

matrix2D_t translation(float dx, float dy) {

matrix2D_t trans=createIdentity();
trans.m[0][2]=dx;
trans.m[1][2]=dy;
return trans;
}

matrix2D_t scaling(float mx, float my) {

matrix2D_t scale=createIdentity();
scale.m[0][0]=mx;
scale.m[1][1]=my;
return scale;
}

matrix2D_t rotation(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;
}
vector2D_t operator * (matrix2D_t a,vector2D_t b)
{
vector2D_t c;
int i,k;
for (i=0;i<3;i++)
{
c.v[i]=0;
for(k=0;k<3;k++)
c.v[i]+=a.m[i][k]*b.v[k];
}
return c;
}

matrix2D_t operator * (matrix2D_t a,matrix2D_t b)

{
matrix2D_t c;
int i,j,k;
for (i=0;i<3;i++)
{
for (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;
}

void pindah(void)
{
glClear(GL_COLOR_BUFFER_BIT);
color_t merah={1,0,0};
color_t kuning={1,1,0};
point2D_t a={0,0},b={50,0},c={25,25};
vector2D_t a1=point2vector(a);
vector2D_t b1=point2vector(b),c1=point2vector(c);
a1 = translation(30,40)*a1;
b1 = translation(30,40)*b1;
c1 = translation(30,40)*c1;
a=vector2point(a1);
b=vector2point(b1);
c=vector2point(c1);
point2D_t segitiga[3];
segitiga[0]=a;
segitiga[1]=b;
segitiga[2]=c;
 setColor(merah);
drawPolygon(segitiga,3);
glutSwapBuffers();
}

void skala(void)
{
glClear(GL_COLOR_BUFFER_BIT);
color_t merah={1,0,0};
color_t kuning={1,1,0};
point2D_t a={0,0},b={50,0},c={25,25};
vector2D_t a1=point2vector(a);
vector2D_t b1=point2vector(b),c1=point2vector(c);
b1 = scaling(5,1)*b1;
c1 = scaling(5,1)*c1;
a=vector2point(a1);
b=vector2point(b1);
c=vector2point(c1);
point2D_t segitiga[3];
segitiga[0]=a;
segitiga[1]=b;
segitiga[2]=c;
setColor(merah);
drawPolygon(segitiga,3);
glutSwapBuffers();
}

void rotasi(void)
{
glClear(GL_COLOR_BUFFER_BIT);
color_t merah={1,0,0};
color_t kuning={1,1,0};
point2D_t a={0,0},b={50,0},c={25,25};
vector2D_t a1=point2vector(a);
b1=point2vector(b),c1=point2vector(c);
b1 = rotation(45)*b1;
c1 = rotation(45)*c1;
a=vector2point(a1);
b=vector2point(b1);
c=vector2point(c1);
point2D_t segitiga[3];
segitiga[0]=a;
segitiga[1]=b;
segitiga[2]=c;
setColor(merah);
drawPolygon(segitiga,3);
 glutSwapBuffers();
}

void pindahskala(void)
{
glClear(GL_COLOR_BUFFER_BIT);
color_t merah={1,0,0};
color_t kuning={1,1,0};
point2D_t a={0,0},b={50,0},c={25,25};
vector2D_t a1=point2vector(a);
vector2D_t b1=point2vector(b),c1=point2vector(c);
matrix2D_t hasil;
hasil= translation(30,50)*scaling(5,1);
b1 = hasil*b1;
c1 = hasil*c1;
a=vector2point(a1);
b=vector2point(b1);
c=vector2point(c1);
point2D_t segitiga[3];
segitiga[0]=a;
segitiga[1]=b;
segitiga[2]=c;
setColor(merah);
drawPolygon(segitiga,3);
glutSwapBuffers();
}

int main(int argc, char **argv)

{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("TES");
glClearColor(1.,1.,1.,0.);
gluOrtho2D(-320.,320.,-240.,240.);
glutIdleFunc(/*..fungsi penggambaran..*/);
glutDisplayFunc(/*..fungsi penggambaran..*/);
glutMainLoop();
return 0;
}
Output jika menggunakan fungsi pindah atau translasi dengan
glutIdleFunc(pindah) dan glutDisplayFunc(pindah) adalah sebagai berikut:

Sebelum di translasi:

Setelah ditranslasi dengan matrix translation(30,40):

Output jika menggunakan fungsi skala dengan glutIdleFunc(skala) dan
glutDisplayFunc(skala) adalah sebagai berikut:

Sebelum di skala:

Setelah di skala pada x = 5 dengan matrix scaling(5,1):

Output jika menggunakan fungsi rotasi dengan glutIdleFunc(rotasi) dan
glutDisplayFunc(rotasi) adalah sebagai berikut:
Sebelum di rotasi:

Setelah dirotasi sejauh 45° dengan matrix rotation(45°) dengan sumbu putar
(0,0):
Output jika menggunakan fungsi pindahskala dengan
glutIdleFunc(pindahskala) dan glutDisplayFunc(pindahskala) adalah sebagai
berikut:
Sebelum di transformasi:

Setelah di transformasi dengan translation(30,50) dan di skala dengan

scaling(5,1):
TRANSFORMASI 2D

Kelompok II:

•Jackson (52007033)
•Johan Liemena (52007036)
•Pieter Wonggianto (520070xx)
•Taufik Rahmanto (520070xx)