Higher Technological Institute

Computer Science Department

Computer Graphics

Dr Osama Farouk 1
Dr Ayman Soliman
Dr Adel Khaled
Lecture One

2
 Course Outlines
• Introduction to Computer Graphics .
• Overview of Graphics systems .
• Methods for producing basic picture components such as lines, circles, and
polygons.
• Algorithms for performing geometric transformations such as rotation and
scaling.
• Procedures for displaying views of two dimensional and three-dimensional
scenes.
3
 Textbook

“Computer Graphics with OpenGL” , Third

edition , Hearn - Baker

4
 Introduction to Computer Graphics
What is computer graphics?
“Computer graphics is concerned with producing images and animations”
• Imaging = representing 2D images
• Modeling = representing 3D objects
• Rendering = constructing 2D images from 3D models
• Animation = simulating changes over time

5
 Applications
• Entertainment
• Computer-aided Design
• Scientific Visualization
• Training
• Education
• e-Commerce
• Computer Art
• Image Processing
6
Entertainment

7
Computer-aided Design

8
Scientific Visualization

9
Training

10
Education

11
e-Commerce

12
Computer Art

13
 Image Processing

• Image processing is the modification of interpretation of existing pictures.

• Some IP applications:
➢ improving image quality,
➢ analyzing satellite photos of the earth and telescopic recordings of galactic
star distributions.
➢ Medical applications: picture enhancements in tomography, simulations of
surgical operations, Ultrasonic and nuclear medical scanners.

14
 Graphical User Interfaces (GUI)

The major components of a graphical interface are a window manager,

menus, and icons.

GUI: is a form of user interface that allows users to interact with electronic
devices through graphical icons and audio indicator such as primary notation,
instead of text-based user interfaces, typed command labels or text navigation

15
 Overview of Graphics systems
We explore the basic features:
• Graphics hardware components.
• Video display devices.
• Input devices.
• Graphics software package.

16
 Video Display Devices
1- Cathode Ray Tube (CRT)
➢ Cathode Ray Tube (CRT) A beam of electrons (cathode rays), emitted
by an electron gun, passes through focusing and deflection systems
that direct the beam toward specified positions on the phosphor-
coated screen.

➢ The phosphor then emits a small spot of light at each position

contacted by the electron beam.

➢ The most common method now employed for maintaining phosphor

glow is to redraw the picture repeatedly by quickly directing the electron
beam back over the same screen points.

‫تعتمد أنبوبة الكاثود في عملها على الظاهرة الفيزيائية وهي أن مادة الفسفور تشع ضوء إذا تم قصفها بسيل‬
‫من االلكترونات والتي تمتلك السرعة والجهد الكافيين لتحفيز الكترونات مادة الفسفور وإعطائها الطاقة‬
17
‫ وأثناء عملية االنطالق إلى حزمة‬،‫الالزمة لكي تنطلق وتتحرر من حزمة التكافؤ إلى حزمة الطاقة األعلى‬
.‫أعلى فإنها تطلق مجموعة من الفوتونات والتي تمثل الضوء المنبعث‬
Components:
1- Electron Gun
▪ Heating Element
▪ Cathode
▪ Control Grid
▪ Acceleration Anode
▪ Focusing Grid
2- Deflection Coils

18
 2- Color CRT MONITOR
➢ A CRT monitor displays color pictures by using a
combination of phosphors that emit different-colored
light.

➢ The emitted light from the different phosphors merges

to form a single perceived color, which depends on the
particular set of phosphors that have been excited.

https://www.youtube.com/watch?v=cwkuCgYI91w
19
 Flat-Panel Displays

➢ The term flat-panel display refers to a class of video devices that have reduced
volume, weight, and power requirements compared to a CRT.

➢ Some additional uses for flat-panel displays are as small TV monitors, calculator
screens, pocket video-game screens, laptop computer screens, armrest movie-
viewing stations on airlines, advertisement boards in elevator.

