2003cs hons rw778 graphics1 chapter 1: introduction admin: admin: –lecture slots: monday 8-9:45,...

2003 CS Hons RW778 Graphics 1

Chapter 1: IntroductionChapter 1: Introduction

Admin:Admin:– Lecture slotsLecture slots:: Monday 8-9:45, Tuesday 9:15-11:00. Monday 8-9:45, Tuesday 9:15-11:00.

– BookBook: F. Hill, Computer Graphics Using OpenGL : F. Hill, Computer Graphics Using OpenGL (Little Big Bookstore)(Little Big Bookstore)

– EvaluationEvaluation: 3hr closed book, 8: 3hr closed book, 8thth week (50%) + weekly week (50%) + weekly pracs (50%)pracs (50%)

– PracsPracs: Windows or Linux, OpenGL. CAREFUL when : Windows or Linux, OpenGL. CAREFUL when using 3D Studio Max.using 3D Studio Max.

– This is a fun course, but also a LOT of hard workThis is a fun course, but also a LOT of hard work..


Chapter 1 : IntroductionChapter 1 : Introduction

Week 1: Introduction and OpenGL (Hill, ChWeek 1: Introduction and OpenGL (Hill, Ch.. 1,2). 1,2). Week 2: Windows and viewports; vector tools Week 2: Windows and viewports; vector tools

(Hill, Ch(Hill, Ch.. 3,4). 3,4). Week Week 33: : VVector toolsector tools (continued) (continued) (Hill, Ch (Hill, Ch.. 4). 4). Week Week 44: Transformations : Transformations on objectson objects (Hill, Ch (Hill, Ch.. 5). 5). Week Week 55: : Polygonal Polygonal meshes (Hill, Chmeshes (Hill, Ch.. 6). 6). Week Week 66: 3D viewing (Hill, Ch: 3D viewing (Hill, Ch.. 7). 7). Week Week 77: Lighting and face realism (Hill, Ch: Lighting and face realism (Hill, Ch.. 8). 8). Week 8: Exam Week 8: Exam Wednesday 09:00Wednesday 09:00



1.1 What is computer graphics (CG)?1.1 What is computer graphics (CG)?– Simply picturesSimply pictures– ToolsTools– Field of studyField of study

1.2 Where is CG used?1.2 Where is CG used?– Art, entertainment, publishingArt, entertainment, publishing– Image processingImage processing– Process monitoring, simulations, CADProcess monitoring, simulations, CAD– Scientific visualizationScientific visualization



1.3 Elements of pictures created in CG1.3 Elements of pictures created in CG– Output primitives and attributes:Output primitives and attributes:

» PolylinesPolylines

» TextText

» Filled regionsFilled regions

» Raster imagesRaster images

– 1.3.1 Polylines1.3.1 Polylines» Connected sequence of straight lines Connected sequence of straight lines



» Edge, vertex, polygon, simple polygonEdge, vertex, polygon, simple polygon

» Attributes: color, thickness, dashing, endpoint Attributes: color, thickness, dashing, endpoint blendingblending



– 1.3.2 Text1.3.2 Text» Font, color, size, spacing, orientationFont, color, size, spacing, orientation

» Tilting (graphs)Tilting (graphs)

– 1.3.3 Filled regions1.3.3 Filled regions» Filled shape – boundary (polygon)Filled shape – boundary (polygon)

» Filling used for shadow effects Filling used for shadow effects



– 1.3.4 Raster image1.3.4 Raster image» Consists of cells (called pixels) with color valueConsists of cells (called pixels) with color value

» Stored as array of numerical valuesStored as array of numerical values

» Bitmap : 0-1Bitmap : 0-1

» Created as hand-designed, or computed, or scanned.Created as hand-designed, or computed, or scanned.

» Computed: straight lines – “jaggies” Computed: straight lines – “jaggies”

» Easy manipulation (filters, cleanup)Easy manipulation (filters, cleanup)



– 1.3.5 Shades of gray and color in raster images1.3.5 Shades of gray and color in raster images» Pixel depth : n bits => 2Pixel depth : n bits => 2n n values (at least 256)values (at least 256)

» Smaller pixel depth => loss in quality. Banding.Smaller pixel depth => loss in quality. Banding.

» Color: RGBColor: RGB

» Color depth => sum of bits for each colorColor depth => sum of bits for each color

» High quality (true color) : 24 bits (eye perception)High quality (true color) : 24 bits (eye perception)

