This document provides an introduction to computer graphics. It defines computer graphics as using a computer to produce and manipulate images on a screen by creating and manipulating models and images. It discusses modeling, rendering, imaging, animation, and hardware aspects of computer graphics. It provides examples of applications such as entertainment, design, scientific visualization, and more. It introduces the OpenGL graphics library and GLUT toolkit for window management in OpenGL programs. It provides conventions for OpenGL and GLUT functions and constants. Finally, it provides two short code examples of simple OpenGL programs to draw shapes and animate a rotating cube.

1. SBE 306B: Computer Systems III
(Computer Graphics)
Introduction
Dr. Ayman Eldeib
Systems & Biomedical
Engineering Department
Spring 2019

2. Computer Graphics Introduction
General Definition
 The use of a computer to produce and manipulate images on a screen.
 The creation and manipulation of models and images by a computer
 Modeling: Specification of shape and appearance in a way that
can be stored on a computer. Models are constructed from
geometric primitives - points, lines, and polygons - that are
specified by their vertices.
 Rendering: The creation of images from 2D/3D computer models.

3. Computer Graphics Introduction
What is CG?
 Imaging: representing 2D images.
 Modeling: representing 3D objects.
 Rendering: building 2D images from 3D models.
 Animation: simulating changes over time.
 Hardware: computer architecture for graphics.
Specialty

4. Computer Graphics Introduction
What is CG?
 Creating pictures on a computer
 Interacting with those pictures
 Displaying those pictures bigger, brighter, etc.
 Simulating physical phenomena
 Visualization of complex data
 Acquiring real-world geometry
 Video games
 …
Applications
Cont.

5. Computer Graphics Introduction
Applications
Entertainment (passive) Entertainment (active)
Cont.
What is CG?

6. Computer Graphics Introduction
Applications
Graphical User Interface Computer Aided Design
Cont.
What is CG?

7. Computer Graphics Introduction
Applications
Training / Education Training: Flight Simulator
Cont.
What is CG?

8. Computer Graphics Introduction
Applications
Scientific/Medical Visualization
Visible Human / 3D
Art / Photo Editing
Cont.
What is CG?

9. Computer Graphics Introduction
High-Level Graphics Pipeline
GPUCPU
Application
Processing
Geometry
Processing
Rasterization

10. Computer Graphics Introduction
 OpenGL is a state machine
 OpenGL is a software interface to graphics hardware, i.e. a graphics
API
 Software library
 Platform independent
 OpenGL provides tools to
 Construct shapes from geometric primitives (points, lines, bitmaps)
 Arrange objects in three-dimensional space and select vantage
point
 Calculate colors of objects by explicitly assigning colors, using
specified lighting conditions, by pasting textures, or some
combination of these
 OpenGL has become a standard because:
 It doesn’t try to do too much
Only renders the image, doesn’t manage windows, etc.
 It does enough: Useful rendering effects + high performance
OpenGL

11. Computer Graphics Introduction
OpenGL Utility Library (GLUT)
 Allows you to see what OpenGL produces
 Allows you to interact using keyboard and mouse
 Not a GUI kit
 Only provides simple menus
GLUT is a toolkit for window management

12. Computer Graphics Introduction
OpenGL / GLUT Conventions
 Functions in OpenGL start with gl
 Most functions just gl (e.g., glColor())
 Functions starting with glu are utility functions (e.g.,
gluLookAt())
 Note that GLU functions can always be composed
entirely from core GL functions
 Functions starting with glut are from the GLUT library,
built on top of OpenGL and WGL (Windows) or X
(Linux) for window management, mouse and keyboard
events, etc.
 Created and distributed as an entirely different
library

13. Computer Graphics Introduction
OpenGL / GLUT Conventions
 Function names indicate argument type and number
 Functions ending with f take floats
 Functions ending with i take ints
 Functions ending with b take bytes
 Functions ending with ub take unsigned bytes
 Functions that end with v take an array, i.e. v specifies
a pointer
 Most functions have multiple input types and
numbers, e.g. 2f,3f,4f,3i,v
Examples
 glColor3f() takes 3 floats
 glColor4fv() takes an array of 4 floats
Cont.

14. Computer Graphics Introduction
 OpenGL defined constants begin with GL_, use all capital
letters, and use underscores to separate words (like
GL_COLOR_BUFFER_BIT)
 OpenGL Type Definition starts with GL such as Glbyte,
Glshort, Glint, Glfloat, Gldouble, Glubyte, Glushort, and
GLuint
Cont.
OpenGL / GLUT Conventions

15. Computer Graphics Introduction
Example 1#include “glut.h”
void init (void)
{
gluOrtho2D (-1, 1, -1, 1);
}
void display (void)
{
glClear (GL_COLOR_BUFFER_BIT);
glColor3f (1.0, 0.0, 0.0);
glBegin(GL_POLYGON);
glVertex3f (0.5, 0.5, 0.0);
glVertex3f (-0.5, 0.5, 0.0);
glVertex3f (-0.5, -0.5, 0.0);
glVertex3f (0.5, -0.5, 0.0);
glEnd();
glFlush ();
}
void main (int argc, char** argv)
{
glutCreateWindow (“Red Square");
init ( );
glutDisplayFunc (display);
glutMainLoop ();
}

16. Computer Graphics Introduction
#include "glut.h"
float spin = 0.0;
void display ( void )
{
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glColor3f (1.0, 0.0, 0.0);
glPushMatrix();
glRotatef(spin,0.0,0.0,1.0);
glBegin(GL_POLYGON);
glVertex3f (-0.25, -0.25, 0.0);
glVertex3f (0.25, -0.25, 0.0);
glVertex3f (0.25, 0.25, 0.0);
glVertex3f (-0.25, 0.25, 0.0);
glEnd();
glPopMatrix();
glFlush ();
glutSwapBuffers();
}
void Timer(int value)
{
spin = spin + 1;
if (spin > 360.0)
spin = spin - 360.0;
glutPostRedisplay();
glutTimerFunc(30,Timer,0);
}
int main ( void )
{
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
glutCreateWindow("Rotating Cube");
gluOrtho2D (-0.5, 0.5, -0.5, 0.5);
glutDisplayFunc(display);
glutTimerFunc(0,Timer,0);
glutMainLoop();
return 0;
}
Example 2

17. Thank You