Download - Grafik 2d(New)
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 1/24
GRAFIK
2-DIMENSI
Achmad BasukiPoliteknik Elektronika Negeri Surabaya
PENS-ITSSurabaya 2002
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 2/24
Tujuan
Mempelajari struktur dasar obyek grafik 2-D
Membangun obyek grafik 2-D
Mengenal macam-macam obyek 2-Dyang menarik dan berguna, seperti
pembuatan grafik untuk keperluanvisualisasi dan analisa
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 3/24
Materi
Definisi Obyek Grafik 2-D
PolyLine
Mewarnai Area (FillPolygon)
Membangun Obyek Grafik 2-D
Animasi 2-D
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 4/24
Definisi Obyek Grafik 2-D
Obyek grafik 2-D adalah sekumpulan titik-titik 2-D yang dihubungkan dengan garislurus baik berupa polyline, polygon ataukurva
Obyek grafik 2-D didefinisikan sebagaisekumpulan titik 2-D yang secarakomputasi dinyatakan sebagai array 1-D,
atau linked-list.
Dalam tulisan ini, dibahas obyek grafik 2-D yangdinyatakan sebagai array dan antar titiknya dihubungkan
dengan garis lurus ( polyline)
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 5/24
Langkah-Langkah Untuk Mendefinisikan Obyek Grafik 2-D
Mendefinisikan struktur dari titik 2-D
(Point2D_t) Mendefinisikan struktur warna (Color_t)
Mendefinisikan struktur dari obyek grafik
2-D sebagai array dari titik 2-D(Object2D_t)
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 6/24
Mendefinisikan Titik 2-D
typedef struct {float x;float y;
} point2D_t;
Definisi ini digunakan bila titik didefinisikan dalam sistem
koordinat yang menggunakan
bilangan pecahan ( float )
typedef struct {
int x;int y;
} point2D_t;
Definisi ini digunakan bila titik
didefinisikan dalam sistemkoordinat yang menggunakan
bilangan bulat (integer )
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 7/24
Mendefinisikan Warna
typedef struct {float r;float g;
float b;} color_t;
Warna terdiri dari 3 elemenwarna yaitu red (r), green (g)
dan blue (b) yang nilainya
antara 0 dan 1
void setColor(color_t col){
glColor3f(col.r, col.g, col.b);
}
Fungsi untuk memberi warna pada obyek grafik:
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 8/24
Mendefinisikan Obyek Grafik 2-D
Definisi obyek ini dapat dituliskan pada function userdraw secara langsung denganmenyatakannya sebagai array dari titik 2-D.
Sebagai contoh untuk menyatakan obyek shape dapat dituliskan:
Untuk menyatakan obyek bunga dapatdituliskan:
point2D_t shape[1000]
point2D_t bunga[360]
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 9/24
PolyLine
Polyline adalah suatu fungsi yang digunakanuntuk menggambarkan obyek 2-D yang
sudah didefinisikan di depan.
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();
}
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 10/24
Polygon
Polygon adalah suatu fungsi yang miripdengan polyline hanya saja hasilnya adalahkurva tertutup, sedangkan polyline hasilnya
kurva terbuka
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();
}
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 11/24
FillPolygon
Fungsi ini digunakan untuk mewarnaisebuah polygon dengan warna tertentu
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();
}
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 12/24
GradatePolygon
Fungsi ini digunakan untuk mewarnai sebuahpolygon dengan warna-warna yang bergradiasi
dari suatu warna ke warna lainnya
void GradatePolygon(point2D_t pnt[],intn, color_t color[]){
int i;glBegin(GL_POLYGON);
for (i=0;i<n;i++) {setColor(color[i]);glVertex2f(pnt[i].x, pnt[i].y);
}glEnd();
}
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 13/24
Membangun Obyek Grafik 2-D
Membangun obyek grafik 2-Ddapat dilakukan dengan:
Membuat obyek grafik 2-D secara
langsung. Membuat obyek grafik 2-D secara
perhitungan matematis.
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 14/24
Membuat Obyek Grafik 2-D Secara Langsung
Membuat obyek grafik 2-D secara langsungbisa dilakukan pada function userdraw()
dengan menyatakan secara langsungkoordinat titik-titiknya
void userdraw()
{ point2D_t kotak[4]={{100,100},{300,100},
{300,200},{100,200}};
drawPolygon(kotak,4);
}
Program ini digunakan untuk membuat kotak
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 15/24
Contoh Membuat Bintang
void userdraw()
{ point2D_t bintang[10]={{80,146},{99,90},
{157,90},{110,55},{128,1},
{80,34},{32,1},{54,55},
{3,90},{63,90}};
drawPolygon(bintang,10);
}
My Star
Hasilnya adalah:
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 16/24
Definisi Obyek 2D
typedef struct {
int jumlahvertek;
point2D_t p[100];
int jumlahface;
face2D_t face[30];
}object2D_t;
typedef struct {int jumlahvertek_f;
int nomervertek[30];
}face2D_t;
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 17/24
Cara Menggambar Obyek2D
Dengan Struktur Data Object2D
dan Face2Dint i,j;
point2D_t p[100],pbuf[100];
object2D_t rumah={5,{{ , },{ , },{ , },{ , },{ , }},
2,{{3,{ , , }},{4,{ , , , }}}};
for(i=0;i<rumah.jumlahvertek;I++)
pbuf[i]=rumah.p[i];
for(i=0;i<rumah.jumlahface;i++){
for(j=0;j<rumah.fc[i].jumlahvertek_f;j++){k=rumah.fc[I].urutanvertek[j];
p[j]=pbuf[k]; }
}
drawpolygon(p,rumah.fc[i].jumlahvertek_f);
}
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 18/24
Membuat Obyek Grafik 2-D Dengan Persamaan
Matematik
Dengan persamaan matematik y=f(x) dapatdigambarkan kurva dengan variasi bentuk yangmenarik seperti sinus, cosinus, exponential dan
logaritma, atau fungsi gabungannya. Bentuk
persamaan matematik yang menarik untuk dibuatadalah persamaan matematik denganmenggunakan sistem koordinat polar.
)sin(.
)cos(.)(
r y
r x f r
adalah sudut yang berjalan dari0 s/d 360 yang dinyatakan dalamradian (0 s/d 2p). Macam-macam
r=f() dapat menghasilkangambar yang bervariasi.
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 19/24
Contoh Fungsi Polar
r=sin() Lingkaran
r=sin(2) Rose 4 daun
r=sin(3) Rose 3 daun
r=sin(n) Rose n daun bila n bilangan prima
r=
Spiral
Masih banyak variasi fungsi yang lain yang
dapat dibangun dengan menggunakan
koordinat polar ini
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 20/24
void userdraw(){ Point2D_t shape[360];
double srad,r;
for(int s=0;s<360;s++){ srad=s*3.14/180;r=sin(5*srad);shape[s].x=(float)(r*cos(srad));shape[s].y=(float)(r*sin(srad));
}Polygon(shape,360);
}
Program Code Membangun Obyek Grafik 2-D Dengan Menggunakan Koordinat Polar
Fungsi sin(5) yang menghasilkan rose 5 daun.
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 21/24
Animasi 2-D
Membuat obyek grafik 2-D menjadibergerak.
Animasi yang dilakukan adalahmemindahkan posisi gambar.
Pada sistem koordinat kartesian animasiakan berefek gerakan linier (translasi),pada sistem koordinat polar akan berefek gerakan berputar (rotasi).
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 22/24
Pembuatan Animasi 2-D
Pada main() ditambahkan fungsiglutIdleFunc(display) sebelum fungsiglutDisplayFunc(display).
Pada awal fungsi userdraw() didefinisikanstatic int tick
Pada akhir fungsi userdraw() ditambahkanperintah untuk menambah nilai tick secara
terus menerus dengan tick++.
Tambahkan nilai tick ini pada nilai variabeldasar pembuatan grafik.
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 23/24
void userdraw(){ static int tick=0;
Point2D_t shape[360];
double srad,r;for(int s=0;s<360;s++){ srad=(s+tick)*3.14/180;
r=sin(5*srad);shape[s].x=(float)(r*cos(srad));shape[s].y=(float)(r*sin(srad));
}Polygon(shape,360);tick++;
}
Program Code Amimasi 2-D Menggunakan Koordinat Polar
8/3/2019 Grafik 2d(New)
http://slidepdf.com/reader/full/grafik-2dnew 24/24
Animasi Lebih Lanjut
Animasi lebih lanjut akan dipelajari pada
materi Transformasi 2-D, dimana animasi
dapat dilakukan dengan sangat mudah. Program yang dibangun dengan
menggunakan Transformasi 2-D ini akan
menjadi lebih user-friendly karena setiapperintahnya dapat dimengerti dengan
mudah.