GRAFIKA COMPUTER SESSION V

OBYEK TIGA DIMENSI

Secara konseptual, jaring polygon digunakan dalam grafika computer untuk menghasilkan objek 3D. Penciptaan objek 3D dengan computer dilakukan dengan memanipulasi jaring polygon baik dengan pemrograman dan juga pemahaman geometri 3D. Jaring polygon adalah permukaan yang dibuat dari kumpulan-kumpulan muka-muka polygon. Beberapa bentuk objek 3d dapat dilihat seperti pada gambar berikut :

Jaring dapat digunakan untuk membuat ‘kulit’ dari suatu objek. Ada dua cara untuk membuat objek 3D dengan jaring polygon, yaitu :

1. Metode daftar titik (vertex list method)
2. Metode daftar muka (face list method)

Ada beberapa cara pendefinisian jaring. Sebagai contoh untuk membuat bentuk kubus dapat diwakili dengan membuat satu daftar yang berisi daftar masing-masing polygon dan lokasi titik. Perhatikan bentuk kubus pada gambar dibawah ini :

Kubus dibentuk dari 6 buah segi empat. Segi empat dibentuk dari 4 buah titik. Jadi, kubus dibentuk dari : 6 x 4 = 24 titik. Untuk lebih jelas perhatikan gambar dibawah ini :

Daftar dari titik-titik tersebut dapat dilihat pada table berikut :

Dari daftar titik pada table diatas dapat dibuat program untuk membentuk objek 3D berupa kubus seperti terlihat pada script berikut :

Script Program

<UNIT1.CPP>:

//—————————————————————————

1. include <vcl.h>
2. pragma hdrstop

//#include “Objek3D.h”

1. include “Unit1.h”

//—————————————————————————

1. pragma package(smart_init)
2. pragma resource “*.dfm”

TForm1 *Form1;
struct Elemen { float x,y ;} ;
Elemen Objek[17];

//—————————————————————————
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//—————————————————————————
//=========================================================================
void __fastcall TForm1::FormActivate(TObject *Sender)
{
Objek[1].x = 100; Objek[1].y = 50;
Objek[2].x = 50; Objek[2].y = 50;
Objek[3].x = 50; Objek[3].y = 100;
Objek[4].x = 100; Objek[4].y = 100;
Objek[5].x = 125; Objek[5].y = 125;
Objek[6].x = 75; Objek[6].y = 125;
Objek[7].x = 75; Objek[7].y = 175;
Objek[8].x = 125; Objek[8].y = 175;

Objek[9].x = 100; Objek[9].y = 100;
Objek[10].x = 125; Objek[10].y = 175;

Objek[11].x = 50; Objek[11].y = 100;
Objek[12].x = 75; Objek[12].y = 175;

Objek[13].x = 50; Objek[13].y = 50;
Objek[14].x = 75; Objek[14].y = 125;

Objek[15].x = 100; Objek[15].y = 50;
Objek[16].x = 125; Objek[16].y = 125;
FormShow(Sender);
}
//=========================================================================
void __fastcall TForm1::FormShow(TObject *Sender)
{
int i;
Image1->Canvas->Rectangle(0,0,Image1->Width,Image1->Height);
Image1->Canvas->MoveTo(Objek[4].x,Objek[4].y);
for (i=1;i<=4;i++){ Image1->Canvas->LineTo(Objek[i].x,Objek[i].y);};
Image1->Canvas->MoveTo(Objek[8].x,Objek[8].y);
for (i=5;i<=8;i++){ Image1->Canvas->LineTo(Objek[i].x,Objek[i].y);};
Image1->Canvas->MoveTo(Objek[10].x,Objek[10].y);
for (i=9;i<=10;i++){ Image1->Canvas->LineTo(Objek[i].x,Objek[i].y);};
Image1->Canvas->MoveTo(Objek[12].x,Objek[12].y);
for (i=11;i<=12;i++){ Image1->Canvas->LineTo(Objek[i].x,Objek[i].y);};
Image1->Canvas->MoveTo(Objek[14].x,Objek[14].y);
for (i=13;i<=14;i++){ Image1->Canvas->LineTo(Objek[i].x,Objek[i].y);};
Image1->Canvas->MoveTo(Objek[16].x,Objek[16].y);
for (i=15;i<=16;i++){ Image1->Canvas->LineTo(Objek[i].x,Objek[i].y);}; }

//—————————————————————————

<UNIT1.H>:

//—————————————————————————

1. ifndef Unit1H
2. define Unit1H

//—————————————————————————

1. include <Classes.hpp>
2. include <Controls.hpp>
3. include <StdCtrls.hpp>
4. include <Forms.hpp>
5. include <ExtCtrls.hpp>

//#include “Objek3D.h”
//—————————————————————————
class TForm1 : public TForm
{
__published: // IDE-managed Components
TImage *Image1;
void __fastcall FormActivate(TObject *Sender);
void __fastcall FormShow(TObject *Sender);
private: // User declarations
public: // User declarations
__fastcall TForm1(TComponent* Owner);

};
//—————————————————————————
extern PACKAGE TForm1 *Form1;
//—————————————————————————

1. endif

Hasilnya:

Daftar muka dan titik-titik pembentuk muka pada objek kubus diatas dapat dilihat pada table berikut :

TUGAS:

1.Membuat kubus dengan memanfaatkan fungsi rectangle?

Jawab:

1. Buka C++ Builder
2. Buka Form baru
3. Buat jendela tampilan dengan komponen
PaintBox,Name:PaintBox1 (default)
4. tulis kode dibawah (Bold) pada Event->OnPaint

