COLOR MODELS 9/12/20151A.ARUNA/ASSISTANT PROFESSOR/SNSCE

INTRODUCTION Mechanisms for generating color displays with combinations of red, green, and blue light understanding how color is represented on a video monitor Color model is a method for explaining the properties or behavior of color within some particular context. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 2

PROPERTIES OF LIGHT Light, or different colors, is a narrow frequency band within the electromagnetic spectrum Other frequency bands within this spectrum are called – radio waves, – microwaves, – infrared wave – X-rays Each frequency value within the visible band corresponds to a distinct color 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 3

9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 4

PROPERTIES OF LIGHT Low frequency end is a red color (4.3 X 10" hertz)  reds through orange and yellow Highest Frequency end is a violet color (7.5 X 10" hertz).  green, blue, and violet 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 5

PROPERTIES OF LIGHT Light is an electro magnetic wave Various colors are described in terms of either the frequency f or wave length λ of the wave. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 6

PROPERTIES OF LIGHT wavelength and frequency of the monochromatic wave are inversely proportional to each other  with the proportionality constant as the speed of light c where c = fλ 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 7

Frequency component is constant(for all material) Speed of light and wavelength is dependent(based on materials) In a Vacuum, c = 3 x cm. Wavelength are very small, units can be calculated in terms of Angstroms( 1Å = cm ) or nanometres ( 1 nm = cm) Equivalent term of nanometre is millimicron More convenient to deal with frequency units (Spectral colors specified in Wave lenght) 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 8

9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 9

PROPERTIES OF LIGHT A light source such as the sun or a light bulb emits all frequencies within the visible range to produce white light. When white light is incident upon an object, some frequencies are reflected and some are absorbed by the object. The combination of frequencies present in the reflected light determines what we perceive as the color of the object 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 10

PROPERTIES OF LIGHT If low frequencies are predominant in the reflected light, the object is described as red. In this case, the perceived light has the dominant frequency at the red end of the spectrum. The dominant frequency is also called the hue, or simply the color of the light 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 11

PROPERTIES OF LIGHT Brightness is another property, which in the perceived intensity of the light. Intensity in the radiant energy emitted per limit time, per unit solid angle, and per unit projected area of the source. Radiant Energy is related to the luminance of the source 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 12

The next property in the purity or saturation of the light.  Purity describes how washed out or how pure the color of the light appears.  Pastels and Pale colors are described as less pure. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 13

Physical properties of light Energy spectrum for a light source with a dominant frequency near the red color 9/12/201514A.ARUNA/ASSISTANT PROFESSOR/SNSCE

The term chromaticity is used to refer collectively to the two properties, purity and dominant frequency. Two different color light sources with suitably chosen intensities can be used to produce a range of other colors. If the 2 color sources combine to produce white light, they are called complementary colors. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 15

Color models that are used to describe combinations of light in terms of dominant frequency use 3 colors to obtain a wide range of colors, called the color gamut. The 2 or 3 colors used to produce other colors in a color model are called primary colors. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 16

Color definitions Complementary colors - two colors combine to produce white light Primary colors - (two or) three colors used for describing other colors Two main principles for mixing colors: additive mixing subtractive mixing 9/12/201517A.ARUNA/ASSISTANT PROFESSOR/SNSCE

Additive mixing pure colors are put close to each other => a mix on the retina of the human eye (cp. RGB) overlapping gives yellow, cyan, magenta and white the typical technique on color displays 9/12/201518A.ARUNA/ASSISTANT PROFESSOR/SNSCE

Subtractive mixing color pigments are mixed directly in some liquid, e.g. ink each color in the mixture absorbs its specific part of the incident light the color of the mixture is determined by subtraction of colored light, e.g. yellow absorbs blue => only red and green, i.e. yellow, will reach the eye (yellow because of addition) 9/12/201519A.ARUNA/ASSISTANT PROFESSOR/SNSCE

Subtractive mixing,cont’d primary colors: cyan, magenta and yellow, i.e. CMY the typical technique in printers/plotters connection between additive and subtractive primary colors (cp. the color models RGB and CMY) 9/12/201520A.ARUNA/ASSISTANT PROFESSOR/SNSCE

