UPI YPTK - Padang

Review Open GL for

Computer Graphics
Eko Syamsuddin Hasrito, PhD

204481 Computer Graphics April 18, 2020 1

Pemrograman
OpenGL Dasar
Pertemuan 5

Hand out Komputer Grafik

 Bahasan
 Pokok: Konsep dan cara pemrograman OpenGL API dasar
untuk menampilkan grafis 2 dimensi
 Sub:
 OpenGL API

 GLUT

 Primitif dan atributnya

 Warna

 Viewing dasar

 Fungsi program dasar

 The Programmer’s Interface
Programmer sees the graphics system through a
software interface: the Application Programmer
Interface (API)
 API Contents

Functions that specify what we need to form

an image
Objects

Viewer

LightSource(s)
Materials

Other information
Inputfrom devices such as mouse and keyboard
Capabilities of system
 Object Specification
Most APIs support a limited set of primitives
including
Points (0D object)
Line segments (1D objects)
Polygons (2D objects)
Some curves and surfaces
Quadrics
Parametric polynomials

All are defined through locations in space or

vertices
 OpenGL
The success of GL lead to OpenGL (1992), a
platform-independent API that was
Easy to use
Close enough to the hardware to get excellent
performance
Focus on rendering

Omitted windowing and input to avoid window

system dependencies
 OpenGL Libraries
OpenGL core library
OpenGL32 on Windows
GL on most unix/linux systems (libGL.a)

OpenGL Utility Library (GLU)

Provides functionality in OpenGL core but avoids
having to rewrite code
Links with window system
GLX for X window systems
WGL for Windows
AGL for Macintosh
 GLUT
OpenGL Utility Toolkit (GLUT)
Provides functionality common to all window
systems
 Open a window
 Get input from mouse and keyboard

 Menus

 Event-driven

Code is portable but GLUT lacks the

functionality of a good toolkit for a specific
platform
 No slide bars
 Software Organization

application program

OpenGL Motif
widget or similar GLUT
GLX, AGL
or WGL GLU

X, Win32, Mac O/S GL

software and/or hardware

 OpenGL function format
function name
dimensions

glVertex3f(x,y,z)

x,y,z are floats

belongs to GL library

glVertex3fv(p)

p is a pointer to an array
 Example
type of object
location of vertex
glBegin(GL_POLYGON)
glVertex3f(0.0, 0.0, 0.0);
glVertex3f(0.0, 1.0, 0.0);
glVertex3f(0.0, 0.0, 1.0);
glEnd( );

end of object definition

 OpenGL Primitives

GL_POINTS GL_POLYGON
GL_LINES GL_LINE_STRIP

GL_LINE_LOOP

GL_TRIANGLES
GL_QUAD_STRIP

GL_TRIANGLE_STRIP GL_TRIANGLE_FAN
 A Simple Program
Generate a square on a solid background
 simple.c
#include <GL/glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_POLYGON);
glVertex2f(-0.5, -0.5);
glVertex2f(-0.5, 0.5);
glVertex2f(0.5, 0.5);
glVertex2f(0.5, -0.5);
glEnd();
glFlush();
}
int main(int argc, char** argv){
glutCreateWindow("simple");
glutDisplayFunc(mydisplay);
glutMainLoop();
}
 OpenGL #defines
Mostconstants are defined in the include files
gl.h, glu.h and glut.h
Note #include <GL/glut.h> should
automatically include the others
Examples

glBegin(GL_POLYGON)

glClear(GL_COLOR_BUFFER_BIT)

include
files also define OpenGL data types:
GLfloat, GLdouble,….
 Event Loop
Note that the program defines a display callback
function named mydisplay
Every glut program must have a display callback
The display callback is executed whenever OpenGL
decides the display must be refreshed, for example
when the window is opened
The main function ends with the program entering
an event loop
 Latihan
Buatlah Program yang menampilkan kotak ini
 Defaults
simple.c is too simple
Makes heavy use of state variable default values
for
Viewing

