USA: +1(669)289-8683 
Sign in
#include
#include
}
glEnd(); // flush the drawing to screen . glFlush(); }void drawPolygon(){ // clear the draw buffer . glClear(GL_COLOR_BUFFER_BIT); // Erase everything glColor3ub(227, 227, 227); glLineWidth(WIDTH); // create a polygon (define the vertices) glBegin(GL_POLYGON); { glVertex2f(0.5, 0.5); glVertex2f(-0.6, -0.6); glVertex2f( 0.0, 0.8); glVertex2f( 0.6, -0.6); glVertex2f( -0.5, 0.5); } glEnd(); // flush the drawing to screen . glFlush(); }void drawLines(){ glClear(GL_COLOR_BUFFER_BIT); // Erase everything glColor3ub(227, 227, 227); glLineWidth(WIDTH); glBegin(GL_LINES); { glVertex2f(0.5, 0.5); glVertex2f(-0.6, -0.6); glVertex2f( 0.0, 0.8); glVertex2f( 0.6, -0.6); glVertex2f( -0.5, 0.5); } glEnd(); glFlush(); }void drawLineStrip(){ glClear(GL_COLOR_BUFFER_BIT); // Erase everything glColor3ub(227, 227, 227); glLineWidth(WIDTH); glBegin(GL_LINE_STRIP); { glVertex2f(0.5, 0.5); glVertex2f(-0.6, -0.6); glVertex2f( 0.0, 0.8); glVertex2f( 0.6, -0.6); glVertex2f( -0.5, 0.5); } glEnd(); glFlush(); }void drawLineLoop(){ glClear(GL_COLOR_BUFFER_BIT); // Erase everything glColor3ub(227, 227, 227); glLineWidth(WIDTH); glBegin(GL_LINE_LOOP); { glVertex2f(0.5, 0.5); glVertex2f(-0.6, -0.6); glVertex2f( 0.0, 0.8); glVertex2f( 0.6, -0.6); glVertex2f( -0.5, 0.5); } glEnd(); glFlush(); }void draw_shape(){ if (KEY == ‘p’) drawPoints(); else if (KEY == ‘g’) drawPolygon(); else if (KEY == ‘l’) drawLines(); else if (KEY == ‘s’) drawLineStrip(); else if (KEY == ‘o’) drawLineLoop(); glutPostRedisplay();}// Keyboard callback function ( called on keyboard event handling )void keyboard(unsigned char key, int x, int y){ if (key == ‘q’ || key == ‘Q’) exit(EXIT_SUCCESS); if (key == ‘1’) WIDTH = 1.0; else if (key == ‘5’) WIDTH = 5.0; KEY = key;}// Main execution function int main(int argc, char *argv[]){ glutInit(&argc, argv); // Initialize GLUT glutInitWindowSize(500, 500); glutInitWindowPosition(200, 0); glutCreateWindow(“OpenGL example”); // Create a window glutDisplayFunc(draw_shape); // Register display callback glutKeyboardFunc(keyboard); // Register keyboard callback// gluOrtho2D(-10, 10, -10, 10); glutMainLoop(); // Enter main event loop return (EXIT_SUCCESS); }
maybe this code will help you with the solution because it is included with it as a help
Just follow the step-by-step instructions
Other files for more help
501472-3: Computer Graphics
Dr.Haneen Algethami
School of Computer Science, Faculty of computer science and information technology,
Taif University
hmgethami@tu.edu.sa,
Web page: https://sites.google.com/view/haneenalgethami/home
1 Graphics Software
Two types of Graphics software:
– General programming packages:-provides an extensive set of graphics functions that are used in a high-level programming language, such as C/C++ or
FORTRAN. Basic functions in a general package include those for generating
picture components, that are, lines, polygons, circles, setting colors.Example:
Windows API, OpenGL and Direct3D.
– Application graphics packages:-These are designed for non-programmers, so
that users can generate displays without worrying how graphics operations
work.
– Raster graphics:-Photoshop, Paint
– Vector graphics:-CorelDraw, CAD
1.1 Graphics Rendering Pipeline
Rendering: conversion from scene to image. Scene is represented as a model
composed of primitives. Model is generated by a program or input by a user.
Image is drawn on an output device: monitor, printer, memory, file, video frame.
Typically rendering process is divided into steps called the graphics pipeline.
Some steps are implemented by graphics hardware. Programmable graphics accelerator, GPU- programmable pipelines in graphics hardware
2
Haneen Algethami 2018
Fig. 1. Simplified Graphics Pipeline.
1.2 Coordinate System
Cartesian coordinates in math, engineering a point is typically modeled as a
floating point in a graph, typically x increasing right, y increasing up. In 2-D
graphics, each point is given a position 2-D position that has x, y coordinates,
and in the same way the 3-D graphics, each point is given a position 3-D position
that has x, y and z coordinates. The origin has coordinates (0,0,0) and is set
arbitrarily as the reference point.
1.3 What is a graphics package?
A software that takes user input and passes it to applications. Also, displays
graphical output for applications.
CS472-3:CG
3
1.4 2D Primitive possibilities
– Geometrical objects (point, line, circle, polygon,…)
– Mathematical curves
– Text primitives
– Fill patterns
– Bitmapped images/textures
1.5 3D primitive possibilities
– Geometrical objects (line, polygon, polyhedron, sphere, . . . )
– Mathematical surfaces
– Light sources
– Camera/eye points
– Hierarchy placeholders
– Object boundaries
1.6 Primitive attributes
– Color
– Thickness
– Position
– Orientation
– Transparency
– Behavior
1.7 Graphics output
– Rendering: process of mapping graphics commands (sets of primitives/attributes) to pixel values to be placed in frame buffer
– Mapping from application/world space into screen space
– Providing a view of the application model
4
Haneen Algethami 2018
1.8 Input handling and Interaction
Multiple input devices, each of which can send a trigger to the operating system
at an arbitrary time by a user:
– Button on mouse
– Pressing or releasing a key
Each trigger generates an event whose measure is put in an event queue which
can be examined by the user program
Fig. 2. Event Mode.
– Receive input from physical devices
– Map this input to logical devices for applications
– Apps register interest in events or devices
– Event-based programming
1.9 Styles of graphics programming
Event-based
– Uses an event loop
– Events (user input) placed into queues by I/O subsystem
– When an event occurs, a callback function runs to respond to the event
– Normally the scene is only redrawn after an event (application model changed)
Simulation-based
– – Uses a simulation loop
– Also uses event queues and callback functions
CS472-3:CG
5
– BUT, other processing (simulation) is done continuously even without user
input
– The scene is redrawn continuously as quickly as possible
1.10 Window management
– Manage screen space
– Mediate between application programs
– Provide logical output “canvases”
– Each app. believes it has an entire “screen” with its own coordinate system
1.11 Goals of graphics packages
– Abstraction; Device-independence
– logical input devices
– logical output devices (!)
– provide abstraction from hardware for app.
– produce application portability
– Appropriate primitive/attribute types
2 OpenGL
We will be using OpenGL as the primary basis for 3D graphics programming.
To draw a line or perform some other graphical operation, the CPU simply
has to send commands, along with any necessary data, to the GPU, which is
responsible for actually carrying out those commands. The CPU offloads most
of the graphical work to the GPU, which is optimized to carry out that work
very quickly. The set of commands that the GPU understands make up the API
of the GPU. OpenGL is an example of a graphics API, and most GPUs support
OpenGL in the sense that they can understand OpenGL commands, or at least
that OpenGL commands can efficiently be translated into commands that the
GPU can understand.
6
Haneen Algethami 2018
2.1 History of OpenGL
– Silicon Graphics (SGI) revolutionized the graphics workstation by implementing the pipeline in hardware (1982)
– To access the system, application programmers used a library called GL
(Graphics Library).
– With GL, it was relatively simple to program three dimensional interactive
applications
2.2 OpenGL: What is It?
OpenGL (Open Graphics Library) is a software interface to the graphics hardware. It is also an immediate-mode graphics API, i.e. no display model, application must direct OpenGL to draw primitives.
OpenGL is specifically designed for efficient processing of three dimensional
applications.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 and Omitted windowing and input to avoid window
system dependencies.
Graphics function in any package are defined as the set of specifications
that are independent of any programming language. A language binding is then
defined for a particular high level programming language. The OpenGL bindings
are done with C, C++, Fortran or Ada.
2.3 Basic OpenGL Syntax
Certain functions require that one (or more) of their arguments be assigned
a symbolic constant specifying, for instance, a parameter name, a value for a
parameter, or a particular mode. All such constants begin with the uppercase
letters GL. In addition, component words within a constant name are written
in capital letters, and the underscore ( ) is used as a separator between all component words in the name. Example: glBegin, glClear, glCopyPixels,
glPolygonMode
CS472-3:CG
7
Fig. 3. OpenGL function format.
OpenGL Coordinates System OpenGL Coordinates (which it maps to the
window) Choose a convention of x increases right, y increases up. Units are based
on the size of the window or screen Visible area stretches to fill window. Units
also correlate to percentage of window size, don’t correspond to physical units
or pixels. The coordinate system is defined using the projection matrix. Note:
3D glm functions still work in the special case of 2D – just use the defaults
glm : : mat4 p r o j e c t i o n M a t ;
// Our p r o j e c t i o n m a t r i x i s a 4 x4 m a t r i x
p r o j e c t i o n M a t = glm : : o r t h o ( −1 ,
// X c o o r d i n a t e o f l e f t e d g e
1,
−1,
// X c o o r d i n a t e o f r i g h t e d g e
// Y c o o r d i n a t e o f bottom e d g e
1,
// Y c o o r d i n a t e o f t o p e d g e
1,
// Z c o o r d i n a t e o f t h e ” near ” p l a n e
−1);
// Z c o o r d i n a t e o f t h e ” f a r ” p l a n e
8
Haneen Algethami 2018
2.4 OpenGL Libraries
Fig. 4. Software Organization.
Software Organization
Several levels of abstraction are provided
– GL (Graphics Library):
– Lowest level: vertex, matrix manipulation
– Library of 2-D, 3-D drawing primitives and operations – API for 3-D hardware acceleration
– glVertex3f(point.x, point.y, point.z)
– GLU (GL Utilities):
– Helper functions for shapes, transformations.
– Miscellaneous functions dealing with camera set-up and higher-level shape
descriptions
– gluPerspective( fovy, aspect, near, far )
– GLUT (GL Utility Toolkit):
– Highest level: Window and interface management
– Window-system independent toolkit with numerous utility functions, mostly
dealing with user interface.
– glutSwapBuffers()
CS472-3:CG
9
Since GLUT is an interface to other device-specific window systems, we can use it
so that our programs will be device-independent. Information regarding the latest version ofGLUTand download procedures for the source code are available at
the following web site: http://www.opengl.org/resources/libraries/glut/
Fig. 5. OpenGL Architecture.
DISPLAY LIST: All data whether it describes geometry or pixels, can be
saved in a display list for current or later use.
EVALUATOR: All geometric primitives are described by vertices. Parametric
curves and surfaces are initially described by control points and polynomial functions called basis functions. Evaluators provide a method to derive the vertices
used to represent the surface/curves from the control points.
PER VERTEX OPERATION: In this stage, the vertex are converted to
primitives.
10
Haneen Algethami 2018
PRIMITIVE ASSEMBLY: Clipping is the major operation done in this
stage. It is the elimination of the portions of geometry that falls outside the half
space, defined by plane. The result of this stage is complete geometric primitives,
which are transformed, clipped vertices with related color, depth.
PIXEL OPERATION: Pixels from the system memory are scaled, biased
and processed and the results are clamped and then written into the texture
memory or sent to the rasterization step.
TEXTURE ASSEMBLY: Texture image can be applied on to geometric
objects to make them look more realistic.
RASTERIZATION:
Rasterization is the conversion of both geometric and pixel data into fragments. Each fragment square corresponds to a pixel in the frame buffer.
FRAGMENT OPERATIONS: Before values are actually stored into the
frame buffer, a series of operations are performed that may alter or even throw
out fragments.
2.5 OpenGL Characteristics
– high-quality color images composed of geometric and image primitives.
– Mid-level, device-independent, portable graphics subroutine package
– 2D/3D graphics, lower-level primitives (polygons)
– Does not include low-level I/O management
– Basis for higher-level libraries/toolkits with varying levels of abstraction: GL,
GLU, and GLUT.
2.6 OpenGL graphics pipeline
Vertices input, sequence of rendering steps (vertex processor, clipper, resterizer
, fragment processor) image rendered.
CS472-3:CG
11
Fig. 6. OpenGL function format.
Vertex shader: manipulates vertices (e.g. move vertices)
Fregment shader manipulates pixels/fragments (e.g change color). .
2.7 Lack of Object Orientation
– OpenGL is not object oriented so that there are multiple functions for a given
logical function
– glVertex3f
– glVertex2i
– glVertex3dv
– Underlying storage mode is the same
– Easy to create overloaded functions in C++ but issue is efficiency
2.8 openGL is state-based!
– Commands: 1) depend on current state. 2) modify the current state
– Example: glVertex3i(x, y, z) depends on :
– current primitive mode
– current draw color
– current material and lighting state
– Example: glColor3f(r, g, b) modifies the current drawing color
2.9 openGL geometric primitives
– Points
– Lines
12
Haneen Algethami 2018
– Line strips
– Line loops
– Polygons
– Triangles
– Triangle strips
– Triangle fans
– Quads
– Quad strips
2.10 simple.c
#include /∗ i n c l u d e s g l . h ∗/
void mydisplay ( ) {
g l C l e a r (GL COLOR BUFFER BIT ) ;
g l B e g i n (GL POLYGON) ;
g l V e r t e x 2 f ( −0.5 , −0.5);
g l V e r t e x 2 f ( −0.5 , 0 . 5 ) ;
glVertex2f (0.5 , 0 . 5 ) ;
glVertex2f ( 0 . 5 , −0.5);
glEnd ( ) ;
glFlush ( ) ;
}
i n t main ( i n t argc , char ∗∗ a rg v ) {
glutCreateWindow ( ” s i m p l e ” ) ;
g l u t D i s p l a y F u n c ( mydisplay ) ;
glutMainLoop ( ) ;
}
2.11 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
CS472-3:CG
13
– The main function ends with the program entering an event loop
2.12 Default parameters
– simple.c is too simple
– Makes heavy use of state variable default values for: Viewing, Colors and
Window parameters.
2.13 OpenGL Camera
– Right-handed system
– From point of view of camera looking out into scene: OpenGL places a camera
at the origin in object space pointing in the negative z direction
– Positive rotations are counterclockwise around axis of rotation, i.e. right-hand.
Coordinate Systems
– The units in glVertex are determined by the application and are called
object or problem coordinates.
– The viewing specifications are also in object coordinates and it is the size of
the viewing volume that determines what will appear in the image.
– Internally, OpenGL will convert to camera (eye) coordinates and later to
screen coordinates
2.14 Transformations in OpenGl
Usually means a change – scale, rotate, and/or translate – or a combination of
changes.
– Modeling transformation: Refer to the transformation of models (i.e., the
scenes, or objects).
– Viewing transformation: Refer to the transformation on the camera.
– Projection transformation: Refer to the transformation from scene to image.
14
Haneen Algethami 2018
2.15 Model/View Transformations
– Model-view transformations are usually visualized as a single entity
– Before applying modeling or viewing transformations, need to set glMatrixMode(GL MODELVIEW)
– Modeling transforms the object
– Translation: glTranslate(x,y,z)
– Scale: glScale(sx,sy,sz)
– Rotation: glRotate(theta, x,y,z)
– Viewing transfers the object into camera coordinates:
gluLookAt (eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX,
upY, upZ)
2.16 Projection Transformation
– Transformation of the 3D scene into the 2D rendered image plane. Before applying projection transformations, need to set glMatrixMode(GL PROJECTION)
– Orthographic projection: glOrtho(left, right, bottom, top, near,
far)
– Perspective projection@ glFrustum (left, right, bottom, top, near,
far)
2.17 Program Structure
Most OpenGL programs have the following structure:
– 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
CS472-3:CG
15
– Display function
– Input and window functions
2.18 simple.c revisited
#include
i n t main ( i n t argc , char ∗∗ a rg v )
{
g l u t I n i t (& argc , a rg v ) ;
g l u t I n i t D i s p l a y M o d e (GLUT SINGLE |GLUT RGB ) ;
g l u t I n i t W i n d o w S i z e ( 5 0 0 , 5 0 0 ) ; /∗ d e f i n e window p r o p e r t i e s ∗/
glutInitWindowPosition ( 0 , 0 ) ;
glutCreateWindow ( ” s i m p l e ” ) ;
g l u t D i s p l a y F u n c ( mydisplay ) ; /∗ d i s p l a y c a l l b a c k ∗/
i n i t ( ) ; /∗ s e t OpenGL s t a t e ∗/
glutMainLoop ( ) ; /∗ e n t e r e v e n t l o o p d i s p l a y c a l l b a c k ∗/
}
2.19 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
16
Haneen Algethami 2018
2.20 Window Initialization
void i n i t ( )
{
g l C l e a r C o l o r ( 0 . 0 , 0 . 0 , 0 . 0 , 1 . 0 ) ; \∗ b l a c k c l e a r c o l o r ∗/
g l C o l o r 3 f ( 1 . 0 , 1 . 0 , 1 . 0 ) ; \∗ f i l l / draw i n w h i t e ∗/
glMatrixMode (GL PROJECTION ) ;
glLoadIdentity ( ) ;
g l O r t h o ( − 1 . 0 , 1 . 0 , −1.0 , 1 . 0 , −1.0 , 1 . 0 ) ; \∗ v i e w i n g volume ∗/
}
2.21 Display callback function
void mydisplay ( )
{
g l C l e a r (GL COLOR BUFFER BIT ) ;
g l B e g i n (GL POLYGON) ;
g l V e r t e x 2 f ( −0.5 , −0.5);
g l V e r t e x 2 f ( −0.5 , 0 . 5 ) ;
glVertex2f (0.5 , 0 . 5 ) ;
glVertex2f ( 0 . 5 , −0.5);
glEnd ( ) ;
glFlush ( ) ;
}
2.22 Callbacks
– Programming interface for event-driven input
– Define a callback function for each type of event the graphics system recognizes
– This user-supplied function is executed when the event occurs
– GLUT example: mouse callback function glutMouseFunc(mymouse)
2.23 GLUT event loop
– Last line in main.c for a program using GLUT is the infinite event loop
glutMainLoop();
CS472-3:CG
17
– In each pass through the event loop, GLUT
– looks at the events in the queue
– for each event in the queue, GLUT executes the appropriate callback function if one is defined
– if no callback is defined for the event, the event is ignored
– In main.c
– glutDisplayFunc(mydisplay) identifies the function to be executed
– Every GLUT program must have a display callback
2.24 Posting redisplays
– Many events may invoke the display callback function.
– Can lead to multiple executions of the display callback on a single pass through
the event loop
– We can avoid this problem by instead using glutPostRedisplay();
which sets a flag.
– GLUT checks to see if the flag is set at the end of the event loop.
– If set then the display callback function is executed.
2.25 Double Buffering
– Instead of one color buffer, we use two
– Front Buffer: one that is displayed but not written to
– Back Buffer: one that is written to but not displayed
– Program then requests a double buffer in main.c
– glutInitDisplayMode(GL RGB | GL DOUBLE)
– At the end of the display callback buffers are swapped
void mydisplay ( )
{
g l C l e a r (GL COLOR BUFFER BIT |
.
)
18
Haneen Algethami 2018
/∗ draw g r a p h i c s h e r e ∗/
.
glutSwapBuffers ()
}
2.26 Using the idle callback
The idle callback is executed whenever there are no events in the event queue
– glutIdleFunc(myidle)
– Useful for animations
void m y i d l e ( ) {
/∗ change s o m e t h i n g ∗/
t += dt
glutPostRedisplay ( ) ;
}
Void mydisplay ( ) {
glClear ( ) ;
/∗ draw s o m e t h i n g t h a t d e p e n d s on t ∗/
glutSwapBuffers ( ) ;
}
2.27 Using globals
The form of all GLUT callbacks is fixed
– void mydisplay()
– void mymouse(GLint button, GLint state, GLint x, GLint y)
Must use globals to pass information to callbacks
f l o a t t ; /∗ g l o b a l ∗/
void mydisplay ( )
{
/∗ draw s o m e t h i n g t h a t d e p e n d s on t
}
CS472-3:CG
19
2.28 Other important functions
– glPushMatrix() / glPopMatrix()
– Pushes/pops the transformation matrix onto the matrix stack
– glLoadIdentity(), glLoadMatrix(), glMultMatrix()
– Pushes the matrix onto the matrix stack
– Chapter 3 of the “Red Book” gives a detailed explanation of transformations
– Jackie Neider, Tom Davis, and Mason Woo, “The OpenGL Programming
Guide” (The Red Book)
2.29 OpenGL: Setup in Windows
– Go to the GLUT webpage
http://www.opengl.org/resources/libraries/glut.html
– From the bottom of the page, download the following
– Pre-compiled Win32 for Intel GLUT 3.7 DLLs for Windows 95 & NT —
– Follow the instructions in
http://www.lighthouse3d.com/opengl/glut/
– When creating the Visual C/C++ project, use the console based setup
501472 Computer Graphics
Department of Computer Science, CIT, Taif University
Spring 2021
Homework 3
This is an individual assignment. Not a group assignment.
You need to take help from the slides on OpenGL introduction as well as the
draw_shapes.cpp file.
1. Just like in the draw_shapes.cpp, you have to create draw_triangles.cpp.
2. When the user clicks ‘t’ on the keyboard, it should draw a normal triangle.
3. When the user clicks ‘s’ on the keyboard, the program should draw a triangle strip.
4. When the user clicks ‘f’ on the keyboard, the program should draw a triangle fan.
5. When the user clicks ‘r’,’g’, or ‘b’ on the keyboard, the draw color should change to red,
green, or blue, respectively.
6. The coordinates of the screen should be between -10, 10 on both axes.
7. There should be at least three triangles in a triangle strip or a triangle fan.
8. Write your name in comments at the top of the file. If you forget your name, you will
not get full marks.
9. The position of the window should be at (100, 150).
10. The size of the window should be (700, 700).
If the assignments of any students are same, they all will get O marks. There will be no excuse.
(Do not say he copied from me. Everyone will get O marks, because sharing is not allowed).
501472 Computer Graphics
Department of Computer Science, CIT, Taif University
Spring 2021
Homework 3
This is an individual assignment. Not a group assignment.
You need to take help from the slides on OpenGL introduction as well as the
draw_shapes.cpp file.
1. Just like in the draw_shapes.cpp, you have to create draw_triangles.cpp.
2. When the user clicks ‘t’ on the keyboard, it should draw a normal triangle.
3. When the user clicks ‘s’ on the keyboard, the program should draw a triangle strip.
4. When the user clicks ‘f’ on the keyboard, the program should draw a triangle fan.
5. When the user clicks ‘r’,’g’, or ‘b’ on the keyboard, the draw color should change to red,
green, or blue, respectively.
6. The coordinates of the screen should be between -10, 10 on both axes.
7. There should be at least three triangles in a triangle strip or a triangle fan.
8. Write your name in comments at the top of the file. If you forget your name, you will
not get full marks.
9. The position of the window should be at (100, 150).
10. The size of the window should be (700, 700).
If the assignments of any students are same, they all will get O marks. There will be no excuse.
(Do not say he copied from me. Everyone will get O marks, because sharing is not allowed).