void __fastcall TForm1::PaintBox1Click(TObject *Sender)
{
s[1].x=200;s[1].y=0;s[1].z=200;
s[2].x=0;s[2].y=0;s[2].z=200;
s[3].x=0;s[3].y=200;s[3].z=200;
s[4].x=150;s[4].y=150;s[4].z=100;
s[5].x=250;s[5].y=0;s[5].z=0;
s[6].x=0;s[6].y=0;s[6].z=0;
s[7].x=0;s[7].y=200;s[7].z=0;
s[8].x=200;s[8].y=200;s[8].z=0;
//menentukan jumla obyek dan jumlkah titik sudut
//int jumlah_obyek=1;
int max_titik=8;
//——————posisi kamera
float kx=10;
float ky=300;
float kz=400;
//———————————-
//menenutkan jarak kamera dengan fokus
float d=sqrt(kx*kx+ky*ky+kz*kz);
float dxn=kx/d;
float dyn=ky/d;
float dzn=kz/d;
//- fokus kamera atau titik pandang (VRP)
float vrp_x=50;
float vrp_y=50;
float vrp_z=50;
//——————————-
//vektor kemiringan kamera,asumsi kamera tegak lurus
float dxup=0;
float dyup=1;
float dzup=0;
//titik pusat proyeksi
float xc=0 ;
float yc=0 ;
float zc=-100;
//mennetukan batas bawah
int batasbawah=PaintBox1->ClientHeight;
//deklarasi matriks proyeksi perpektif
float perspek[4][4]=
{
//0 1 2 3
{-zc,0,0,0}, //0
{0,-zc,0,0}, //1
{xc,yc,-1,1}, //2
{0,0,0,-zc} //3
};
// matriks translasi titik koord. Cartesian (world coordinat) ke VPN
float T[4][4]=
{
{1,0,0,0},
{0,1,0,0},
{0,0,1,0},
{-(kx-vrp_x),-(ky-vrp_y),-(kz-vrp_z),1}
};
// putar sehiongga vektor n sesuai sumbu z
float v1=sqrt(dyn*dyn+dzn*dzn);
// rotasi sumbu x
float Rx[4][4]=
{
{1,0,0,0},
{0,-dzn/v1,-dyn/v1,0},
{0,dyn/v1,-dzn/v1,0},
{0,0,0,1}
};
// rorasu sumbu y;
float Ry[4][4]=
{
{v1,0,-dxn,0},
{0,1,0,0},
{dxn,0,v1,0},
{0,0,0,1}
};
// mengalikan matriks Rx * Ry
for (int i=0;i<=3;i++)
{
for (int k=0;k<=3;k++)
Rxy[i][k]=Rx[i][0] * Ry[0][k] + Rx[i][1] * Ry[1][k]+ Rx[i][2] * Ry[2][k]+
Rx[i][3] * Ry[3][k];
}
xup_vp=dxup*Rxy[0][0]+dyup*Rxy[1][0]+dzup*Rxy[2][0];
yup_vp=dxup*Rxy[0][1]+dyup*Rxy[1][1]+dzup*Rxy[2][1];
rup=sqrt(xup_vp*xup_vp+yup_vp*yup_vp);
float Rz[4][4]=
{
{yup_vp/rup,xup_vp/rup,0,0},
{-xup_vp/rup,yup_vp/rup,0,0},
{0,0,1,0},
{0,0,0,1}
};
// perklaian matriks dxy * dz
for (int i=0;i<=3;i++)
{
for (int k=0;k<=3;k++)
Rxyz[i][k]=Rxy[i][0] * Rz[0][k] + Rxy[i][1] * Rz[1][k]+ Rxy[i][2] * Rz[2][k]+
Rxy[i][3] * Rz[3][k];
}
// perkalian matriks T dan Rxyz
for (int i=0;i<=3;i++)
{
for (int k=0;k<=3;k++)
TRxyz[i][k]=T[i][0] * Rxyz[0][k] + T[i][1] * Rxyz[1][k]+
T[i][2] * Rxyz[2][k]+ T[i][3] * Rxyz[3][k];
}
//Trxyz : matrik gabungan rotasi ke 3 sumbu dan ttranlasi/matrik transformasi
//koordinat dunia ke koordinat bidang padang
// transfoemasi titik obyek ke VPN
for (int i=1;i<=8;i++) // loop poligon
{
for (int k=0;k<=3;k++) // loop titik
vpn_k[i][k]=s[i].x*TRxyz[0][k] + s[i].y * TRxyz[1][k]+s[i].z* TRxyz[2][k] + 1*
TRxyz[3][k];
}
//transfoemasi perpeksif
for (int i=1;i<=8;i++)
{
for (int k=0;k<=3;k++)
vpn_pers[i][k]=vpn_k[i][0] * perspek[0][k] + vpn_k[i][1] * perspek[1][k] +
vpn_k[i][2]

perspek[2][k]+ vpn_k[i][3] * perspek[3][k];

}
//membuat niali 1 pada matrix padaordo ke-4
for (int i=1;i<=max_titik;i++)
{
for (int k=0;k<=3;k++)
vpn_pers[i][k]=(int) vpn_pers[i][k]/vpn_pers[i][3];
}
int tengah=PaintBox1->ClientWidth/2;
// trabsformasi ke koordinat layar
for (int i=1;i<=max_titik;i++)
{
vpn_pers[i][0]=vpn_pers[i][0]+tengah;
vpn_pers[i][1]=batasbawah-vpn_pers[i][1]-50;
}
//mmebuat jendela paint box dengan warna dasa putih
PaintBox1->Canvas->Brush->Color=clWhite;
PaintBox1->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);
//nggambar polyline
//poligon 1
POINT t1[4]; //deklarasi variabel
t1[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);
t1[1]=Point(vpn_pers[2][0],vpn_pers[2][1]);
t1[2]=Point(vpn_pers[3][0],vpn_pers[3][1]);
t1[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t1[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t1,4);
//poligon 2 belakang
POINT t2[4]; //deklarasi variabel
t2[0]=Point(vpn_pers[5][0],vpn_pers[5][1]);
t2[1]=Point(vpn_pers[6][0],vpn_pers[6][1]);
t2[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);
t2[3]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t2[4]=Point(vpn_pers[5][0],vpn_pers[5][1]);
PaintBox1->Canvas->Polyline((TPoint*)t2,4);
//poligon 3 bawah
POINT t3[4]; //deklarasi variabel
t3[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);
t3[1]=Point(vpn_pers[2][0],vpn_pers[2][1]);
t3[2]=Point(vpn_pers[6][0],vpn_pers[6][1]);
t3[3]=Point(vpn_pers[5][0],vpn_pers[5][1]);
t3[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t3,4);
//poligon 4 atas
POINT t4[4]; //deklarasi variabel
t4[0]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t4[1]=Point(vpn_pers[3][0],vpn_pers[3][1]);
t4[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);
t4[3]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t4[4]=Point(vpn_pers[4][0],vpn_pers[4][1]);
PaintBox1->Canvas->Polyline((TPoint*)t4,4);
//poligon 5 kanan
POINT t5[4]; //deklarasi variabel
t5[0]=Point(vpn_pers[2][0],vpn_pers[2][1]);
t5[1]=Point(vpn_pers[6][0],vpn_pers[6][1]);
t5[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);
t5[3]=Point(vpn_pers[3][0],vpn_pers[3][1]);
t5[4]=Point(vpn_pers[2][0],vpn_pers[2][1]);
PaintBox1->Canvas->Polyline((TPoint*)t5,4);
//poligon 6 kiri
POINT t6[4]; //deklarasi variabel
t6[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);
t6[1]=Point(vpn_pers[5][0],vpn_pers[5][1]);
t6[2]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t6[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t6[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t6,4);
}
//—————————————————————————

//—————————————————————————

5. Tambahkah kode pada file header (.h) sbb (yg dicetak Bold ¸cetak regular bawaan C++)

//—————————————————————————

#ifndef Unit1H

#define Unit1H

//—————————————————————————

#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;
void __fastcall PaintBox1Click(TObject *Sender);
private: // User declarations
public: // User declarations
__fastcall TForm1(TComponent* Owner);
float Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4];
float vpn_p[8][4],TRxyz[4][4],vpn_k[8][5];
float vpn_pers[8][4];
struct titik{
int x;
int y;
int z;
}s[50];
};

