This document discusses computer graphics and OpenGL. It begins by explaining Cartesian coordinates in the real world and how they differ from coordinates on a computer screen. It then outlines the main OpenGL libraries used - the Core OpenGL library, GLU, GLUT, and GLEW. Each library is briefly described. The document also covers OpenGL parameters, commands, colors, drawing primitives, and assigns topics for student groups to present on.

1. GRAFIKA KOMPUTER
OpenGL Math

3. Cartesian Coordinate in Real World
• Setiap titik ditentukan
lokasinya melalui pasangan
nilai x dan y
• Nilai koordinat x bertambah
positif dari kiri ke kanan dan
nilai y bertambah positif dari
bawah ke atas
(0,0)
Sumbuy Sumbu x
(3,5)

4. OpenGL Right Handed Coordinates

5. koordinat cartesian digambar
ulang ke layar komputer maka
secara visual lokasi titik tersebut
akan berubah
Cartesian Coordinate on Your Screen
(0,0)
Sumbuy
Sumbu x
(3,5)

6. We use 4 sets of OpenGL Libraries
• Core OpenGL (GL)
• OpenGL Utility Library (GLU)
• OpenGL Utility Library Toolkit (GLUT)
• OpenGL Extension Wrangler Library (GLEW)

7. Core OpenGL
consists of hundreds of commands, which begin with a prefix "gl"
(e.g., glColor, glVertex, glTranslate, glRotate). The Core OpenGL
models an object via a set of geometric primitives such as point, line
and polygon.

8. GLU
built on‐top of the core OpenGL to provide important utilities (such as
setting camera view and projection) and more building models (such
as qradric surfaces and polygon tessellation). GLU commands start
with a prefix "glu" (e.g., gluLookAt, gluPerspective).

9. GLUT
GLUT is designed for constructing small to medium sized OpenGL
programs. While GLUT is well‐suited to learning OpenGL and
developing simple OpenGL applications, GLUT is not a full‐featured
toolkit so large applications requiring sophisticated user interfaces are
better off using native window system toolkits. GLUT is simple, easy,
and small.

10. OpenGL is designed to be independent of the windowing system or
operating system. GLUT is needed to interact with the Operating
System (such as creating a window, handling key and mouse inputs);
it also provides more building models (such as sphere and torus).
GLUT commands start with a prefix of "glut" (e.g., glutCreatewindow,
glutMouseFunc). GLUT is platform independent, which is built on top
of platform‐specific OpenGL extension such as GLX for X Window
System, WGL for Microsoft Window, and AGL, CGL or Cocoa for
Mac OS.

11. GLEW
GLEW is a cross‐platform open‐source C/C++ extension loading
library. GLEW provides efficient run‐time mechanisms for determining
which OpenGL extensions are supported on the target platform.

12. Parameter
Specifies the primitive or primitives that will be created from vertices
presented between glBegin and the subsequent glEnd. Ten symbolic
constants are accepted:
GL_POINTS, GL_LINES, GL_LINE_STRIP, GL_LINE_LOOP,
GL_TRIANGLES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN,
GL_QUADS, GL_QUAD_STRIP, GL_POLYGON

13. Example
glBegin(GL_POLYGON);
……..
glEnd();

14. Clearing
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_POLYGON);
……..
glEnd();
glFlush();
Pixels are stored in bitplanes, so clear it once you were done

15. What’s that for?
GL_COLOR_BUFFER_BIT
Performs the clear operation on one or more buffers at the same time
glFlush()
Forces execution before the gathering is complete

16. Colors in OpenGL
OpenGL use a RGB Color Model
RGB stands for the colors red, green and blue: the additive primary
colors. Each of these colors is given a value, in OpenGL usually a
value between 0 and 1. 1 means as much of that color as possible,
and 0 means none of that color. We can mix these three colors
together to give us a complete range of colors, as shown to on the
left.
https://www.khronos.org/registry/OpenGL-Refpages/gl2.1/xhtml/glColor.xml

17. Example
glColor3f(0.5f, 0.0f, 1.0f); // (0.5, 0, 1) is
half red and full blue, giving dark purple.

18. void display() {
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_QUADS);
glColor3f(0.5f, 0.0f, 1.0f); // purple
glVertex2f(-0.75, 0.75);
glColor3f(1.0f, 0.0f, 0.0f); // red
glVertex2f(-0.75, -0.75);
glColor3f(0.0f, 1.0f, 0.0f); // green
glVertex2f(0.75, -0.75);
glColor3f(1.0f, 1.0f, 0.0f); // yellow
glVertex2f(0.75, 0.75);
glEnd();
glFlush();
}

19. Mixed Color in RGB
• glColor3f (0.0, 0.0, 0.0) Black
• glColor3f (1.0, 0.0, 0.0) Red
• glColor3f (1.0, 1.0, 0.0) Yellow
• glColor3f (0.0, 1.0, 0.0) Green
• glColor3f (0.0, 1.0, 1.0) Cyan
• glColor3f (0.0, 0.0, 1.0) Blue
• glColor3f (1.0, 0.0, 1.0) Magenta
• glColor3f (1.0, 1.0, 1.0) White
• glColor3f (0.5, 0.5, 0.5) Gray
http://prideout.net/archive/colors.php

20. Linear Mapping Color
Color hack mapping: x/R
R = 255 Colors
x = Color’s Mapping Number

21. Drawing Primitives
glVertex*() : Specifies vertex coordinates
Example:
glVertex2f(): Specifies vertex coordinates on 2 axis (float)
glVertex3f(): Specifies vertex coordinates on 3 axis (float)
https://www.khronos.org/registry/OpenGL-Refpages/gl2.1/xhtml/glVertex.xml

22. void displayMe(void) {
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_POLYGON);
glVertex2f(0.0, 0.0);
glVertex2f(0.5, 0.0);
glVertex2f(0.5, 0.5);
glVertex2f(0.0, 0.5); glEnd();
glFlush();
}

23. Tugas Kelompok
Kelompok 1 : API Grafis
Kelompok 2 : Kordinat Kartesian 2 Axis
Kelompok 3 : Perangkat Input Grafis
Kelompok 4 : Perangkat Output Grafis
Kelompok 5 : Kordinat Kartesian 3 Axis
Kelompok 6 : GLUT
Kelompok 7 : RGB Color
Kelompok 8 : Bangun Datar Primitif

24. The Rules are
• Presentasi dalam Bahasa inggris
• Desain presentasi menarik dan mudah dibaca
• Presentasi dikumpul paling lambat tanggal 28 Maret 2017 pukul 23:00
di nurfadliutomo@outlook.com, dan dipresentasikan pada tanggal 30
maret
• Telat kumpul dianggap gugur atau tidak mendapat nilai
• Plagiat dianggap gugur
• Rekomendasi sumber harus kredibel, seperti dokumentasi software, jurnal,
pendapat ahli, dan wiki (blog bisa diambil dan isinya harus bisa
dipertanggungjawabkan oleh presenter apabila hasilnya tidak sesuai)

25. Kasih
Terima