Colors

Window parameters
Next version will make the defaults more explicit
 Program Structure
 Most OpenGL programs have a similar structure
that consists of the following functions
 main():
 defines the callback functions
 opens one or more windows with the required properties
 enters event loop (last executable statement)
 init(): sets the state variables
 Viewing
 Attributes
 callbacks
 Display function
 Input and window functions
 simple.c revisited
 In this version, we shall see the same output but
we have defined all the relevant state values
through function calls using the default values
 In particular, we set
 Colors
 Viewing conditions

 Window properties
 main.c

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

int main(int argc, char** argv)

{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glutCreateWindow("simple"); define window properties
glutDisplayFunc(mydisplay);
display callback
init();
set OpenGL state
glutMainLoop();
} enter event loop
 GLUT functions
 glutInit allows application to get command line arguments and
initializes system
 gluInitDisplayMode requests properties for the window (the rendering
context)
 RGB color
 Single buffering
 Properties logically ORed together
 glutWindowSize in pixels
 glutWindowPosition from top-left corner of display
 glutCreateWindow create window with title “simple”
 glutDisplayFunc display callback
 glutMainLoop enter infinite event loop
 init.c

black clear color

void init() opaque window
{
glClearColor (0.0, 0.0, 0.0, 1.0);

glColor3f(1.0, 1.0, 1.0); fill/draw with white

glMatrixMode (GL_PROJECTION);
glLoadIdentity ();
glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);
}

viewing volume
 RGB color
 Each color component is stored separately in the frame
buffer
 Usually 8 bits per component in buffer
 Note in glColor3f the color values range from 0.0
(none) to 1.0 (all), whereas in glColor3ub the values
range from 0 to 255
 Indexed Color

 Colors are indices into tables of RGB values

 Requires less memory
 indices usually 8 bits

 not as important now

 Memory inexpensive
 Need more colors for shading
 Color and State

 The color as set by glColor becomes part of the state

and will be used until changed
 Colors and other attributes are not part of the object but
are assigned when the object is rendered
 We can create conceptual vertex colors by code such as
glColor
glVertex
glColor
glVertex
 Smooth Color
 Default is smooth shading
 OpenGL interpolates vertex colors across visible
polygons
 Alternative is flat shading
 Color of first vertex

determines fill color

 glShadeModel
(GL_SMOOTH)
or GL_FLAT
 Rangkuman
 API berfungsi sebagai perantara antara aplikasi
dengan hardware
 Membuat tampilan 2 dimensi sederhana
menggunakan OpenGL
 Penjelasan Fungsi-fungsi dasar pembentuk
program OpenGL
 Contoh Soal
Buat tampilan sebagai berikut:
 Jawaban
#include "stdafx.h"
#include <GL/glut.h>

void display()
{
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_TRIANGLES);

glClearColor(1.0,1.0,1.0,1.0);
glColor3f(1.0,0.0,0.0);
glVertex3f(-2.0,-2.0,0.0);
glClearColor(1.0,1.0,1.0,1.0);
glColor3f(0.0,1.0,0.0);
glVertex3f(0.0,2.0,0.0);
glClearColor(1.0,1.0,1.0,1.0);
glColor3f(0.0,0.0,1.0);
glVertex3f(2.0,-2.0,0.0);

glEnd();
glFlush();
}
void myinit()
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-2.0,2.0,-2.0,2.0);
glMatrixMode(GL_MODELVIEW);
glClearColor(1.0,1.0,1.0,1.0);
glColor3f(0.0,0.0,0.0);
}

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

{
if (argv[1] != NULL)
{ n=atoi(argv[1]);
}
else n=5;
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(100,100);
glutCreateWindow("Segitiga Warna");
glutDisplayFunc(display);
myinit();
glutMainLoop();

return 0;
}
 Contoh Soal
Buatlah tampilan program Sierpinski Gasket
 Referensi
 Edward Angel, “Interactive Computer