Additive/subtractive mixing 9/12/201521A.ARUNA/ASSISTANT PROFESSOR/SNSCE

RED GREEN BLUE MODEL 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 22

HUMAN COLOR SEEING The retina of the human eye consists of cones (7-8M),”tappar”, and rods ( M), ”stavar”, which are connected with nerve fibres to the brain 9/12/201523A.ARUNA/ASSISTANT PROFESSOR/SNSCE

HUMAN COLOR SEEING CONT’D Theory: the cones consist of various light absorbing material The light sensitivity of the cones and rods varies with the wavelength, and between persons The ”sum” of the energy spectrum of the light the reflection spectrum of the object the response spectrum of the eye decides the color perception for a person 9/12/201524A.ARUNA/ASSISTANT PROFESSOR/SNSCE

RGB model all colors are generated from the three primaries various colors are obtained by changing the amount of each primary additive mixing (r,g,b), 0≤r,g,b≤1 9/12/201525A.ARUNA/ASSISTANT PROFESSOR/SNSCE

RGB MODEL CONT’D the RGB cube 1 bit/primary => 8 colors, 8 bits/primary => 16M colors 9/12/201526A.ARUNA/ASSISTANT PROFESSOR/SNSCE

YIQ COLOR MODEL 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 27

INTRODUCTION National Television System Committee (NTSC) 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 28 luminance (brightness) Y chromaticity information (hue and purity)I and Q YLuminance black and white TV monitors – use only Y Signal Ihue orange-cyan flash-tone shading bandwidth of 1.5 MHz Qhue information green-magenta bandwidth of about 0.6 MHz

9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 29

CMY MODEL 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 30

CMY model cyan, magenta and yellow are complementary colors of red,green and blue, respectively subtractive mixing Typical printer technique 9/12/201531A.ARUNA/ASSISTANT PROFESSOR/SNSCE

CMY MODEL CONT’D almost the same cube as with RGB; only black white the various colors are obtained by reducing light, e.g. if red is absorbed => green and blue are added, i.e cyan 9/12/201532A.ARUNA/ASSISTANT PROFESSOR/SNSCE

HSV MODEL 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 33

HSV MODEL HSV stands for Hue-Saturation-Value described by a hexcone derived from the RGB cube 9/12/201534A.ARUNA/ASSISTANT PROFESSOR/SNSCE

HSV model,cont’d Hue (0-360°); ”the color”, cp. the dominant wave-length (128) Saturation (0-1); ”the amount of white” (130) Value (0-1); ”the amount of black” (23) 9/12/201535A.ARUNA/ASSISTANT PROFESSOR/SNSCE

9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 36

HSV model,cont’d The numbers given after each ”primary” are estimates of how many levels a human being is capable to distinguish between, which (in theory) gives the total number of color nuances: 128*130*23 = In Computer Graphics, usually enough with: 128*8*15 = /12/201537A.ARUNA/ASSISTANT PROFESSOR/SNSCE

HLS model Another model similar to HSV L stands for Lightness 9/12/201538A.ARUNA/ASSISTANT PROFESSOR/SNSCE

ANIMATION 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 39

Introduction Time sequence of visual changes in a scene Generated by changing camera parameters such as position, orientation and focal length. Applications  Entertainment  Advertising  training  education Example : Advertising animations often transition one object shape into another 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 40

ANIMATION DEMO 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 41

ANIMATION DEMO 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 42

FRAME-BY-FRAME ANIMATION Each frame of the scene is separately generated and stored. Frames can be recoded on film or they can be consecutively displayed in "real-time playback" mode 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 43

FRAME-BY-FRAME ANIMATION 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 44

DESIGN OF ANIMATION SEQUENCES Animation sequence in designed with the following steps: Story board layout Object definitions Key-frame specifications Generation of in-between frames 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 45

STORY BOARD LAYOUT Outline of the action. Motion sequences : set of basic events that are to take place. Rough sketches or a list of the basic ideas for the motion. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 46

STORY BOARD LAYOUT 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 47

STORY BOARD LAYOUT 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 48

OBJECT DEFINITION Each participant in the action Movements of each object are specified along with the shape 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 49

