Project

Grafika Komputer

‘ Pegunungan Nyaman ‘

April Fatmasari
7409040030 / 2 D4 IT-A

Teknik Informatika
Politeknik Elektronika Negeri Surabaya
ITS
Grafika Komputer April Fatmasari | 709040030

TEMA
Daerah pegunungan yang nyaman

INTRODUCING
Dalam pembuatan pemandangan ini dibutuhkan beberapa fungsi-fungsi utama yang
mengenterpretasikan berbagai macam obyek pendukung yang dapat dipanggil menggunakan
fungsi userdraw(). Selain itu juga ada fungsi-fungsi dasar yang mendukung terbentuknya fungsi-
fungsi tersebut seperti fungsi warna, fungsi lingkaran, fungsi pembentuk obyek2D, dll.

#include <stdlib.h>
#include <gl/glut.h>
#include <math.h>
Grafika Komputer April Fatmasari | 709040030

#include <time.h>
#include <fstream.h>
// Definisi struktur data
typedef struct {
float x,y;
} point2D_t;

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

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

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

typedef struct {
point2D_t p,p0;
float d,s;
} obyek_t;

// Setting warna
void setColor(float r,float g,float b){
glColor3f(r,g,b);
}

void setColor(color_t col){

glColor3f(col.r,col.g,col.b);
}

// Konversi Data
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];
Grafika Komputer April Fatmasari | 709040030

return pnt;
}

// Definisi dan pengolahan matrik

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 translationMTX(float dx,float dy)

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

matrix2D_t scalingMTX(float mx,float my)

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

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

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++) 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];
Grafika Komputer April Fatmasari | 709040030

}
return c;
}

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

// Fungsi-fungsi untuk menggambar

void drawDot(float x,float y){
glBegin(GL_POINTS);
glVertex2f(x,y);
glEnd();
}

void drawLine(float x1, float y1, float x2,float y2){

glBegin(GL_LINES);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glEnd();
}

void drawLine6p(float x1, float y1, float x2,float y2,int m,color_t col){
setColor(col);
glLineWidth(m);
glBegin(GL_LINES);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glEnd();
}