1.4 Graphics Display Devices1.4 Graphics Display Devices– 1.4.1 Line drawing (plotters): cross-hatching1.4.1 Line drawing (plotters): cross-hatching



– 1.4.2 Raster displays (video monitor, flat-panel 1.4.2 Raster displays (video monitor, flat-panel displays, printers)displays, printers)

» Display surface (X,Y)Display surface (X,Y)

» Frame buffer : memory to hold display pixels, with Frame buffer : memory to hold display pixels, with scan controller.scan controller.



» Some hardware (video monitor) requires “refresh” : Some hardware (video monitor) requires “refresh” : entire frame buffer scanned out to display many entire frame buffer scanned out to display many times per second.times per second.



» Video monitors :Video monitors : CRTCRT Digital-to-analog converters (DACs)Digital-to-analog converters (DACs) Refresh 60x per second to prevent flicker.Refresh 60x per second to prevent flicker. Scanning per lineScanning per line



– 1.4.3 Indexed Color and the LUT1.4.3 Indexed Color and the LUT» Programmable association between pixel value and colorProgrammable association between pixel value and color

» Bits in frame buffer acts as index into LUT.Bits in frame buffer acts as index into LUT.

» Palette: set of possible colors AT ONE TIME.Palette: set of possible colors AT ONE TIME.

– 1.4.4 Other raster display devices: flat-panel, LCD, 1.4.4 Other raster display devices: flat-panel, LCD, active matrix panels, plasma panel active matrix panels, plasma panel

– 1.4.5 Hard-copy raster devices: film recorder, laser 1.4.5 Hard-copy raster devices: film recorder, laser printer, inkjet plotter. printer, inkjet plotter. PostScriptPostScript..

1.5 Graphics input primitives and devices1.5 Graphics input primitives and devices– Selfstudy.Selfstudy.


Chapter 2: Drawing in OpenGLChapter 2: Drawing in OpenGL

2.1 Getting started2.1 Getting started– Environment: window, coordinate system, Environment: window, coordinate system,

elementary drawing routineselementary drawing routines– 2.1.1 Device-independence and OpenGL2.1.1 Device-independence and OpenGL

» LibrariesLibraries

– 2.1.2 Windows-based Programming2.1.2 Windows-based Programming» Event-driven, event queue and callbacksEvent-driven, event queue and callbacks

» System-dependent (glut)System-dependent (glut)

» Example: Fig. 2.2Example: Fig. 2.2



#include <gl/Gl.h>#include <gl/Gl.h>

#include <gl/glut.h>#include <gl/glut.h>

//<<<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>//<<<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>

void main(int argc, char** argv)void main(int argc, char** argv)

{{

// initialize// initialize

// create screen window// create screen window

glutDisplayFunc (myDisplay);glutDisplayFunc (myDisplay);

glutMouseFunc (myMouse);glutMouseFunc (myMouse);

glutKeyboardFunc (myKeyboard);glutKeyboardFunc (myKeyboard);

glutMainLoop(); glutMainLoop(); // go into a perpetual loop // go into a perpetual loop

}}



– 2.1.3 Opening a window for drawing (framework)2.1.3 Opening a window for drawing (framework)

#include <gl/Gl.h>#include <gl/Gl.h>

#include <gl/glut.h>#include <gl/glut.h>

//<<<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>//<<<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>

void main(int argc, char** argv)void main(int argc, char** argv)

{{

glutInit(&argc, argv); // initialize the toolkitglutInit(&argc, argv); // initialize the toolkit

glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set display modeglutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set display mode

glutInitWindowSize(640,480); // set window sizeglutInitWindowSize(640,480); // set window size

glutInitWindowPosition(100, 150); // set window position on screenglutInitWindowPosition(100, 150); // set window position on screen

glutCreateWindow("my first attempt"); // open the screen windowglutCreateWindow("my first attempt"); // open the screen window

glutDisplayFunc(myDisplay); // register redraw functionglutDisplayFunc(myDisplay); // register redraw function

myInit(); myInit();

glutMainLoop(); glutMainLoop(); // go into a perpetual loop // go into a perpetual loop

}}



2.2 Drawing basic graphics primitives2.2 Drawing basic graphics primitives– Establish coordinate systemEstablish coordinate system– Line drawing primitives : glBegin, glEnd, Line drawing primitives : glBegin, glEnd,

verticesvertices– Example:Example:

glBegin (GL_POINTS);glBegin (GL_POINTS);

glVertex2i(100,50);glVertex2i(100,50);



glEnd();glEnd();