//—————————————————————————
extern PACKAGE TForm1 *Form1;
//—————————————————————————

#endif

tambahkan kode pada file .cpp bagian atas(yg dicetak Bold ¸cetak regular bawaan C++)

//—————————————————————————

#include <vcl.h>

#include <math.h>

#pragma hdrstop

#include “unit1.h”

//————————————————————-

#pragma package(smart_init)

#pragma resource “*.dfm”

TForm1 *Form1;
//————————————————————–
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//—————————————————————————
6. jalankan program diatas,maka akan tampil:

2. Buat beberapa bentuk lain objek 3D dan implementasikan dalam program?

Jawab:

Programnya:

1. Buka C++ Builder
2. Buka Form baru
3. Buat jendela tampilan dengan komponen
PaintBox,Name:PaintBox1 (default)
4. tulis kode dibawah (Bold) pada Event->OnPaint :

void __fastcall TForm1::PaintBox1Paint(TObject *Sender)
{
//menentukan tiitk-titik pokok koorrdinat obyek balok
s[1].x=0;s[1].y=0;s[1].z=250;
s[2].x=250;s[2].y=0;s[2].z=250;
s[3].x=125;s[3].y=500;s[3].z=125;
s[4].x=125;s[4].y=500;s[4].z=125;
s[5].x=0;s[5].y=0;s[5].z=0;
s[6].x=250;s[6].y=0;s[6].z=0;
s[7].x=125;s[7].y=500;s[7].z=125;
s[8].x=125;s[8].y=500;s[8].z=125;
//menentukan jumla obyek dan jumlkah titik sudut
int jumlah_obyek=1;
int max_titik=8;

//——————posisi kamera
float kx=0;
float ky=50;
float kz=350;
//———————————-
//menenutkan jarak kamera dengan fokur
float d=sqrt(kx*kx+ky*ky+kz*kz);
float dxn=kx/d;
float dyn=ky/d;
float dzn=kz/d;
//- fokus kamera atau titik pandang (VRP)
float vrp_x=0;
float vrp_y=0;
float vrp_z=0;
//——————————-
//vektor kemiringan kamera,asumsi kamera tegak lurus
float dxup=0;
float dyup=1;
float dzup=0;
//titik pusat proyeksi
float xc=0 ;
float yc=0 ;
float zc=-100;
//mennetukan batas bawah
int batasbawah=PaintBox1->ClientHeight;
//deklarasi matriks proyeksi perpektif
float perspek[4][4]=
{
//0 1 2 3
{-zc,0,0,0}, //0
{0,-zc,0,0}, //1
{xc,yc,-1,1}, //2
{0,0,0,-zc} //3
};
// matriks translasi titik koord. Cartesian (world coordinat) ke VPN
float T[4][4]=
{
{1,0,0,0},
{0,1,0,0},
{0,0,1,0},
{-(kx-vrp_x),-(ky-vrp_y),-(kz-vrp_z),1}
};
// putar sehiongga vektor n sesuai sumbu z
float v1=sqrt(dyn*dyn+dzn*dzn);
// rotasi sumbu x
float Rx[4][4]=

{
{1,0,0,0},
{0,-dzn/v1,-dyn/v1,0},
{0,dyn/v1,-dzn/v1,0},
{0,0,0,1}
};
// rorasu sumbu y;
float Ry[4][4]=
{
{v1,0,-dxn,0},
{0,1,0,0},
{dxn,0,v1,0},
{0,0,0,1}
};
// mengalikan matriks Rx * Ry
for (int i=0;i<=3;i++)
{
for (int k=0;k<=3;k++)
Rxy[i][k]=Rx[i][0] * Ry[0][k] + Rx[i][1] * Ry[1][k]+ Rx[i][2] * Ry[2][k]+
Rx[i][3] * Ry[3][k];
}
xup_vp=dxup*Rxy[0][0]+dyup*Rxy[1][0]+dzup*Rxy[2][0];
yup_vp=dxup*Rxy[0][1]+dyup*Rxy[1][1]+dzup*Rxy[2][1];
rup=sqrt(xup_vp*xup_vp+yup_vp*yup_vp);
float Rz[4][4]=
{
{yup_vp/rup,xup_vp/rup,0,0},
{-xup_vp/rup,yup_vp/rup,0,0},
{0,0,1,0},
{0,0,0,1}
};
// perklaian matriks dxy * dz
for (int i=0;i<=3;i++)
{
for (int k=0;k<=3;k++)
Rxyz[i][k]=Rxy[i][0] * Rz[0][k] + Rxy[i][1] * Rz[1][k]+ Rxy[i][2] * Rz[2][k]+
Rxy[i][3] * Rz[3][k];
}
// perkalian matriks T dan Rxyz
for (int i=0;i<=3;i++)
{
for (int k=0;k<=3;k++)
TRxyz[i][k]=T[i][0] * Rxyz[0][k] + T[i][1] * Rxyz[1][k]+
T[i][2] * Rxyz[2][k]+ T[i][3] * Rxyz[3][k];

}
//Trxyz : matrik gabungan rotasi ke 3 sumbu dan ttranlasi/matrik transformasi
koordina dunia ke koordinat bidang padang
// transfoemasi titik obyek ke VPN
for (int i=1;i<=8;i++) // loop poligon
{
for (int k=0;k<=3;k++) // loop titik
vpn_k[i][k]=s[i].x*TRxyz[0][k] + s[i].y * TRxyz[1][k]+s[i].z* TRxyz[2][k] + 1*
TRxyz[3][k];
}
//transfoemasi perpeksif
for (int i=1;i<=8;i++)
{
for (int k=0;k<=3;k++)
vpn_pers[i][k]=vpn_k[i][0] * perspek[0][k] + vpn_k[i][1] * perspek[1][k] +
vpn_k[i][2]

perspek[2][k]+ vpn_k[i][3] * perspek[3][k];

}
//membuat niali 1 pada matrix padaordo ke-4
for (int i=1;i<=max_titik;i++)
{
for (int k=0;k<=3;k++)
vpn_pers[i][k]=(int) vpn_pers[i][k]/vpn_pers[i][3];
}
int tengah=PaintBox1->ClientWidth/2;
// trabsformasi ke koordinat layar
for (int i=1;i<=max_titik;i++)
{
vpn_pers[i][0]=vpn_pers[i][0]+tengah;
vpn_pers[i][1]=batasbawah-vpn_pers[i][1]-50;
}
//mmebuat jendela paint box dengan warna dasa putih
PaintBox1->Canvas->Brush->Color=clWhite;
PaintBox1->Canvas->Rectangle(1,1,ClientWidth-1,ClientHeight-1);
//nggambar polyline
//poligon 1
POINT t1[4]; //deklarasi variabel
t1[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);
t1[1]=Point(vpn_pers[2][0],vpn_pers[2][1]);
t1[2]=Point(vpn_pers[3][0],vpn_pers[3][1]);
t1[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t1[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t1,4);
//poligon 2 belakang
POINT t2[4]; //deklarasi variabel

t2[0]=Point(vpn_pers[5][0],vpn_pers[5][1]);
t2[1]=Point(vpn_pers[6][0],vpn_pers[6][1]);
t2[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);
t2[3]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t2[4]=Point(vpn_pers[5][0],vpn_pers[5][1]);
PaintBox1->Canvas->Polyline((TPoint*)t2,4);
//poligon 3 bawah
POINT t3[4]; //deklarasi variabel
t3[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);
t3[1]=Point(vpn_pers[2][0],vpn_pers[2][1]);
t3[2]=Point(vpn_pers[6][0],vpn_pers[6][1]);
t3[3]=Point(vpn_pers[5][0],vpn_pers[5][1]);
t3[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t3,4);
//poligon 4 atas
POINT t4[4]; //deklarasi variabel
t4[0]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t4[1]=Point(vpn_pers[3][0],vpn_pers[3][1]);
t4[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);
t4[3]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t4[4]=Point(vpn_pers[4][0],vpn_pers[4][1]);
PaintBox1->Canvas->Polyline((TPoint*)t4,4);
//poligon 5 kanan
POINT t5[4]; //deklarasi variabel
t5[0]=Point(vpn_pers[2][0],vpn_pers[2][1]);
t5[1]=Point(vpn_pers[6][0],vpn_pers[6][1]);
t5[2]=Point(vpn_pers[7][0],vpn_pers[7][1]);
t5[3]=Point(vpn_pers[3][0],vpn_pers[3][1]);
t5[4]=Point(vpn_pers[2][0],vpn_pers[2][1]);
PaintBox1->Canvas->Polyline((TPoint*)t5,4);
//poligon 6 kiri
POINT t6[4]; //deklarasi variabel
t6[0]=Point(vpn_pers[1][0],vpn_pers[1][1]);
t6[1]=Point(vpn_pers[5][0],vpn_pers[5][1]);
t6[2]=Point(vpn_pers[8][0],vpn_pers[8][1]);
t6[3]=Point(vpn_pers[4][0],vpn_pers[4][1]);
t6[4]=Point(vpn_pers[1][0],vpn_pers[1][1]);
PaintBox1->Canvas->Polyline((TPoint*)t6,4);

5. Tambahkah kode pada file header (.h) sbb(yg dicetak Bold ¸cetak regular bawaan C++)

//—————————————————————————

#ifndef rangkaH

#define rangkaH
//—————————————————————————

#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;
void __fastcall PaintBox1Paint(TObject *Sender);
private: // User declarations
public: // User declarations
__fastcall TForm1(TComponent* Owner);
float Rxy[4][4],Rx[4][4],xup_vp,yup_vp,rup,Rxyz[4][4];
float vpn_p[8][4],TRxyz[4][4],vpn_k[8][5];
float vpn_pers[8][4];
struct titik{
int x;
int y;
int z;
}s[50];
};
//———————————————————————extern
PACKAGE TForm1 *Form1;
//———————————————————————#endif
tambahkan kode pada file .cpp bagian atas
(yg dicetak Bold ¸cetak regular bawaan C++)
//————————————————————–
————-

#include <vcl.h>

#include <math.h>

#pragma hdrstop

#include “rangka.h”

//————————————————————-

#pragma package(smart_init)

#pragma resource “*.dfm”

TForm1 *Form1;
//————————————————————–
__fastcall TForm1::TForm1(TComponent* Owner)

6. jalankan program diatas

GRAFIKA COMPUTER SESSION IV

TRANSFORMASI OBYEK DUA DIMENSI

Grafika computer merupakan bidang yang menarik minat banyak orang. Salah satu sub bagian dari grafika adalah pemodelan objek. Dalam pemodelan objek 2D, berbagai objek dimodifikasi dengan melakukan berbagai operasi fungsi atau operasi transformasi geometri. Transformasi ini dapat berupa transformasi dasar ataupun gabungan dari berbagai transformasi geometri. Transformasi ini dikenal dengan Transformasi affine. Pada dasarnya, transformasi merupakan suatu operasi modifikasi bentuk objek tanpa merusak bentuk dasar dari objek. Salah satu contoh transformasi adalah transformasi dari window ke viewport.

Pada Viewport, Objek yang akan digambar pada layar biasanya mempunyai ukuran yang jauh lebih besar dibanding dengan ukuran layar, sehingga perlu dilakukan pemetaan transformasi yang memungkinkan objek tersebut bisa seluruhnya digambar dilayar, tetapi pada layar dengan koordinat yang terbatas, dan biasanya dibatasi oleh sebuah kotak yang disebut windows, sedangkan layarnya tersebut disebut Viewport. Proses transformasi dari windows ke viewport dapat dilhat pada gambar berikut :

1. Langkah-Langkah Transformasi Viewing 2 Dimensi

   1. Pembentukan scene pada WC menggunakan output primitif atribut.

   2. Untuk mendapatkan orientasi tertentu dari window, maka ditentukan sistem VC 2 dimensi pada WC. Frame digunakan untuk melengkapi penentuan orientasi dari windows persegi empat . Setelah frame dibentuk dapat ditransformasikan ke dalam WC untuk menampilkan koordinat.

   3. Kemudian viewport ditentukan dalam normalized NVC (pada batasan antara 0 dan 1) dan memetakan deskripsi VC dari scene pada Normalized Coordinate.

   4. Akhirnya dilakukan clipping (pemotongan) pada semua gambar yang ada diluar viewport.

   

2. Macam-macam transformasi:

   1. Transformasi Objek, yang ditransformasikan titik-titik yang menyusun objek tersebut.

   2. Transformasi Koordinat, yang diubah system koordinatnya sehingga objek mengalami transformasi dikarenakan perubahan system koordinat tersebut.

3. Tujuan Transformasi :

   1. Merubah atau menyesuaikan komposisi pandangan.

   2. Memudahkan membuat objek yang simetris

   3. Melihat objek dari sudut pandang berbeda

   4. Memindahkan satu atau beberapa objek dari satu tempat ke tempat lain, biasanya digunakan pada animasi computer.

4. Transformasi dasar pada objek dua dimensi terdiri dari :

TRANSLASI

Translasi merupakan suatu proses yang menyebabkan perpindahan objek dari satu titik ke titik lain. Translasi dilakukan dengan penambahan translasi pada suatu titik koordinat dengan translasi vector yaitu (tr_x,tr_y), dimana tr_x adalah translation vector menurut sumbu x sedangkan tr_y adalah translasi vector terhadap sumbu y.

SKALA

Transformasi skala adalah perubahan ukuran suatu objek. Penskalaan dilakukan untuk memperbesar atau memperkecil gambar

ROTASI

Rotasi merupakan bentuk transformasi berupa pemutaran objek, dilakukan dengan menambahkan besaran pada absis X dan ordinat Y. Rotasi dua dimensi pada suatu objek akan memindahkan objek tersebut menurut garis melingkar. Pada bidang xy.

SHEARING

Shearing mempunyai beberapa pengertian, antara lain :

• Shearing adalah bentuk transformasi yang membuat distorsi dari bentuk suatu objek, seperti menggeser sisi tertentu.

• Shearing adalah suatu proses untuk mentransformasikan objek dengan cara “membebani” objek tersebut kea rah tertentu, sehingga dihasilkan suatu objek yang distorsi.

Dua macam shear yang umum adalah shear menurut sumbu x dan shear menurut sumbu y.

PROJECT : TRANSFORMASI 2D

1. Terdapat pilihan tombol Atas, Kiri, Kanan dan Bawah

2. Terdapat sebuah Image untuk menampilkan objek 2 Dimensi yang akan bergeser sesuai dengan nama tombol yang ditekan. (Ada 4 tombol geser)

3. Jika tombol Kiri ditekan objek bergeser ke kiri.

4. Jika tombol Kanan ditekan objek bergeser ke kanan

5. Jika tombol Atas ditekan objek bergeser ke atas.

6. Jika tombol Bawah ditekan objek bergeser ke bawah

7. Terdapat 2 tombol putar, yakni berputas di cartesius dan berputar di tengah titik objek.

8. Buka C++ Builder dan buat tampilan seperti pada gambar berikut:

SCRIPT Program:

<UNIT1.CPP>:

#include <vcl.h>

#include <math.h>

#pragma hdrstop

#include “Unit1.h”

#pragma package(smart_init)

#pragma resource “*.dfm”

TForm1 *Form1;

struct Elemen { float x,y ;} ;

Elemen Objek[6];

//========================================================================

__fastcall TForm1::TForm1(TComponent* Owner)

: TForm(Owner)

{

}

//========================================================================

void __fastcall TForm1::FormShow(TObject *Sender)

{ int i;

Image1->Canvas->Rectangle(0,0,Image1->Width,Image1->Height);

Image1->Canvas->MoveTo(Objek[5].x,Objek[5].y);

for (i=1;i<=5;i++){ Image1->Canvas->LineTo(Objek[i].x,Objek[i].y);};

}

//========================================================================

void __fastcall TForm1::FormActivate(TObject *Sender)

{ Objek[1].x = 100; Objek[1].y = 50;

Objek[2].x = 50; Objek[2].y = 100;

Objek[3].x = 100; Objek[3].y = 100;

Objek[4].x = 100; Objek[4].y = 150;

Objek[5].x = 150; Objek[5].y = 100;

FormShow(Sender);

}

void __fastcall TForm1::ButtonkananClick(TObject *Sender)

{ int i;

for (i=1;i<=5;i++){ Objek[i].x+=5;};

FormShow(Sender);

}

//========================================================================

void __fastcall TForm1::ButtonbawahClick(TObject *Sender)

{ int i;

for (i=1;i<=5;i++){ Objek[i].y+=5;};

FormShow(Sender);

}

//========================================================================

void __fastcall TForm1::Button1Click(TObject *Sender)

{ Elemen TempObjek[6];

int i; float Sdt;

for (i=1;i<=5;i++)

{ Objek[i].x=Objek[i].x-Image1->Width / 2;

Objek[i].y=Objek[i].y-Image1->Height / 2;

Sdt=10*M_PI/180;

TempObjek[i].x=(Objek[i].x*cos(Sdt)-Objek[i].y*sin(Sdt));

TempObjek[i].y=(Objek[i].x*sin(Sdt)+Objek[i].y*cos(Sdt));

Objek[i]=TempObjek[i];

Objek[i].x=Objek[i].x+Image1->Width / 2;

Objek[i].y=Objek[i].y+Image1->Height / 2;

} FormShow(Sender);

}

void __fastcall TForm1::Button2Click(TObject *Sender)

{ Elemen TempObjek[6];

int i,n,m; float Sdt;

for (i=1;i<=5;i++)

{

n = Objek[3].x;

m = Objek[3].y;

Objek[i].x=Objek[i].x-n;

Objek[i].y=Objek[i].y-m;

Sdt=10*M_PI/180;

TempObjek[i].x=(Objek[i].x*cos(Sdt)-Objek[i].y*sin(Sdt));

TempObjek[i].y=(Objek[i].x*sin(Sdt)+Objek[i].y*cos(Sdt));

Objek[i]=TempObjek[i];

Objek[i].x=Objek[i].x+n;

Objek[i].y=Objek[i].y+m;

}

FormShow(Sender);

}

void __fastcall TForm1::ButtonkiriClick(TObject *Sender)

{ int i;

for (i=1;i<=5;i++){ Objek[i].x-=5;};

FormShow(Sender);

}

//========================================================================

void __fastcall TForm1::ButtonatasClick(TObject *Sender)

{

int i;

for (i=1;i<=5;i++){ Objek[i].y-=5;};

FormShow(Sender);

}

//=======================================================================

<UNIT1.H>:

//—————————————————————————
#ifndef Unit1H
#define Unit1H
//—————————————————————————
#include <Classes.hpp>
#include <Controls.hpp>
#include <StdCtrls.hpp>
#include <Forms.hpp>
#include <ExtCtrls.hpp>
//—————————————————————————
class TForm1 : public TForm
{
__published: // IDE-managed Components
TPanel *Panel1;
TImage *Image1;
TButton *Button1;
TButton *Button2;
TButton *Buttonatas;
TButton *Buttonbawah;
TButton *Buttonkiri;
TButton *Buttonkanan;
void __fastcall FormActivate(TObject *Sender);
void __fastcall ButtonkananClick(TObject *Sender);
void __fastcall ButtonbawahClick(TObject *Sender);
void __fastcall Button1Click(TObject *Sender);
void __fastcall Button2Click(TObject *Sender);
void __fastcall ButtonkiriClick(TObject *Sender);
void __fastcall ButtonatasClick(TObject *Sender);
void __fastcall FormShow(TObject *Sender);

private: // User declarations
public: // User declarations
__fastcall TForm1(TComponent* Owner);

};
//—————————————————————————
extern PACKAGE TForm1 *Form1;
//—————————————————————————
#endif

Jalankan program diatas dan hasil yang akan kita dapatkan seperti gambar berikut:

GRAFIKA COMPUTER SESSION III

LINGKARAN

Untuk membentuk suatu lingkaran, ada beberapa algoritma yang bisa digunakan :

a. ALGORITMA LINGKARAN 8 TITIK SIMETRIS

Proses pembentukan lingkaran dengan algoritma ini dapat dilakukan dengan menentukan suatu titik awal. Bila titik awal pada lingkaran (x,y) maka terdapat tiga posisi lain, sehingga dapat diperoleh delapan titik. Dengan demikian sebenarnya hanya diperlukan untuk menghitung segmen 45⁰ dalam menentukan lingkaran selengkapnya. Dengan titik pusat lingkaran yang tertentu, delapan titik simetris dapat ditampilkan seperti pada gambar berikut :

Persamaan untuk menentukan koordinat titik-titik yang terletak pada sebuah piksel dengan menentukan sebuah besarnya sudut terhadap sumbu X. Memang bisa menggambar lingkaran dengan seperti ini tapi memerlukan ketelitian yang cukup tinggi. Dalam pembuatan lingkaran dapat dilakukan dengan menentukan suatu titik awal. Dalam lingkaran terdapat empat posisi, sehingga dapat diperoleh delapan titik. Dari kedelapan titik simetris ini masing-masing akan dihubungkan untuk membentuk suatu lingkaran. Procedure pembentukan lingkaran dengan menggunakan 8 titik simetris adalah sebagai berikut :

a. ALGORITMA LINGKARAN TITIK TENGAH (MID POINT)

Algoritma mid point juga disebut algoritma lingkaran Bressenham. Bressenham mengembangkan generator lingkaran yang cukup efisien. Algoritma yang digunakan membentuk semua titik berdasarkan titik pusat dengan penambahan semua jalur disekeliling lingkaran. Algoritma ini diturunkan dari algoritma mid point untuk pembentukan garis. Dalam hal ini hanya diperhatikan bagian 45⁰ dari suatu lingkaran, yaitu oktan kedua dari x=0 ke x=R/√2 dan dengan menggunakan procedure 8 titik simetris untuk menampilkan titik dari seluruh lingkaran seperti pada gambar berikut :

Mid point diantara ke dua pixel dapat dilihat pada gambar berikut :

Contoh Program pembentukan lingkaran dengan algoritma mid point

Diketahui jari-jari lingkaran r = 10 dan titik pusat (0,0)

· Buatlah table perhitungan untuk titik yang dihasilkan oleh algoritma mid points

· Buat prosedur untuk mengimplementasikan algoritma tersebut.

Jawab

· Tabel perhitungan

Penggambaran lingkaran dengan algoritma mid point untuk titik pusat (0,0), dimulai dari kuadran pertama yaitu dari x = 0 ke x = y.

Nilai awal parameter keputusan adalah :

P0= 1 – R

P0= 1 – 10

P0= – 9

Untuk lingkaran yang berpusat pada koordinat awal, titik awal adalah (X0,Y0)=(0,10), dan nilai kenaikan untuk penghitungan parameter keputusan adalah :

2 X0 = 0 2 Y0 = 20

Perhitungan dapat dilihat pada table berikut :

Ø Algoritma Lingkaran Midpoint

Algoritma ini sering juga disebut algoritma lingkaran Bressenham. Algoritma yang digunakan membentuk semua titik berdasarkan titik pusat dengan penambahan semua jalur disekeliling lingkaran. Algoritma ini diturunkan dari algoritma midpoint untuk pembentukan garis. Dalam hal ini hanya diperhatikan bagian 45 derajat dari suatu lingkaran, yaitu oktan kedua dari x=0 ke x=R/√2 dan menggunkan procedure CirclePoints untuk menampilkan titik dari seluruh lingkaran.

MEMBUAT CIRCLE

Ø Pembuatan IMAGE

Klik Additional->Image, Kemudian drag di daerah form1. Image ini memiliki nama Image1 dan merupakan area untuk menggambar.

Ø Membuat RADIOGROUP

Klik Standard kemudian pilihlah RadioGroup. Kemudian drag pada grid.

Untuk membuat pilihan di dalam RadioGroup, pilih items pada properties, kemudian ketikan pilihan-pilihannya

· Program

Untuk proses pengkodean pembentukan lingkaran mid point diperlukan fungsi utama yaitu dan beberapa fungsi lain untuk inisialisasi dan tampilan. Adapun script dari fungsi-fungsi tersebut adalah :

Pada Unit1.cpp , ketikkan source:

//————————————————————————— #include <vcl.h> #pragma hdrstop #include <stdlib.h> #include <math.h> #include “Unit1.h” //————————————————————————— #pragma package(smart_init) #pragma resource “*.dfm” TForm1 *Form1; int tergambar, XC,YC,QX,QY; //————————————————————————— __fastcall TForm1::TForm1(TComponent* Owner) : TForm(Owner) { } //————————————————————————— void __fastcall TForm1::FormActivate(TObject *Sender) { Image1->Canvas->Rectangle(0,0,Image1->Width,Image1->Height); } //==================================================================== void __fastcall TForm1::BtCloseClick(TObject *Sender) { Close(); } //==================================================================== void __fastcall TForm1::BtBaruClick(TObject *Sender) { tergambar=false; Image1->Canvas->Rectangle(0,0,Image1->Width,Image1->Height); } //==================================================================== void __fastcall TForm1::Image1MouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y) { tergambar=true; XC=X; YC=Y; } //==================================================================== void __fastcall TForm1::CirclePlotpoint(int XC, int YC, int X, int Y) { Image1->Canvas->Pixels[XC+X][YC+Y]=clGreen; Image1->Canvas->Pixels[XC-X][YC+Y]=clBlack; Image1->Canvas->Pixels[XC+X][YC-Y]=clBlue; Image1->Canvas->Pixels[XC-X][YC-Y]=clYellow; Image1->Canvas->Pixels[XC+Y][YC+X]=clRed; Image1->Canvas->Pixels[XC-Y][YC+X]=clBlack; Image1->Canvas->Pixels[XC+Y][YC-X]=clRed; Image1->Canvas->Pixels[XC-Y][YC-X]=clBlack; } void __fastcall TForm1::Image1MouseUp(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y) { int R; BtBaruClick(Sender); tergambar=false; QX=X; QY=Y; R=int(sqrt(pow(XC-QX,2)+pow(YC-QY,2))); if (RadioGroup1->ItemIndex==0) { CircleMidPoint(XC,YC,R); } } //==================================================================== void __fastcall TForm1::CircleMidPoint(int XC, int YC,int R) {int x,y,p,k=0; R=10; x=0; y=R; p=1-R; judul((float)x,(float)y,k,p); do { k++; if (p<0) { x=x+1; } else { x=x+1; y=y-1; } if (p<0) { p=p+2*x+1; } else { p=p+2*(x-y)+1; } CirclePlotpoint(XC,YC,x,y); tampil((float)x,(float)y,k,p); } while (x<y); } //==================================================================== void __fastcall TForm1::tampil(float x,float y, int k, int p) { { char tampilX[20],tampilY[20],tampilK[20],tampilPk[20]; int i,xt=200, yt=15; //Menampilkan bilangan asli tanpa pembulatan _gcvt(x,7,tampilX); _gcvt(y,7,tampilY); _gcvt(p,7,tampilPk); if (k==0) { for (i=0; i<20;i++) { tampilK[i]=”; } } else { _gcvt(k-1,10,tampilK); } k=k+2; //Menampilkan koordinat X dan Y Image1->Canvas->TextOut(xt-50, k*yt,tampilK); Image1->Canvas->TextOut(xt+100, k*yt,”(“); Image1->Canvas->TextOut(xt+120, k*yt,tampilX); Image1->Canvas->TextOut(xt+150, k*yt,”,”); Image1->Canvas->TextOut(xt+160, k*yt,tampilY); Image1->Canvas->TextOut(xt+190, k*yt,”)”); Image1->Canvas->TextOut(xt, k*yt,tampilPk); } } void __fastcall TForm1::judul(float x,float y, int k, int p) { int xt=200, yt=15, kt=2; Image1->Canvas->TextOut(xt-50,(kt-1)*yt,”k”); Image1->Canvas->TextOut(xt, (kt-1)*yt,”pk”); Image1->Canvas->TextOut(xt+100, (kt-1)*yt,”(x k+1,y k+1)”); } //————————————————————————— //—————————————————————————

Sedangkan pada unit1.h ,ketikkan source:

#include <Controls.hpp> #include <StdCtrls.hpp> #include <Forms.hpp> #include <ExtCtrls.hpp> //————————————————————————— class TForm1 : public TForm { __published: // IDE-managed Components TImage *Image1; TButton *Button1; TButton *Button2; TRadioGroup *RadioGroup1; void __fastcall Image1MouseUp(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y); void __fastcall Image1MouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y); void __fastcall CircleMidPoint(int XC, int YC,int R); void __fastcall CirclePlotpoint(int XC, int YC, int X, int Y); void __fastcall FormActivate(TObject *Sender); void __fastcall BtCloseClick(TObject *Sender); void __fastcall BtBaruClick(TObject *Sender); void __fastcall tampil(float x,float y, int k, int p); void __fastcall judul(float x,float y, int k, int p); private: // User declarations public: // User declarations __fastcall TForm1(TComponent* Owner); }; //————————————————————————— extern PACKAGE TForm1 *Form1; //————————————————————————— #endif

Bentuk Form nya adalah:

Penjelasan fungsi mid point:

Langkah – langkah tersebut terdapat dalam fungsi pembuatan source code mid point, sebagai berikut:

SEMOGA BERMANFAAT( HAPPY CODING:) )