Graphics Fourth Edition”, Pearson, 2006, ch
2, p 46 – 84
 F. S. Hill, Jr., “Computer Graphics Using
OpenGL Second Edition”, Prentice Hall,
2001, ch 2, p 39 - 63
Menggambar Titik :

glBegin(GL_POINTS)

glVertex2f(x,y) A(0.5,0.5) B(0.5,-0.5) dst....

glVertex2i(x,y) A(0,0) B(0,5)... dst
……………………….
………………………..
glVertex2d(x,y) A(5.1e09, 7.3e12)
glEnd( );

Void drawDot ( int x, int y)

{
glBegin(GL_POINTS):
glVertex2i(x,y):
glEnd( );
} 204481 Foundation of Computer Graphics April 18, 2020 35
Menggambar Titik :

Void drawDot ( int x, int y)

{
glBegin(GL_POINTS):
glVertex2i(x,y):
glEnd( );
}

Void drawDot ( float x, float y)

{
glBegin(GL_POINTS):
glVertex2f(x,y):
glEnd( );
}

204481 Foundation of Computer Graphics April 18, 2020 36

Menggambar Garis : Tipe Integer

glBegin(GL_LINES) ;
glVertex2i(100,100);
glVertex2i(200,150);
glEnd( );

Void drawLine ( int x1, int y1, int x2, int y2)
{
glBegin(GL_LINES):
glVertex2i(x1,y1);
glVertex2i(x2,y2);
glEnd( );
}

204481 Foundation of Computer Graphics April 18, 2020 37

Menggambar Garis : Tipe Float

glBegin(GL_LINES) ;
glVertex2f(100,100);
glVertex2f(200,150);
glEnd( );

Void drawLine ( float x1, float y1, float x2, float y2)
{
glBegin(GL_LINES):
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glEnd( );
}

204481 Foundation of Computer Graphics April 18, 2020 38

Menggambar Garis : Tipe Double

glBegin(GL_LINES) ;
glVertex2d(100,100);
glVertex2d(200,150);
glEnd( );

Void drawLine ( double x1, double y1, double x2, double y2)
{
glBegin(GL_LINES):
glVertex2d(x1,y1);
glVertex2d(x2,y2);
glEnd( );
}

204481 Foundation of Computer Graphics April 18, 2020 39

Menggambar PolyLine : Tipe Integer

glBegin(GL_LINE_STRIP) ;
glVertex2i(100,100);
glVertex2i(200,150);
glVertex2i(300,50);
glEnd( );

Void drawLine ( int x1, int y1, int x2, int y2, int x3, int y3)
{
glBegin(GL_LINE_STRIP):
glVertex2i(x1,y1);
glVertex2i(x2,y2);
glVertex2i(x3,y3);
glEnd( );
}
204481 Foundation of Computer Graphics April 18, 2020 40
Menggambar PolyLine : Tipe float 4 titik

glBegin(GL_LINE_STRIP) ;
glVertex2f(100,100);
glVertex2f(200,150);
glVertex2f(300,50);
glVertex2f(400,200);