- OpenGL commands: glVertex2i (…)OpenGL commands: glVertex2i (…)



– OpenGL data types : GLint, GLfloatOpenGL data types : GLint, GLfloat– OpenGL state: current state variables. OpenGL state: current state variables.

» glColor3f (red, green, blue)glColor3f (red, green, blue)

» glClear (GL_COLOR_BUFFER_BIT)glClear (GL_COLOR_BUFFER_BIT)

– Establish coordinate systemEstablish coordinate system» Matrices and transformations (ch. 3)Matrices and transformations (ch. 3)

– Fig. 2.10: A complete OpenGL programFig. 2.10: A complete OpenGL program» Note Note glFlush();glFlush();



– 2.2.1 Drawing dot constellations2.2.1 Drawing dot constellations» The Big DipperThe Big Dipper

» The Sierpinski GasketThe Sierpinski Gasket

» Simple dot plots (note scaling and shifting, which Simple dot plots (note scaling and shifting, which are affine transformations)are affine transformations)

2.3 Line Drawings2.3 Line Drawings

glBegin (GL_LINES);glBegin (GL_LINES);

glVertex2i(40, 100);glVertex2i(40, 100);

glVertex2i(202, 96);glVertex2i(202, 96);

glEnd();glEnd();



– More than 2 vertices : pairedMore than 2 vertices : paired– 2.3.1 Drawing polylines and polygons2.3.1 Drawing polylines and polygons

» Polyline: collection of joined line segments, Polyline: collection of joined line segments, specified by ordered list of points.specified by ordered list of points.

» OpenGL: GL_LINE_STRIP (open line segment)OpenGL: GL_LINE_STRIP (open line segment)

» GL_LINE_LOOP (closed line segment – not fillable GL_LINE_LOOP (closed line segment – not fillable area – GL_POLYGON)area – GL_POLYGON)

» Examples: line graphs, polylines from file, Examples: line graphs, polylines from file, parameterizing figures, polyline drawerparameterizing figures, polyline drawer



– 2.3.2 Line drawing with 2.3.2 Line drawing with moveto()moveto() and and lineto()lineto()

» Current positionCurrent position

– 2.3.3 Drawing aligned rectangles2.3.3 Drawing aligned rectangles» glRecti(x1,y1,x2,y2)glRecti(x1,y1,x2,y2)

– 2.3.4 Aspect ratio of aligned rectangle2.3.4 Aspect ratio of aligned rectangle» width/heightwidth/height

» NB! Work through all practice exercises on pp. 60—NB! Work through all practice exercises on pp. 60—61.61.



– 2.3.5 Filling polygons2.3.5 Filling polygons» Must be convex!Must be convex!

– 2.3.6 Other graphics primitives:2.3.6 Other graphics primitives:» GL_TRIANGLES,GL_QUADS,GL_TRIANGLE_STRIPGL_TRIANGLES,GL_QUADS,GL_TRIANGLE_STRIP» GL_TRIANGLE_FAN,GL_QUAD_STRIPGL_TRIANGLE_FAN,GL_QUAD_STRIP



2.4 Simple mouse and keyboard interaction2.4 Simple mouse and keyboard interaction– glut callbacks on events:glut callbacks on events:

glutMouseFunc, glutMotionFunc, glutMouseFunc, glutMotionFunc, glutKeyboardFuncglutKeyboardFunc

– 2.4.1 Mouse interaction : selfstudy2.4.1 Mouse interaction : selfstudy

– 2.4.2 Keyboard interaction : selfstudy2.4.2 Keyboard interaction : selfstudy

2.6 Case studies: SELFSTUDY2.6 Case studies: SELFSTUDY



Programming Task 1Programming Task 1 : Implement Case : Implement Case Study 2.5 (Polyline Stippling), p. 75, in Hill.Study 2.5 (Polyline Stippling), p. 75, in Hill.

Familiarize yourself with OpenGL, Linux Familiarize yourself with OpenGL, Linux (or Windows) and C/C++.(or Windows) and C/C++.

The usual rules for programming projects The usual rules for programming projects hold: hold: – No extensions (demo Monday 08:00)No extensions (demo Monday 08:00)– No copying/cheatingNo copying/cheating– Accompanying report to be handed in at demoAccompanying report to be handed in at demo

2003cs hons rw778 graphics1 chapter 1: introduction admin: admin: –lecture slots: monday 8-9:45,...

Documents

graphics display devices1

computer graphics cg

graphics input primitives

opengl hill

objects hill

color valuestored

indexed color

raster display devices