void drawPolyline(point2D_t p[],int n){

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

void drawPolygon(point2D_t p[],int n){

glBegin(GL_LINE_LOOP);
for(int i=0;i<n;i++) glVertex2f(p[i].x,p[i].y);
Grafika Komputer April Fatmasari | 709040030

glEnd();
}

void fillPolygon(point2D_t p[], color_t col,int n){

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

void gradatePolygon(point2D_t p[],color_t col[],int n){

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

void centerPolygon(point2D_t pnt[],point2D_t pc,int num, color_t col1,color_t col2)

{
int i;
glBegin(GL_LINES);
for (i=0;i<num;i++) {
setColor(col1);
glVertex2f(pnt[i].x, pnt[i].y);
setColor(col2);
glVertex2f(pc.x, pc.y);
}
glEnd();
}

static void createCircle(point2D_t p[],float r){

for(int i=0;i<360;i++){
p[i].x=r*cos(i/57.3);
p[i].y=r*sin(i/57.3);
}
}
void drawCircle(float x,float y,float a,float b,int deg1,int deg2)
{
point2D_t shape[361];
double srad;
for(int s=0;s<deg2-deg1;s++)
{
srad=(s+deg1)*3.14/180;
shape[s].x=(float)(a*cos(srad)+x);
shape[s].y=(float)(b*sin(srad)+y);
}
Grafika Komputer April Fatmasari | 709040030

drawPolyline(shape,deg2-deg1);
};

static void createPolar(point2D_t p[],float r[]){

for(int i=0;i<360;i++){
p[i].x=r[i]*cos(i/57.3);
p[i].y=r[i]*sin(i/57.3);
}
}
point2D_t interpolate2D(point2D_t p1,point2D_t p2,int k,int n)
{
point2D_t q;
q.x=p1.x+(float)k*(p2.x-p1.x)/n;
q.y=p1.y+(float)k*(p2.y-p1.y)/n;
return q;
}

void Polygone(point2D_t pnt[],color_t col, int n,int size){

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

GAMBARAN UMUM
Project yang saya buat ini menggambarkan suatu pemandangan desa yang aman, nyaman dan
tentram. Ada satu gubuk kecil untuk peristirahatn orang – orang yang akan melancong. Suasana
deret pegunungan sangat terasa dengan aliran sungai yang lumayan deras dan di saat cuaca
tidak mendung menambah kesan sejuk.

STRUKTURAL GAMBAR
POHON
Grafika Komputer April Fatmasari | 709040030

Untuk pohon, menggambar dengan menggunakan fungsi point2vector kemudian dilakukan

translasi sebesar -45, setelah itu memanggil fungsi vector2point. Pewarnaannya dengan funsgi
gradatePolygon yang memberikan parameter point2D_t, color_t, int n(jumlah titik koordinat
yang dibuat).

Menggambar dedaunan pohon menggunakan fungsi koordinat polar dengan nilai r=5, r=4, r=2
dan r=2,5 sehingga terbentuk lengkung – lengkung seperti pada gambar. Pewarnaan daun
dengan memanggil fungsi fillPolygon, warna yang dihasilkan tidak bergradasi seperti batang
pohon. Karena fillPolygon hanya mendeklarasikan untuk satu warna tanpa disertai titik
koordinat.

/*tampil pohon*/
point2D_t batangPohon1[14]={{22.5,-14},{22.4,-11},
{22.5,-7},{22.4,-5},{22.5,-3.5},{22.4,-1},{23.4,1},{24.3,0},
{24.5,-2},{25,-6},{25.5,-11},{26,-13},{27,-13.5},{28.5,-14}};
point2D_t batangPohon2[5]={{22.5,-14},{20,-14},{21,-13.5},{21.8,-13},{22.4,-11}};
point2D_t cabang1[8]={{22.4,-5},{22,-4},{21.3,-3},{19.6,-2.4},{20,-2.8},
{20,-1.2},{21,-2.5},{22.5,-3.5}};
point2D_t cabang2[7]={{22.4,-1},{21.8,2},{21,4},{21.5,4},{22,3.5},
{23,1.5},{23.4,1}};
point2D_t cabang3[8]={{23.4,1},{23.6,2},{24,3},{24.6,4},{25,2.5},{25.5,2.2},
{25,1.2},{24.3,-1}};
for(i=0;i<14;i++)
{
vecBatang1=point2vector(batangPohon1[i]);
vecBatang1=translationMTX(-45,0)*vecBatang1;
batangPohon1a[i]=vector2point(vecBatang1);
}
for(i=0;i<5;i++)
{
vecBatang2=point2vector(batangPohon2[i]);
vecBatang2=translationMTX(-45,0)*vecBatang2;
Grafika Komputer April Fatmasari | 709040030

batangPohon2a[i]=vector2point(vecBatang2);
}
for(i=0;i<8;i++)
{
vecCabang1=point2vector(cabang1[i]);
vecCabang1=translationMTX(-45,0)*vecCabang1;
cabang1a[i]=vector2point(vecCabang1);
vecCabang3=point2vector(cabang3[i]);
vecCabang3=translationMTX(-45,0)*vecCabang3;
cabang3a[i]=vector2point(vecCabang3);
}
for(i=0;i<7;i++)
{
vecCabang2=point2vector(cabang2[i]);
vecCabang2=translationMTX(-45,0)*vecCabang2;
cabang2a[i]=vector2point(vecCabang2);
}
gradatePolygon(batangPohon1,coklat2,14);
gradatePolygon(batangPohon2,coklat2,5);
gradatePolygon(cabang1,coklat2,8);
gradatePolygon(cabang2,coklat2,7);
gradatePolygon(cabang3,coklat2,8);
//gambar daun pohon
for(s=0;s<360;s++)
{ srad=(s)*3.14/180;
r=4;
daun1[s].x=(float) (r*cos(srad))+21;
daun1[s].y=(float) (r*sin(srad))+5;
r=4;
daun2[s].x=(float) (r*cos(srad))+26;
daun2[s].y=(float) (r*sin(srad))+4;
r=4;
daun3[s].x=(float) (r*cos(srad))+20;
daun3[s].y=(float) (r*sin(srad))+9;
r=5;
daun4[s].x=(float) (r*cos(srad))+24;
daun4[s].y=(float) (r*sin(srad))+9;
r=2;
daun5[s].x=(float) (r*cos(srad))+19;
daun5[s].y=(float) (r*sin(srad))-1;
r=2.5;
daun6[s].x=(float) (r*cos(srad))+17.5;
daun6[s].y=(float) (r*sin(srad));
}
fillPolygon(daun1,hijau,360);
fillPolygon(daun2,hijau,360);
fillPolygon(daun3,hijau,360);
fillPolygon(daun4,hijau,360);
Grafika Komputer April Fatmasari | 709040030

fillPolygon(daun5,hijau,360);
fillPolygon(daun6,hijau,360);

AWAN
Keadaan I

Keadaan II

Pembuatan awan, lengkung – lengkungnya dengan menggunakan fungsi koordinat polar

sebanyak 8 lengkungan. Untuk pergerakan awan, bergeser ke kiri menggunakan fungsi translasi,
dengan titik -50* tick yang sebelumnya diubah menjadi point2vector. Untuk pewarnaannya
dengan memanggil fungsi fillPolygon.

/*tampil awan*/
for(int s=0;s<360;s++)
{
srad=(s)*3.14/180;
r=1.5;
r=4;
awan1[s].x=(float) (r*cos(srad))+20;
awan1[s].y=(float) (r*sin(srad))+30;
r=2.3;
awan2[s].x=(float) (r*cos(srad))+17;
awan2[s].y=(float) (r*sin(srad))+33;
r=2.3;
awan3[s].x=(float) (r*cos(srad))+12;
awan3[s].y=(float) (r*sin(srad))+30.5;
r=2.5;
awan4[s].x=(float) (r*cos(srad))+15;
awan4[s].y=(float) (r*sin(srad))+30;
r=2.5;
awan9[s].x=(float) (r*cos(srad))+24.5;
awan9[s].y=(float) (r*sin(srad))+28;
//awan bawah
r=2.4;
awan5[s].x=(float) (r*cos(srad))-20;
awan5[s].y=(float) (r*sin(srad))+28;
r=3;
awan6[s].x=(float) (r*cos(srad))-17;
awan6[s].y=(float) (r*sin(srad))+29;
r=1.5;
awan7[s].x=(float) (r*cos(srad))-12;
awan7[s].y=(float) (r*sin(srad))+30;
Grafika Komputer April Fatmasari | 709040030

r=2.3;
awan8[s].x=(float) (r*cos(srad))-14;
awan8[s].y=(float) (r*sin(srad))+31;

}
//gerak awan
for(i=0;i<360;i++){
vecAwan1=point2vector(awan1[i]);
vecAwan1=translationMTX(10+(-50*tick),0)*vecAwan1;
awan1[i]=vector2point(vecAwan1);
vecAwan2=point2vector(awan2[i]);
vecAwan2=translationMTX(10+(-50*tick),0)*vecAwan2;
awan2[i]=vector2point(vecAwan2);
vecAwan3=point2vector(awan3[i]);
vecAwan3=translationMTX(10+(-50*tick),0)*vecAwan3;
awan3[i]=vector2point(vecAwan3);
vecAwan4=point2vector(awan4[i]);
vecAwan4=translationMTX(10+(-50*tick),0)*vecAwan4;
awan4[i]=vector2point(vecAwan4);
vecAwan5=point2vector(awan9[i]);
vecAwan5=translationMTX(10+(-50*tick),0)*vecAwan5;
awan9[i]=vector2point(vecAwan5);
vecAwan6=point2vector(awan5[i]);
vecAwan6=translationMTX(10+(-50*tick),0)*vecAwan6;
awan5[i]=vector2point(vecAwan6);
vecAwan7=point2vector(awan6[i]);
vecAwan7=translationMTX(10+(-50*tick),0)*vecAwan7;
awan6[i]=vector2point(vecAwan7);
vecAwan8=point2vector(awan7[i]);
vecAwan8=translationMTX(10+(-50*tick),0)*vecAwan8;
awan7[i]=vector2point(vecAwan8);
vecAwan9=point2vector(awan8[i]);
vecAwan9=translationMTX(10+(-50*tick),0)*vecAwan9;
awan8[i]=vector2point(vecAwan9);
}

fillPolygon(awan1,putih,360);
fillPolygon(awan2,putih,360);
fillPolygon(awan3,putih,360);
fillPolygon(awan4,putih,360);
fillPolygon(awan9,putih,360);
fillPolygon(awan5,putih,360);
fillPolygon(awan6,putih,360);
fillPolygon(awan7,putih,360);
fillPolygon(awan8,putih,360);
//tick
a+=d;
if(a>n || a<0) d=-d;
Grafika Komputer April Fatmasari | 709040030

if(tick3>2) tick3=0;
if(tick>1) tick=0;
tick2+=0.0001;
tick+=0.0002;
tick3+=0.0001

GUBUK

Penggambaran gubuk teresbut secara primitive dengan drawline satu persatu garis- garis.
Fungsi glLineWidth untuk ketebalan garis gambar dan pewarnaannya denganmenggunakan
fillPolygon.
Untuk menggambar jalan dengan menggunakan point2D_t, pewarnaan juga secara fillPolygon.
/*tampil gubuk*/
point2D_t jalanRumah[4]={{-20,-10},{-23,-10},{-24,-17},{-19,-17}};
glLineWidth(2);
setColor(0.3,0,0);
//depan kiri
drawLine(-24,-10,-26,-9);
drawLine(-26,-9,-26, -2.5);
drawLine(-24,-2.5,-24,-10);
drawLine(-24,-10,-21.5,-9.5);
drawLine(-24,-8,-21.5,-7.5);
drawLine(-21.5,-9.5,-21.5,-7.5);
drawLine(-24,-8,-26,-7);
drawLine(-23.6,-7.8,-23.6,-9.8);
drawLine(-23.2,-7.7,-23.2,-9.7);
drawLine(-22.8,-7.6,-22.8,-9.7);
drawLine(-22.4,-7.5,-22.4,-9.6);
drawLine(-21.9,-7.5,-21.9,-9.5);
//samping kiri
drawLine(-26,-7,-20,-6);
drawLine(-25.6,-7.4,-25.6,-9.4);
drawLine(-25.2,-7.6,-25.2,-9.6);
drawLine(-24.6,-7.9,-24.6,-9.9);
//depan kanan
drawLine(-18,-3.5,-18,-9);
drawLine(-18,-9,-20.5,-9.5);
drawLine(-20.5,-9.5,-20.5,-7.5);
drawLine(-20.5,-7.5,-18,-7);
drawLine(-20,-7.5,-20,-9.5);
drawLine(-19.6,-7.4,-19.6,-9.4);
Grafika Komputer April Fatmasari | 709040030

drawLine(-19.2,-7.3,-19.2,-9.3);
drawLine(-18.8,-7.2,-18.8,-9.2);
drawLine(-18.4,-7.1,-18.4,-9.1);
//
drawLine(-18,-7,-20,-6);
drawLine(-20,-6,-20,-7.2);
drawLine(-20,-7.2,-22,-7.8);
//
drawLine(-20,-3.8,-20,-6);
//
//ke atap
drawLine(-25,-1,-27,-4);
drawLine(-27,-4,-26,-4);
drawLine(-25,-1,-23,-4);
drawLine(-25,-1,-19,-0.5);
drawLine(-23,-4,-17,-3.5);
drawLine(-19,-0.5,-17,-3.5);
point2D_t atap[4]={{-17,-3.5},{-23,-4},{-25,-1},{-19,-0.5}};
point2D_t atap2[3]={{-25,-1},{-27,-4},{-26,-4}};
fillPolygon(atap,brotu,4);
fillPolygon(atap2,brotu,3);
fillPolygon(jalanRumah,coklatTua,4);

RUMPUT

Rumput yang digambar ini dengan point2D_t yang diubah terlebih dahulu menjadi vector untuk
ditranslasikan kemudian diubah kembali dengan fungsi vector2point. Pewarnaannya secara
gradatePolygon sehingga dihasilkan gradasi warna seperti pada gambar.
/*rumput*/
point2D_t rumput[12]={{-30,-18},{-27,-16},{-29,-15.5},{-27.5,-14},
{-29.5,-15},{-30,-12},{-30,-15},{-31.5,-13.5},{-31,-15.5},
{-32.5,-15},{-31.5,-16.5},{-29,-17}};
for(i=0;i<12;i++)
{
vecRumput=point2vector(rumput[i]);
vecRumput=translationMTX((5*j)/2,0)*vecRumput;
rumput[i]=vector2point(vecRumput);
}
gradatePolygon(rumput,warnagunung,12);

PEGUNUNGAN
Grafika Komputer April Fatmasari | 709040030

Menggambar 3 gunung dengan penggunaan point2D_t sebanyak 3 juga , untuk titik-titik

koordinatnya juga banyak supaya dihasilkan gambar gunung yang tidak kaku(lancip) dan
pewarnaannya secara gradatePolygon dengan titik yang banyak agar dihasilkan warna
kombinasi yang pas.
/*tampil gunung*/
point2D_t gunung[18]={{-30,0},{-28,3},{-26,4},{-24,6},{-11,12},{-12,17},
{-10,19},{-7,21},{-2,25},{-1,25},{1,24.5},{4,23},{8,20},{16,12},
{22,9},{24,9},{26,8},{32,0}};
point2D_t gunung2[5]= {{20,9}, {26, 12}, {28,20}, {32,25}, {32, 0}};
point2D_t gunung3[5]= {{-22, 7.5}, {-24, 12}, {-29, 20}, {-30,23}, {-30, 0}};
gradatePolygon(gunung,warnagunung,18);
gradatePolygon(gunung2,warnagunung2, 5);
gradatePolygon(gunung3,warnagunung3, 5);

LANGIT
Penggambaran langit hanya membagi koordinat yang atas menjadi persegi panjang kemudian
diberikan gradasi warna biru langit yang pas.
/*tampil langit*/
point2D_t langit[4]={{-30,0},{-30,40},{32,40},{32,0}};
gradatePolygon(langit,biru1,4);

SUNGAI
Penggambaran sungai dengan membagi menjadi 4 koordinat dengan penggunaan transalsi
dengan nilai y=-52* vecsungai. kemudian diberikan gradasi warna biru sungai yang pas.
Riak air yang dibuat secara random dengan memanffatkan sperti menggambar titik banyak
namun panjangnya berbeda.
for(i=0;i<4;i++
{
vecSungai=point2vector(langit[i]);
vecSungai=translationMTX(0,-57)*vecSungai;
sungai[i]=vector2point(vecSungai);
}
gradatePolygon(sungai,biru1,4);
/* Menggambar riak air*/
float ra,xra,yra;
Grafika Komputer April Fatmasari | 709040030

color_t cra;
for(i=0;i<20;i++){
ra=(float)5*rand()/RAND_MAX;
xra=(float)(100-ra)*rand()/RAND_MAX-32;
yra=(float)8*rand()/RAND_MAX-28;
cra.b=0; cra.g=0-(60-yra)/2; cra.r=0-(60-yra)/2;
setColor(cra);
drawLine(xra,yra,xra+ra,yra);
}

MENGGAMBAR DARATAN
Penggambaran daratan membagi menjadi 4 koordinat persegi panjang kemudian diberikan
gradasi warna hijau.

for(i=0;i<4;i++)
{
vecDaratan=point2vector(langit[i]);
vecDaratan=translationMTX(0,-40)*vecDaratan;
daratan[i]=vector2point(vecDaratan);
}
gradatePolygon(daratan,warnaDaratan,4);

FUNGSI LAIN

void display(void) {
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}

int main (int argc, char ** argv){

glutInit(&argc,argv);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(50,50);
glutInitWindowSize(750,600);
glutCreateWindow("Pandang");
glClearColor(1,1,1,1);
gluOrtho2D(-30,30,-30,30);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}