glEnd( );
Void drawLine ( float x1, float y1, float x2, float y2, float x3, float y3, float x4,
float y4)
{
glBegin(GL_LINE_STRIP):
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glVertex2f(x3,y3);
glVertex2f(x4,y4);
glEnd( );
204481 Foundation of Computer Graphics April 18, 2020 41
Menggambar PolyLine : Tipe double 5 titik
glBegin(GL_LINE_STRIP) ;
glVertex2d(100,100);
glVertex2d(200,150);
glVertex2d(300,50);
glVertex2d(400,200);
glVertex2d(250, 250);
glEnd( );

Void drawLine ( double x1, double y1, double x2, double y2, double x3,
double y3, double x4, double y4, double x5, double y5)
{
glBegin(GL_LINE_STRIP):
glVertex2d(x1,y1);
glVertex2d(x2,y2);
glVertex2d(x3,y3);
glVertex2d(x4,y4);
glVertex2d(x5,y5);
glEnd( );
} 204481 Foundation of Computer Graphics April 18, 2020 42
Menggambar Polygon : Tipe float 4 titik

glBegin(GL_LINE_LOOP) ;
glVertex2f(100,100);
glVertex2f(200,150);
glVertex2f(300,50);
glVertex2f(400,200);

glEnd( );
Void drawLine ( float x1, float y1, float x2, float y2, float x3, float y3, float x4,
float y4)
{
glBegin(GL_LINE_LOOP);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glVertex2f(x3,y3);
glVertex2f(x4,y4);
glEnd( );
204481 Foundation of Computer Graphics April 18, 2020 43
Menggambar Polygon : Tipe integer 3 titik

glBegin(GL_LINE_LOOP) ;
glVertex2i(100,100);
glVertex2i(200,150);
glVertex2i(300,50);

glEnd( );
Void drawLine ( int x1, int y1, int x2, int y2, int x3, int y3)
{
glBegin(GL_LINE_LOOP);
glVertex2i(x1,y1);
glVertex2i(x2,y2);
glVertex2i(x3,y3);
glEnd( );
}

204481 Foundation of Computer Graphics April 18, 2020 44

Menggambar Polygon : Tipe double 5 titik

glBegin(GL_LINE_LOOP) ;
glVertex2d(100,100);
glVertex2d(200,150);
glVertex2d(300,50);
glVertex2d(400,200);
glVertex2d(250,250);
glEnd( );

Void drawLine ( double x1, double y1, double x2, double y2, double x3,
double y3, double x4, double y4, double x5, double y5)
{
glBegin(GL_LINE_LOOP);
glVertex2d(x1,y1);
glVertex2d(x2,y2);
glVertex2d(x3,y3);
glVertex2d(x4,y4);
glVertex2d(x5,y5);
glEnd( );
} 204481 Foundation of Computer Graphics April 18, 2020 45
Menggambar PolyLine :
drawPolyline(nama_objek2D, jumlah_titik)

Void drawPolyline(point2D_i pnt [ ], int i)

{
int i;
glBegin(GL_LINE_STRIP);
for (i=0; i < n ; i=i+1 ) /* for (i=0; i , n ; i++ ) */
{
glVertex2i( pnt[i].x, pnt[i].y ) ;

}
glEnd ( );
}

Void userdraw ( void )

{
point2D_i segitiga[3]={{0,0}, {200,0}, {100,100}};
setColor(1,0,0); //Red
drawPolyline(segitiga, 3);
}

204481 Foundation of Computer Graphics April 18, 2020 46

Menggambar Polygon :
drawPolygone(nama_objek2D, jumlah_titik)

Void drawPolygon(point2D_i pnt [ ], int n)

{
int n;
glBegin(GL_LINE_LOOP);
for (n=0; n < m, n=n+1 ) /* for (n=0; n < m ; n++ ) */
{
glVertex2i( pnt[n].x, pnt[n].y ) ;

}
glEnd ( );
}

void userdraw ( void )

{
point2D_i segitiga[3]={{0,0}, {200,0}, {100,100}};
setColor(1,0,0); //Red
drawPolylgon(segitiga, 3);
}

204481 Foundation of Computer Graphics April 18, 2020 47

Memberi warna pada Polygon :
drawPolygone(nama_objek2D, jumlah_titik)

Void fillPolygon(point2D_i pnt [ ], int m, color_t color )

{
int n;
setColor(color);
glBegin(GL_POLYGON);
for (n=0; n < m, n=n+1 ) /* for (n=0; n < m ; n++ ) */
{

glVertex2i( pnt[n].x, pnt[n].y ) ;

}
glEnd ( );
}

void userdraw ( void )

{
point2D_i segitiga[3]={{0,0}, {200,0}, {100,100}};
color_t kuning = {1, 1, 0};
fillPolygon (segitiga, 3, kuning); // polygon berwarna kuning
setColor(1,0,0);
drawPolylgon(segitiga, 3); // warna garis merah
} 204481 Foundation of Computer Graphics April 18, 2020 48
 Referensi :
Grafika Komputer, Teori dan Implementasi, Achmad Basuki & Nana
Ramadijanti, Penerbit Andi, yogyakarta
 Bab 1. Pendahuluan : Definisi, element, device
Element : Polylines, Text, Filled Region, Raster Images

 Bab 2. Primitive Drawing

• 2.1. Open GL
• 2.2. Struktur Dasar Program Grafik dgn Open GL
• 2.3. Sistem Koordinat
• 2.4. Menggambar Titik
• 2.5. Menggambar Garis
• 2.6. Membuat Polyline
• 2.7. Membuat Polygon
• 2.8. Memberikan Warna

204481 Foundation of Computer

April 18, 2020 49 Graphics
 Bab 3 Grafika 2 Dimensi
Tujuan :
1) Mempelajari struktur dasar objek grafik 2D
2) Membangun objek grafik 2D
3) Mengenal macam2 obyek 2D yg menarik & berguna

