Modul 1 dan 2 Primitif dan Kurva Copy.

(1)

BAB I

PENDAHULUAN

1.1 Latar Belakang

Mata kuliah Grafik aadalah mata kuliah dimana mahasiswa diharapkan mampu memahami konsep dan teori mengenai kegrafikaan dan mampu menerapkannya dalam pemenuhan kebutuhan bahan grafis untuk kepentingan pendidikan dan nonpendidikan dalam kehidupan sehari-hari.

1.2 Tujuan

Mahasiswa mampu memahami dan menerapkan aplikasi komputer grafik menggunakan bahasa pemrograman OpenGL.

1.3 Gambaran Umum :

Praktikum ini merupakan bagian dari kuliah Komputer Grafik. Dalam praktikum ini, praktikan dikenalkan dengan beberapa aspek yang berkaitan dalam pemrograman komputer grafik.

Praktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL (Open Graphics Library): primitif drawing, kurva, transformasi,

animasi, pencahayaan pada OpenGL. Modul-modul ini harus dapat dikuasai oleh mahasiswa sebagai dasar penguasaan Komputer Grafik.

1.4 Rumusan Kompetensi Dasar

 Mahasiswa mampu memahami dan mengaplikasikan sistem grafik pada

komputer.

 Mahasiswa mampu memahami dan mengaplikasikan berbagai teknik dan komponen komputer grafik.

 Mahasiswa mampu memahami dan mengaplikasikan visualisasi obyek.

(2)

DASAR TEORITIS

Komputer grafik telah menunjukkan kemajuan yang pesat dari berbagai sisi: algoritma, software, dan hardware. Cakupannya juga telah meluas ke berbagai bidang: kedokteran, sains, engineering, bisnis, industri, seni, hiburan, iklan, dan lain-lain.

Salah satu tools/library pembuatan aplikasi grafik adalah OpenGL (Open Graphics Library). OpenGL adalah suatu standar grafik yang menyediakan fungsi-fungsi low-level untuk pembuatan berbagai gambar pada komputer.

Sebagai API (Application Programming Interface), OpenGL bersifat platform- independent/tidak tergantung pada piranti dan platform yang digunakan. Hal inilah yang membuat OpenGL dapat berjalan pada berbagai sistem operasi: Windows, UNIX, Mac, Android, dll. OpenGL pada awalnya didesain untuk digunakan oleh bahasa pemrograman C/C++, namun dalam perkembangannya OpenGL dapat juga digunakan oleh bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual Basic, Delphi, maupun Fortran.

OpenGL memiliki beberapa obyek dasar yang disebut primitif. Gambar-gambar kompleks dibuat dari kombinasi obyek-obyek primitif ini. Primitif mudah digambar pada layar monitor karena menggunakan persamaan geometrik sederhana. Contoh primitif / grafik dasar adalah :

 Titik

 Garis

 Segitiga

 Polygon

(3)

 Mahasiswa mampu memahami dan mengaplikasikan sistem grafik

pada komputer.

 Mahasiswa mampu memahami dan mengaplikasikan berbagai teknik dan komponen komputer grafik.

(4)

BAB III

PERCOBAAN PRAKTIKUM

PRIMITIF DRAWING

Program 1 Membuat 5 Titik

#include<Windows.h> #include<GL/gl.h> #include<GL/glut.h> void display(void) {

/* bersihkan layar dari titik pixel yang masih ada */ glClear (GL_COLOR_BUFFER_BIT);

/* gambar 5 titik di layar */ glColor3f (1.0, 1.0, 0.0);

/* posisi vertex */ glBegin(GL_POINTS); glVertex3f (0.0, 0.0, 0.0); glVertex3f (0.0, 0.8, 0.0); glVertex3f (0.8, 0.0, 0.0); glVertex3f (0.0, -0.8, 0.0); glVertex3f (-0.8, 0.0, 0.0); glEnd();

glFlush (); }

/*void kunci(unsigned char key, int x, int y) {

switch (key) {

aplikasi berhenti ketika tombol q ditekan case 27 : case 'q': exit(0); break;

}

glutPostRedisplay(); {*/

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

glutInitWindowSize(400,400); glutInitWindowPosition(100,100);

glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("Dian Zefri( 5 titik )");

glutDisplayFunc(display); //glutKeyboardFunc(kunci); glutMainLoop();

return 0;}

(5)

3.1 Percobaan Primitif Drawing 3.1.1Mengganti Sintak

/* posisi vertex */ glBegin(- - - -); glVertex3f (0.0, 0.0, 0.0); glVertex3f (0.0, 0.8, 0.0); glVertex3f (0.8, 0.0, 0.0); glVertex3f (0.0, -0.8, 0.0); glVertex3f (-0.8, 0.0, 0.0); glEnd();

