Raster Images CRT Screen Output Device Cathode Ray Tube CRT Screen consists of grid of cells each cell contains set of phosphors electron beam scans across rows of cells from top to bottom of screen phosphors emit visible light when hit by electron beam Color monitors have red green and blue phosphors in each cell generates light from combinations of these primary colors 1 Basic Color Representation in Graphics We will treat colors as a 3 D space of r g b triples all colors will be composed from three primary colors red green blue the value of each r g b value is between 0 and 1 coefficients represent relative contribution of each primary Red 1 0 0 Green 0 1 0 Blue 0 0 1 0 0 0 8 0 Colors along Red axis 0 6 0 0 0 8 0 6 1 Full Color Displays Each pixel contains 3 values one for each of R G and B typically 24 bits pixel 8 bits channel values of 0 255 integer values 0 255 correspond to floating points values 0 1 integers are just more convenient in hardware implementation Pixel values directly control intensity of electron beams R 0 implies red beam is off 0 R R 255 implies red beam at full intensity 255 24 bits pixel generally considered full color produces 224 16 million different colors high end systems might support 36 bits pixel or more 2 Color Display Via Lookup Tables Alternative to direct RGB values single value per pixel typically 8 or 16 bits pixel value is an index into a color lookup table or palette Pixel Value k Common when memory is scarce can customize set of colors to image being displayed 256 colors of your choice vs 3x3x2 grid of RGB colors Also supports some handy tricks can recolor entire image just by changing palette animating palette creates interesting effects eg glowing Color Lookup Table 0 R G B k R G B 255 R G B RGB to monitor R G B Raster Image Representation Represent image as a rectangular grid of pixels P x y each pixel p will store a color value RGB triple for color images single value for grayscale or monochrome images 3 Raster Image Representation Can separate RGB color image into 3 distinct color channels each by itself is a monochrome image RGB channels Generic Raster Display Systems Application Image Data Graphics hardware Video Signal Monitor Graphics hardware maintains a 2 D array of pixels the frame buffer values in the frame buffer control intensity of electron beams in CRT raster scan process is typically performed at 60 100 Hz Frame buffers are characterized by resolution dimensions in pixels eg 1024 x 768 bit depth of bits per pixel typically 8 24 4 Geometric Primitives as seen through OpenGL Introduction to OpenGL OpenGL is a standard library for 2 D 3 D drawing maps fairly directly to graphics hardware state based architecture immediate mode drawing doesn t address windows or input events we ll use FLTK GLUT is another even more minimalist solution Why we are using OpenGL broad cross platform support a free software implementation www mesa3d org Decoding OpenGL function names general rule glFunc 234 dfis v v pass pointer rather than values dimension type e g i int example glVertex3f x y z vertex position as 3 floats 5 Overview of an OpenGL Program System dependent initialization setup a window on the screen bind OpenGL to this window OpenGL initialization setup coordinate system setup initial state values Begin event loop wait for system to deliver event e g mouse moved figure out how this will change the scene if at all if redraw event execute OpenGL commands to draw scene Event Driven Interactive Programs This is the model for modern GUI programs run some initialization code at startup everything after that happens in response to events Typical events window resized redraw window mouse moved button clicked key pressed main InitializeApp while done event WaitForOne handle event Most frameworks use callbacks procedures bound to specific events for instance call function when a button is pressed 6 OpenGL Uses Immediate Mode Rendering Execute drawing commands every time window is repainted or every time the scene changes e g for animation vs retained mode where system maintains model of scene Immediate Mode Retained Mode void initialize void initialize load triangle list T void on redraw for all triangles t draw triangle t void on redraw OpenGL does provide some retained mode features display lists capture store immediate mode stream vertex arrays pass large array of points in one call Extensive State Information Is always a current state initialized with default values changes to the state apply to all subsequent operations set color Red draw triangle t1 draw triangle t2 draw triangle t3 set color Blue draw triangle t4 red red red blue Examples of state information include current drawing color line width point size coordinate system defined by transformation matrix enabled features depth tests alpha blending lighting 7 Setting Up a 2 D Drawing Canvas First we need to define the coordinate system specifies how to map vertex coordinates onto window for now we re focusing on 2 D gluOrtho2D left right bottom top Example gluOrtho2D 1 1 1 1 OpenGL coordinates 1 1 Window Pixel Coordinates w 0 1 1 h Before We Draw Anything Must always remember to clear canvas before drawing glClearColor r g b specify the color to clear the canvas to should generally set to be 0 i e fully transparent this is a state variable and can be done only once glClear GL COLOR BUFFER BIT actually clears the screen there are other things that can be cleared at the same time such as the depth buffer GL DEPTH BUFFER BIT but we re not using it right now And always set the current color before you start drawing for example glColor3f 0 8 0 2 0 2 for a red shade 8 Geometric Primitives The 3 fundamental primitives for now points line segments filled polygons We like these primitives because they re convenient the math is simple just linear equations direct hardware support they re efficient universal support all graphics software understands them Primitives always bracketed by calls to glBegin glEnd argument to glBegin determines primitive type Primitive 1 Points Points are either 2 or 3 dimensional by convention represent them as column vectors x v y or x v y z see Vec2 and Vec3 classes in support library Drawing 2 D Points Drawing 3 D Points extern Vec2 v k extern Vec3 v k glBegin GL POINTS for int i 0 i k i glVertex2dv v i glEnd glBegin GL POINTS for int i 0 i k i glVertex3dv v i glEnd 9 Primitive 2 Line Segments 2 D lines are the set of all points satisfying ax by c 0 n p c