Materi :
1) Definisi Objek Grafik 2D
2) Polyline
3) Polygon
4) Mewarnai area (fill polygon)
5) Membangun objek Grafik 2D
6) Membangun Objek Grafik 2D dgn persamaan matematika
7) Animasi 2D

204481 Foundation of Computer

April 18, 2020 50 Graphics
 Bab 3 Grafika 2 Dimensi
3.1. Definisi Objek Grafik 2D

Objek Grafik 2D : sekumpulan titik2 2D yg dihubungkan dgn garis lurus (polyline, polygon)
atau kurva. Menggunakan array 1 D atau linked list untuk struktur data

Langkah2 mendefinisikan :
1. Mendefinisikan struktur dari titik 2D  Point2D_t
2. Mendefinisikan struktur warna  Color_t
3. Mendefinisikan struktur dari objek grafik 2D sebagaia array dari titik 2D  Object2D_t

1) Mendefinisikan struktur dari titik 2D  Point2D_t

Titik 2D : P(x,y)
typedef struct {
typedef struct {
float x, y;
Int x, y;
} point2D_t; } point2D_t;

204481 Foundation of Computer

April 18, 2020 51 Graphics
Menggambar Titik : Menggambar Titik : (cara 2,
array 1D)
void drawDot ( int x, int y)
{
glBegin(GL_POINTS): void drawDot (point2D_t P)
glVertex2i(x,y): {
glEnd( ); glBegin(GL_POINTS):
} glVertex2i(P.x, P.y):
glEnd( );
void drawDot ( float x, float y) }
{
glBegin(GL_POINTS): void drawDot (point2D_t P)
glVertex2f(x,y): {
glEnd( ); glBegin(GL_POINTS):
} glVertex2f(P.x, P.y):
glEnd( );
}

204481 Foundation of Computer Graphics April 18, 2020 52

 Warna
 Mendefinisikan struktur warna  Color_t

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

void setColor (color_t col)

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

204481 Foundation of Computer

April 18, 2020 53 Graphics
 Array 2D
Mendefinisikan struktur dari objek grafik 2D sebagai array dari titik 2D  Object2D_t

point2D_t shape [1000];

point2D_t bunga [360];

point2D_t bintang7 [14]

204481 Foundation of Computer

April 18, 2020 54 Graphics
Program dg persamaan matematika
void userdraw ( void )
{
point2D_t shape[360];
double srad, r ;
for (int s=0; s<360; s++)
{
srad = s *3.14/180;
r = sin (2 * srad); //X3 Y3

shape[s].x = (float) (r * cos (srad));

shape[s].y = (float) (r * sin (srad));

}
drawPolygon(shape, 360);
}
204481 Foundation of Computer
April 18, 2020 55 Graphics
TUGAS-1 : Gambar dg Open GL
TUGAS-2 : Gambar dg Open GL