1. Chapter 1 Introduction to Computer Graphics
“One picture is better than a thousand words”
Vision is the most important sense of humans
A significant portion of a human brain processes visual information
Our vision is by far better than most of other animals’

2. Overview Applications Output devices: CRT, LCD
Interactive input devices: keyboard, mouse, tablet/stylus, joysticks, Touch-screen monitors
Computer graphics systems
Introduction to OpenGL

3. Applications
Showing photos, pictures

4. Presenting information
Bar charts
Pie charts

5. Curves
Surfaces

6. Weather charts

7. 2-d images from volume data
Ordinary X-ray image
Cross section X-ray image (tomography)

8. Magnetic resonance tomography images
Ultrasound images

9. Graphical user interface
icons, frames, labels, fields, text-area, buttons, pop-up manuals,...

10. Synthesizing images

11. Virtual idol (Reiko Arisugawa)

12. Ray tracing images

15. Animation
films

16. Games

17. Flight simulators

18. Virtual reality provides true 3-d scenes and interactions
Head-mounted display (HMD)
A system for tracking the position of HMD
Data glove

19. Computer-Aided-Design
interactively design and modify objects

20. Computer Art

21. Cathode-ray tube display (CRT)

22. The focus, position and movement of the beam are controlled by the electric fields generated by the deflection plates
When the beam hits the phosphor on the screen, the phosphor lights up but its intensity decays very fast. Nonetheless, the image retains in the retinas of our eyes for about 1/20 sec.
The beam moves regularly in
the trails shown on the left.

23. The picture seen on the screen is controlled by the changes of intensity and color along the movement of the beam
The entire screen is refreshed 30 to 60 times per second so that we can see a steady picture

24. Dimensions of the screen
The screen of a computer monitor consists of lines numbered 0, 1, 2, … starting from the top
Each lines consists of picture elements (pixels) numbered from left to right
Dimensions of the screen
SVGA(800 lines  600 pixels)
XVGA(1024768)
XVGA(12801024)
Each pixel composes of red, green and blue components. Each color component is represented by 1 byte (8 bits). The number of different colors that can be displayed is
millions 2 1
. . . .

25. Color CRT (3 guns: Red, Green and Blue)
1 pixel

26. Liquid Crystal Display (LCD)
The basic unit is a small device that twist the polarization of light 90o. But the twisting can be turned off when a voltage is applied. By adding two polarized planes with orthogonal orientations in both ends, this device can serve as a switch that controls whether light can pass through or not.
Light passes through
Light is blocked
Polarizers
References:

27. Architecture of a simple display system
Frame
Buffer
(Raster)
Video
Controller
Monitor
cpu
Display card
Frame buffer size
For XVGA, altogether 31024768  2.4 Mbytes
Since there are other buffers and overhead, a typical display card may contains 4 to 32 Mbytes RAM.
Video controller
cycles through the frame buffer to refresh the screen times per seconds.

28. A graphics system with a display processor
Monitor
A graphics system with a display processor
(Section 4.3 of Foley, van Dam)
Video
Controller
Frame
buffer
CPU
Display processor
System bus
System
memory
Peripheral devices

29. Printers Laser printers Ink-Jet printers
use laser beam to create a charge distribution on a drum coated with a photoelectric material. Toner is applied to the drum and then transferred to paper. To produce a color copy, the process is repeated three times for red, green and blue colors.
Ink-Jet printers
spray electrically charged ink on paper
ink stream is deflected by electric field
multiple jets of different color ink can shot simultaneously for producing color drawings

30. Interactive Input Devices
Keyboard
Mouse
Tablet/stylus
consist of a flat drawing board
and a pen
electromagnetic
high resolution
Joystick
the rate of cursor movement
depends on the displacement
of the stick

31. Touch-screen monitors
Scanners
Touch-screen monitors
electronic/optical
allow screen positions to be selected
low resolution

32. 3D handheld laser scanning digitizer
Long Range Laser
Scanning

33. Motion Tracking sensors

34. OpenGL programming
OpenGL ( gl ) is a common graphics library which provides functions for drawings and interactive input.
OpenGL is accessible via C++ programs
The Visual C++ platform is used for program development in this course
A function that draws a green triangle
Green Triangle
(0.7,-0.7)
(-0.7,-0.7)
(0,0.7)
Reading Assignment
Interactive Com. Gra. Chapters 1 and 2
OpenGL: A Primer Chapters 1 and 2

35. void display() {
glClear( GL_COLOR_BUFFER_BIT); // Clear the frame buffer
glColor3f( 0.0, 1.0, 0.0); // Set current color to green
glBegin( GL_POLYGON); // Draw the triangle
glVertex2f( -0.7, -0.7);
glVertex2f( 0.7, -0.7);
glVertex2f( 0, 0.7);
glEnd();
glFlush(); // Force to display the new drawings immediately }

36. In Window environment, display() is invoked when the output window is created, or is re-drew after moving or maximizing.
Usually, we need another function, init(), that specifies permanent features of the drawings. This function is invoked only once in the beginning.
void init() {
glClearColor( 0.0, 0.0, 0.0, 0.0); // Set the clear color to black
// Specify the boundaries of the viewing window
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-1.0, 1.0, -1.0, 1.0); // The para are: (left, right, bottom, top)
glMatrixMode(GL_MODELVIEW); }

37. Interaction with the Window System
Our graphics C++ programs are executed on PC and interact with the window OS using functions provided in the library glut
The layout of a simple program
OpenGL Utility Toolkit library for window operations
#include <GL/glut.h> // glut.h includes gl.h and glu.h
void display() { }
void init() {
int main( int argc, char **argv) {
An OpenGL utility library built on top of gl

38. int main( int argc, char **argv) {
glutInit( &argc, argv); // Initialize GLUT function callings
// Set window size (width, height) in number of pixels glutInitWindowSize( 400, 400);
// Set window position, from the left and top of the screen,
glutInitWindowPosition( 200, 100); // in numbers of pixels
// Specify a window creation event
glutCreateWindow( "Green Triangle");
// Specify the drawing function that is called when the window
glutDisplayFunc( display); // is created or re-drew
init(); // Invoke this function for initialization
glutMainLoop(); // Enter the event processing loop
return 0; // Indicate normal termination
// (Required by ANSI C) }

39. Event Processing
glutMainLoop() is the function that drives the major operations in all our graphics programs. The function iterates indefinitely. In each iteration, it check whether there are any events in the queue. If yes, it removes and processes the first event. It terminates the execution of the program when a <stop> event is processed.
Extract an event
Event Queue
Process the event
Event insertion:
Window creation, moving, maximizing, closing, etc.

40. Execution sequence
At first, glutMainLoop() picks up a <window creation> event from the queue, creates the window, and calls display(). When the  button of the window is clicked, a <stop> event is inserted in the queue. When this event is processed, the execution terminates
Clicking  button
glutInit();
Event Queue
Functions that specify a new window
start
main()
init(); glutDisplayFunc(display);
glutMainLoop()
stop
display()

41. Green Triangle