KEY FRAME Detailed drawing of the scene at a certain time in the animation sequence. Each object is positioned according to the time for that frame. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 50

KEY FRAME 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 51

KEY FRAME 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 52

IN-BETWEENS Intermediate frames between the key frames. Film requires 24 frames per second and graphics terminals are refreshed at the rate of 30 to 60 frames per seconds. Time intervals for the motion are setup so there are from 3 to 5 in-between for each pair of key frames. Depending on the speed of the motion, some key frames can be duplicated. For a 1 min film sequence with no duplication, 1440 frames are needed. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 53

IN-BETWEENS Other required tasks are Motion verification Editing Production and synchronization of a sound track. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 54

GENERAL COMPUTER ANIMATION FUNCTIONS Steps in the development of an animation sequence are  Object manipulation and rendering  Camera motion  Generation of in-betweens Animation packages  wave front for designing and processing individual objects  store and manage the object database  Object shapes and associated parameter are stored and updated in the database 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 55

GENERAL COMPUTER ANIMATION FUNCTIONS Motion : generated according to specified constraints using 2D and 3D transformations. Standard functions : applied to identify visible surfaces and apply the rendering algorithms. Camera movement functions such as zooming, panning and tilting are used for motion simulation. Given the specification for the key frames, the in-betweens can be automatically generated. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 56

RASTER ANIMATIONS 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 57

Introduction On raster systems, real-time animation in limited applications can be generated using raster operations. To produce real time animation of either 2D or 3D objects. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 58

Introduction Animate objects along 2D motion paths using the color-table transformations.  Predefine the object as successive positions along the motion path : set the successive blocks of pixel values to color table entries.  Set the pixels at the first position of the object to „on ‟ values, and set the pixels at the other object positions to the background color.  The animation is accomplished by changing the color table values 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 59

Computer Animation Languages Graphics editor Scene description includes the positioning of objects and light sources defining the photometric parameters and setting the camera parameters. Action specification involves the layout of motion paths for the objects and camera. Keyframe systems are specialized animation languages designed dimply to generate the in- betweens from the user specified keyframes 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 60

Computer Animation Languages Parameterized systems allow object motion characteristics to be specified as part of the object definitions. Scripting systems allow object specifications and animation sequences to be defined with a user input script. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 61

KEYFRAME SYSTEMS 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 62

Introduction Each set of in-betweens are generated from the specification of two keyframes. For complex scenes, we can separate the frames into individual components or objects called cells, an acronym from cartoon animation. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 63

Morphing Transformation of object shapes from one form to another is called Morphing Morphing methods can be applied to any motion or transition involving a change in shape. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 64

Simulating Accelerations Curve-fitting techniques are often used to specify the animation paths between key frames  Given the vertex positions at the key frames : with linear or nonlinear paths. 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 65

Motion Specification 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 66 Direct Motion Specification

GRAPHICS PROGRAMMING USING OPENGL 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 67

Introduction OpenGL is a software interface that allows you to access the graphics hardware set of geometric primitives - points, lines, polygons, images, and bitmaps Libraries  OpenGL Utility Library (GLU) : viewing orientations and projections and rendering surfaces.  OpenGL Utility Toolkit (GLUT): hide the complexities of differing window APIs 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 68

Include Files #include managing your window manager tasks #include To run a OpenGL Program Libraries (place in the lib\ subdirectory of Visual C++)  opengl32.lib  glu32.lib  glut32.lib 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 69

Include Files Include files (place in the include\GL\ subdirectory of Visual C++)  gl.h  glu.h  glut.h Dynamically-linked libraries (place in the \Windows\System subdirectory)  opengl32.dll  glu32.dll  glut32.dll 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 70

Working with OpenGL Opening a window for Drawing  glutInit(&argc, argv) : initializes the GLUT library  glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB) : display mode for a window  glutInitWindowSize(640,480) : indicate the height and width (in pixels) of the requested window.  glutInitWindowPosition(100,15) : specify the screen location  glutCreateWindow(“Example”) : parameter which may appear in the title bar  glutMainLoop() : have to call the function 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 71