glFlush (); }

/*void kunci(unsigned char key, int x, int y) {

switch (key) {

aplikasi berhenti ketika tombol q ditekan case 27 : case 'q': exit(0); break;

}

glutPostRedisplay(); {*/

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

(6)

glutCreateWindow("Dian Zefri( 5 titik )"); glutDisplayFunc(display);

//glutKeyboardFunc(kunci); glutMainLoop();

return 0;} Hasil :

3.1.1.1 glBegin(GL_POINT)

3.1.1.2 glBegin(GL_LINES)

3.1.1.3 glBegin(GL_LINE_LOOP)

(7)

3.1.1.5 glBegin(GL_TRIANGLES)

3.1.1.6 glBegin(GL_TRIANGLE_FAN)

3.1.1.7 glBegin(GL_TRIANGLE_STRIP)

(8)

3.1.1.9 glBegin(GL_QUADS_STRIP)

3.1.1.10 glBegin(GL_POLYGON)

3.1.2 penyisipan glColor3f (X, X, X); pada tiap vertex

glClearColor (0.0,0.0,1.0,0.0); //warna dasar putih glClear (GL_COLOR_BUFFER_BIT);

(9)

glColor3f (1.0, 0.0, 0.5);

/* posisi vertex */ glLineWidth (40); glBegin(GL_LINES); glVertex3f (0.0, 0.0, 0.0); glVertex3f (0.0, 0.8, 0.0); glVertex3f (0.8, 0.0, 0.0); glVertex3f (0.0, -0.8, 0.0); glVertex3f (-0.8, 0.0, 0.0); glEnd();

glFlush (); }

void kunci(unsigned char key, int x, int y) {

switch (key) {

/* aplikasi berhenti ketika tombol q ditekan */ case 27 : case 'q': exit(0); break;

}

glutPostRedisplay(); }

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

glutInit(&argc,argv);

glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(400,400);

glutInitWindowPosition(100,100); glutCreateWindow("Penyisipan Warna"); glutDisplayFunc(display);

3.1.3 ketebalan titik glPointSize(x) source code

(10)

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

void display(void) {

/* posisi vertex */ glPointSize (20); glBegin(GL_POINTS); glVertex3f (0.0, 0.0, 0.0); glVertex3f (0.0, 0.8, 0.0); glVertex3f (0.8, 0.0, 0.0); glVertex3f (0.0, -0.8, 0.0); glVertex3f (-0.8, 0.0, 0.0); glEnd();

glFlush (); }

switch (key) {

}

glutInitWindowPosition(100,100); glutCreateWindow("ketebalan titik"); glutDisplayFunc(display);

glutKeyboardFunc(kunci); glutMainLoop();

(11)

Hasil :

3.1.4 Ketebalan Garis (glLineWidth) source code

#include<Windows.h> #include<GL/gl.h> #include<GL/glut.h>

void display(void) {

/* posisi vertex */ glLineWidth (40); glBegin(GL_LINES); glVertex3f (0.0, 0.0, 0.0); glVertex3f (0.0, 0.8, 0.0); glVertex3f (0.8, 0.0, 0.0); glVertex3f (0.0, -0.8, 0.0); glVertex3f (-0.8, 0.0, 0.0); glEnd();

glFlush (); }

switch (key) {

}

(12)

glutInitWindowPosition(100,100); glutCreateWindow("ketebalan Garis"); glutDisplayFunc(display);

glutKeyboardFunc(kunci); glutMainLoop();

return 0; }

Hasil :

KURVA

Program 2. Memplot persamaan linier Kurva Polynomial Derajat 1

 Memplot Persamaan Linear

#include <stdlib.h> #include <GL/glut.h> #include <GL/gl.h>

void userdraw(void){

glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.0, 0.0, 0.0);

float t = 0.0;

glBegin(GL_POINTS); for(t=-1.0; t<=1.0; t+=0.01){ /* x(t) = -1 + 2t; y(t) = 0 */ glVertex3f(-1.0+2.0*t, 0.0, 0.0); }

(13)

void display(void){

glClear (GL_COLOR_BUFFER_BIT); userdraw();

glutSwapBuffers(); }

int main(int arcg, char **argv){ glutInit(&arcg,argv);

glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowPosition(100,100);

glutInitWindowSize(640,480);

glutCreateWindow("DIAN ZEFRI 13210076"); glClearColor(1.0, 1.0, 1.0, 0.0);

glutIdleFunc(display); glutDisplayFunc(display); glutMainLoop();

return 0; }

Hasilnya :

 Kurva Polynomial Derajat 2  Menggambar Persamaan Kuadrat

#include <stdlib.h> #include <GL/glut.h> #include <GL/gl.h> void userdraw(void){

glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0, 0.0, 1.0);

float t = 0.0;

glBegin(GL_POINTS); for(t=-1.0; t<=1.0; t+=0.01){ /* x(t) = -1 + 2t; y(t) = 0 */ glVertex3f(t, -0.5+t*t, 0.0); }

(14)

}

void display(void){

glutCreateWindow("DIAN ZEFRI 13210076 kurva derajad 2"); glClearColor(1.0, 1.0, 1.0, 0.0);

return 0; }

Hasilnya :

 Kurva Polynomial Derajat 3 atau lebih  Menggambar Persamaan Polynomial Derajat 4

#include <stdlib.h> #include <GL/glut.h> #include <GL/gl.h>

void userdraw(void){ glColor3f(1,0,1); float t = 0.0;

glBegin(GL_POINTS);

for(t = -10.0; t<=10.0; t+=0.1){

glVertex3f (t, (t+4)*(t+1)*(t-1)*(t-3)/14 + 0.5, 0.0); }

glEnd();

(15)

glVertex3f(-10.0,0.0,0.0); glVertex3f(10.0,0.0,0.0); glVertex3f(0.0,-10.0,0.0); glVertex3f(0.0,10.0,0.0); glEnd();

glFlush (); }

void display(void){

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

glutInit(&arcg,argv);

glutCreateWindow("DIAN ZEFRI kurva derajad 3"); glClearColor(1, 1, 1, 0);

return 0; }

Hasilnya :

 Kurva Trigonometri  Menggambar Fungsi Sinus

#include <Math.h> #include <stdlib.h> #include <GL/glut.h> #include <GL/gl.h>

(16)

glClear (GL_COLOR_BUFFER_BIT);

glColor3f (1.0, 0.0, 0.0); float x = 0.0;

glBegin(GL_POINTS);

glBegin(GL_LINES); glVertex3f(-10.0,0.0,0.0);

glutCreateWindow("DIAN ZEFRI 13210076 FUNGSI SINUS"); glClearColor(1.0, 1.0, 1.0, 0.0);

return 0; }

Hasilnya :

3.2 Percobaan Kurva

(17)

Program 2 Memplot Persamaan Linier Capture Hasilnya :

3.2.1.1 (GL_POINTS); Menjadi (GL_LINES);

3.2.1.2 (GL_POINTS); Menjadi (GL_LINE_STRIP);

3.2.1.3 (GL_POINT); Menjadi (GL_LINE_LOOP);

Program 3 Menggambar Persamaan Kuadrat

Capture Hasilnya:

3.2.1.4 (GL_POINT); Menjadi (GL_LINES);

(18)

3.2.1.6 (GL_POINT); Menjadi (GL_LINE_LOOP);

Program 4 Menggambar Persamaan Polymonial derajat 4

Capture Hasilnya:

3.2.1.6 (GL_POINT) Menjadi (GL_LINES);

3.2.1.7 (GL_POINT) Menjadi (GL_LINE_LOOP);

Program 4 Mnggambar Fungsi Sinus

Capture Hasilnya:

(19)

3.2.1.9 (GL_POINT) Menjadi (GL_LINE_LOOP);

3.2.2 Fungsi Sinus di Ubah Menjadi Fungsi Tangen

#include <Math.h> #include <stdlib.h> #include <GL/glut.h> #include <GL/gl.h> void userdraw(void){

glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0, 0.0, 0.0);

float x = 0.0;

glBegin(GL_POINTS); for(x=0.0; x<=6.28; x+=0.1) {

glVertex2f(x,tan(x)); }

glEnd();

glBegin(GL_LINES); glVertex3f(-10.0,0.0,0.0); glVertex3f(10.0,0.0,0.0); glVertex3f(0.0,-10.0,0.0); glVertex3f(0.0,10.0,0.0); glEnd();

glFlush (); }

void display(void){

(20)

glutCreateWindow("DIAN ZEFRI 13210076 FUNGSI TANGEN"); glClearColor(1.0, 1.0, 1.0, 0.0);

return 0; }

Capture Hasilnya :

BAB IV

TUGAS ASISTENSI

4.1 Tugas Primitif Drawing

4.1.1 Membuat pelangi Horizontal dari 7 warna menggunakan GL_POLYGON

source code

#include<windows.h> #include<GL/gl.h> #include<GL/glut.h> void display(void) {

/* gambar 5 titik di layar */ /* posisi vertex */

(21)

glColor3f (1.0, 0.0, 0.0); /* pewarnaan 1*/ glVertex3f (-1.0, -1.0, 0.0);

glVertex3f (1.0, -1.0, 0.0); glVertex3f (1.0, -0.70, 0.0); glVertex3f (-1.0, -0.70, 0.0); glEnd();