➢ We can separate flat-panel displays into two categories: emissive displays and
non-emissive displays.

20
 Flat-Panel Displays
➢ The emissive displays (or emitters) are devices
that convert electrical energy into light.
Plasma panels, thin-film electroluminescent
displays, and light-emitting diodes are
examples of emissive displays.

➢ Non-emissive displays (or non-emitters) use

optical effects to convert sunlight or light from
some other source into graphics patterns. The
most important example of a non-emissive
flat-panel display is a liquid-crystal device LCD
screen. 21
 Input Devices
Keyboard
Mouse
Joysticks
Image scanners
Touch panels
Light pens
Voice System

22
 Graphics software
• Special purpose package
Examples of such applications include artist’s painting programs

• General programming packages

Provides a library of graphics functions that can be used in a programming
language such as C, C++ , open GL.

23
 Graphics Functions
➢Graphics output Primitives.
➢Attributes Graphics Primitives.
➢Geometric transformations.
➢Viewing transformations.
➢Many other operation.

24
 OpenGL
➢ OpenGL is a software interface to graphics hardware.
➢ OpenGL is designed as hardware-independent interface to be implemented on
many different hardware platforms.
➢ OpenGL doesn't provide high-level commands for describing models of three-
dimensional objects. Such commands might allow you to specify relatively
complicated shapes such as automobiles, parts of the body, airplanes, or
molecules.
➢ With OpenGL, you must build up your desired model from a small set of
geometric primitive -points, lines, and polygons.

http://www.openGL.org.
https://www.opengl.org/sdk/docs/man2/

OpenGl programming Guide Book:

25
http://www.glprogramming.com/red/
 Download OpenGL
How to get OpenGL working in Visual Studios 2013

https://www.youtube.com/watch?v=3IjxgvZq9a0

26
 OpenGl, GLU and GLUT

• OpenGL: basic functions.

• GLU: OpenGl Utility library.
• GLUT: OpenGL Utility toolkit library.

GLU and GLUT: Handy functions for viewing and geometry.

27
Basic OpenGL Syntax
Function names in the OpenGL basic library
glBegin, glClear, glCopyPixel
Certain functions : for instance , a parameter name
GL_2D, GL_RGB, GL_POLYGON
Data type:
GLbyte, GLint, GLfloat, Glboolean
Related libraries
The OpenGL Utility (GLU): all GLU function names start with glu
Header files
#include<windows.h>
#include<GL/gl.h>
#include<GL/glu.h>
If we used OpenGL Utility Toolkit(GLUT) we can replace the header files with 28

#include <GL/GLUT.h>
 Example
The display windows and line segment such as following Figure :

29
#include <Windows.h>
#include <GL\glew.h>
#include <GL\freeglut.h>
#include <iostream>
#include <GL/glut.h> // (or others, depending on the system in use)
void init (void){
glClearColor (1.0, 1.0, 1.0, 0.0); // Set display-window color to white.
glMatrixMode (GL_PROJECTION); // Set projection parameters.
gluOrtho2D (0.0, 200.0, 0.0, 150.0);}
void lineSegment (void){
glClear (GL_COLOR_BUFFER_BIT); // Clear display window.
glColor3f (1.0, 0.0, 0.0); // Set line segment color to red.
glBegin (GL_LINES);
glVertex2i (180, 15); // Specify line-segment geometry.
glVertex2i (10, 145);
glEnd ( );
glFlush ( ); // Process all OpenGL routines as quickly as possible.}
void main (int argc, char** argv){
glutInit (&argc, argv); // Initialize GLUT.
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); // Set display mode.
glutInitWindowPosition (50, 100); // Set top-left display-window position.
glutInitWindowSize (400, 300); // Set display-window width and height.
glutCreateWindow ("An Example OpenGL Program"); // Create display window.
init ( ); // Execute initialization procedure.
30
glutDisplayFunc (lineSegment); // Send graphics to display window.
glutMainLoop ( ); // Display everything and wait.
}