Event Driven Programming Four Glut functions  glutDisplayFunc(mydisplay) : GLUT determines that the contents of the window needs to be redisplayed.  glutReshapeFunc(myreshape) : window is resized or moved.  glutKeyboardFunc(mykeyboard) : keyboard inputs is handled  glutMouseFunc(mymouse) : Mouse input is handled 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 72

9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 73 GLUT_KEY_UPUp Arrow GLUT_KEY_RIGHTRight Arrow GLUT_KEY_DOWNDown Arrow GLUT_KEY_PAGE_UPPage Up GLUT_KEY_PAGE_DOWNPage Down GLUT_KEY_HOMEHome GLUT_KEY_ENDEnd GLUT_KEY_INSERTInsert

Example : Skeleton for OpenGL Code int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(465, 250); glutInitWindowPosition(100, 150); glutCreateWindow("My First Example"); glutDisplayFunc(mydisplay); glutReshapeFunc(myreshape); glutMouseFunc(mymouse); glutKeyboardFunc(mykeyboard); myinit(); glutMainLoop(); return 0; } 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 74

BASIC GRAPHICS PRIMITIVES 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 75

Introduction OpenGL Provides tools for drawing all the output primitives such as points, lines, triangles, polygons, quads etc and it is defined by one or more vertices These functions are  glBegin(int mode);  glEnd( void ); 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 76

The parameter mode of the function glBegin can be one of the following:  GL_POINTS  GL_LINES  GL_LINE_STRIP  GL_LINE_LOOP  GL_TRIANGLES  GL_TRIANGLE_STRIP  GL_TRIANGLE_FAN  GL_QUADS  GL_QUAD_STRIP  GL_POLYGON 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 77

glVertex( ) Main function used to draw objects defines a point (or a vertex) and it can vary from receiving 2 up to 4 coordinates 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 78

OpenGL Datatypes 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 79

Examples //the following code plots three dots glBegin(GL_POINTS); glVertex2i(100, 50); glVertex2i(100, 130); glVertex2i(150, 130); glEnd( ) // the following code draws a triangle glBegin(GL_TRIANGLES); glVertex3f(100.0f, 100.0f, 0.0f); glVertex3f(150.0f, 100.0f, 0.0f); glVertex3f(125.0f, 50.0f, 0.0f); glEnd( ); // the following code draw a lines glBegin(GL_LINES); glVertex3f(100.0f, 100.0f, 0.0f); // origin of the line glVertex3f(200.0f, 140.0f, 5.0f); // ending point of the line glEnd( ); ; 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 80

OpenGl State : current size of a point, the current color of a drawing, the current ba The value of a state variable remains active until new value is given ckground color, etc.  Example : glPointSize(4.0); glClearColor() : set the back groudcolor is set with glClearColor(red, green, blue, alpha), where alpha specifies a degree of transparency  Example : glClearColor (0.0, 0.0, 0.0, 0.0); 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 81

glClear() : To clear the entire window to the background color  Example :glClear(GL_COLOR_BUFFER_BIT) glColor3f() : establishes to use for drawing objects  Example: glColor3f(0.0, 0.0, 0.0); //black glColor3f(1.0, 0.0, 0.0); //red glColor3f(0.0, 1.0, 0.0); //green glColor3f(1.0, 1.0, 0.0); //yellow glColor3f(0.0, 0.0, 1.0); //blue glColor3f(1.0, 0.0, 1.0); //magenta glColor3f(0.0, 1.0, 1.0); //cyan glColor3f(1.0, 1.0, 1.0); //white 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 82

gluOrtho2D(): specifies the coordinate system in two dimension  void gluOrtho2D (GLdouble left, GLdouble right, GLdouble bottom,GLdouble top);  Example : gluOrtho2D(0.0, 640.0, 0.0, 480.0); glOrtho() : specifies the coordinate system in three dimension  Example : glOrtho(0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glFlush() : OpenGL commands to be executed glMatrixMode(GL_PROJECTION) : For orthographic projection glLoadIdentity() : To load identity matrix glShadeModel : Sets the shading model 9/12/2015A.ARUNA/ASSISTANT PROFESSOR/SNSCE 83