glBegin(GL_POLYGON);

glVertex3f (1.0, -0.1, 0.0); glVertex3f (1.0, 0.2, 0.0); glVertex3f (-1.0, 0.2, 0.0); glEnd();

glColor3f (0.0, 1.0, 1.0); /* pewarnaan 5*/ glVertex3f (-1.0, 0.2, 0.0);

glVertex3f (1.0, 0.2, 0.0); glVertex3f (1.0, 0.5, 0.0); glVertex3f (-1.0, 0.5, 0.0); glEnd();

glColor3f (1.0, 0.0, 1.0); /* pewarnaan 6*/ glVertex3f (-1.0, 0.5, 0.0);

glVertex3f (1.0, 0.5, 0.0); glVertex3f (1.0, 0.8, 0.0); glVertex3f (-1.0, 0.8, 0.0); glEnd();

(22)

glVertex3f (-1.0, 0.8, 0.0); glVertex3f (1.0, 0.8, 0.0); glVertex3f (1.0, 1.0, 0.0); glVertex3f (-1.0, 1.0, 0.0); glEnd();

glFlush (); }

switch (key) {

/* aplikasi berhenti ketika tombol q ditekan */ case 27:

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

glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("DIAN ZEFRI HORIZONTAL)"); glClearColor(1.0, 1.0, 1.0, 0.0);

glutDisplayFunc(display); glutKeyboardFunc(kunci); glutMainLoop();

return 0;} Hasilnya :

4.1.2 Membuat Pelangi Vertikal yang terdiri dari 7 warna dengan GL_POLYGON

(23)

glClear (GL_COLOR_BUFFER_BIT); /* gambar 5 titik di layar */

/* posisi vertex */

glVertex3f (-1.0, 1.0, 0.0); glVertex3f (-0.70, 1.0, 0.0); glVertex3f (-0.70, -1.0, 0.0); glEnd();

glVertex3f (-0.10, 1.0, 0.0); glVertex3f (0.2, 1.0, 0.0); glVertex3f (0.2, -1.0, 0.0); glEnd();

glColor3f (0.0, 1.0, 1.0); /* pewarnaan 5*/ glVertex3f (0.2, -1.0, 0.0);

glVertex3f (0.2, 1.0, 0.0); glVertex3f (0.5, 1.0, 0.0); glVertex3f (0.5, -1.0, 0.0); glEnd();

(24)

glFlush (); }

switch (key) {

glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("DIAN ZEFRI VERTIKAL"); glClearColor(1.0, 1.0, 1.0, 0.0);

return 0;} hasilnya :

4.1.3 Membuat Pelangi Horizontal dan Vertikal yang terdiri dari 7 warna dengan glRect()

(25)

glClear (GL_COLOR_BUFFER_BIT); /* gambar 5 titik di layar */

/* posisi vertex */

glBegin(GL_POLYGON); glEnd();

glColor3f (1.0, 0.0, 0.0); /* pewarnaan 1*/ glRectf (-0.70, 1.0, -1.0, -1.0);

glColor3f (0.0, 0.0, 1.0); /* pewarnaan 4*/ glRectf (-0.10, 1.0, 0.1, -1.0);

glColor3f (0.0, 1.0, 1.0); /* pewarnaan 5*/ glRectf (0.1, 1.0, 0.4, -1.0);

glFlush (); }

switch (key) {

glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("DIAN ZEFRI 7 WARNA"); glClearColor(1.0, 1.0, 1.0, 0.0);

(26)

4.1.4 Pelangi Horizontal

glBegin(GL_POLYGON); glEnd();

glColor3f (1.0, 0.0, 0.0); /* pewarnaan 1*/ glRectf (-1.0, -1.0, 1.0, -0.70);

glColor3f (0.0, 0.0, 1.0); /* pewarnaan 4*/ glRectf (-1.0, -0.1, 1.0, 0.2);

glColor3f (0.0, 1.0, 1.0); /* pewarnaan 5*/ glRectf (-1.0, 0.2, 1.0, 0.5);

glFlush (); }

switch (key) {

(27)

}

glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("DIAN ZEFRI HORIZONTAL"); glClearColor(1.0, 1.0, 1.0, 0.0);

return 0;} Hasilnya :

4.1.5 Pelangi Vertikal source code

(28)

glVertex3f (-0.40, -1.0, 0.0); glEnd();

glVertex3f (-0.10, 1.0, 0.0); glVertex3f (0.2, 1.0, 0.0); glVertex3f (0.2, -1.0, 0.0); glEnd();

glFlush (); }

switch (key) {

(29)

}

glutPostRedisplay();}

glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("DIAN ZEFRI VERTIKAL)"); glClearColor(1.0, 1.0, 1.0, 0.0);