lecture 2 graphics programming l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Lecture 2 Graphics programming PowerPoint Presentation
Download Presentation
Lecture 2 Graphics programming

Loading in 2 Seconds...

play fullscreen
1 / 39

Lecture 2 Graphics programming - PowerPoint PPT Presentation


  • 186 Views
  • Uploaded on

Lecture 2 Graphics programming. The Sierpinski gasket program OpenGL API Primitives and geometry Color RGB and indexed color Viewing view volumes and orthographic projection Windows Control functions . The Sierpinski gasket. History

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Lecture 2 Graphics programming' - sabine


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
lecture 2 graphics programming
Lecture 2Graphics programming
  • The Sierpinski gasket program
  • OpenGL API
  • Primitives and geometry
  • Color
    • RGB and indexed color
  • Viewing
    • view volumes and orthographic projection
  • Windows
  • Control functions
the sierpinski gasket
The Sierpinski gasket
  • History

Mandelbrot (1977) dubs his construction of Sierpinski’s (1915) curve a gasket

  • Construction

1. Start with triangle (3 vertices)

2. Randomly select a point inside

3. Randomly choose one of the vertices

4. Find the point halfway between the midpoint the initial point and the vertex and mark it

5. Replace the initial point with the halfway pt

6. Return to step 3.

gasket c
Gasket.c
  • We will be using gasket.c to introduce OpenGL
  • You will need an OpenGL reference, there is good documentation at

http://www.opengl.org/Documentation/Documentation.html

gasket c4
Gasket.c
  • void main(int argc, char** argv) {
  • /* Standard GLUT initialization */
  • glutInit(&argc,argv);
  • glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); /* default */
  • glutInitWindowSize(500,500); /* 500 x 500 pixel window */
  • glutInitWindowPosition(0,0); /* place window top left on display */
  • glutCreateWindow("Sierpinski Gasket"); /* window title */
  • glutDisplayFunc(display); /* invoked when display updated */
  • myinit(); /* set attributes */
  • glutMainLoop(); /* enter event loop */
  • }
gasket c5
Gasket.c
  • void myinit(void) {
  • /* attributes */
  • glClearColor(1.0, 1.0, 1.0, 1.0); /* white background */
  • glColor3f(1.0, 0.0, 0.0); /* draw in red */
  • /* set up viewing */
  • /* 500 x 500 window with origin lower left */
  • glMatrixMode(GL_PROJECTION);
  • glLoadIdentity();
  • gluOrtho2D(0.0, 500.0, 0.0, 500.0);
  • glMatrixMode(GL_MODELVIEW);
  • }
gasket c6
Gasket.c
  • void display( void ) {
  • /* define a point data type */
  • typedef GLfloat point2[2];
  • /* define an arbitrary initial triangle */
  • point2 vertices[3]={{0.0,0.0},{250.0,500.0},{500.0,0.0}};
  • int i, j, k;
  • int rand(); /* standard random number generator */
  • point2 p ={75.0,50.0}; /* arbitrary initial point inside triangle */
  • glClear(GL_COLOR_BUFFER_BIT); /*clear the window */
gasket c7
Gasket.c
  • /* compute and plot 5000 new pts */
  • for( k=0; k<5000; k++) {
  • j=rand()%3; /* pick a vertex at random */
  • /* compute pt halfway between selected vertex & old point */
  • p[0] = (p[0]+vertices[j][0])/2.0;
  • p[1] = (p[1]+vertices[j][1])/2.0;
  • glBegin(GL_POINTS);
  • glVertex2fv(p); /* plot new point */
  • glEnd();
  • }
gasket c8
Gasket.c
  • glFlush(); /* clear buffers */
  • } /* end display() */
sphereflake
Sphereflake

*http://www.acm.org/tog/editors/erich/

drawing
Drawing
  • To draw a point from (5,10) to (10,20)
    • moveto(5,10); lineto(10,20); /* toy example*/
  • Use points, or vertices (point on object geom)
    • p = (x,y) same as p = (x,y,0) or p = [ x, y, z]
  • glVertexnt[v]
    • n is dimension (2,3,4)
    • t is type (int, float, double)
    • v is pointer to array (instead of arg list)
    • glVertex2i (GLint x, GLint y);
    • glVertex3fv (Glfloat vertex[3]);
opengl api functions
OpenGL API functions
  • We can specify
    • primitives (points, polys, text)
    • attributes (color, typeface, line thickness)
    • cameras (position, orientation, projection)
    • transformations (rotate, translate, scale)
    • input (keyboard, mouse)
    • system control (windows, errors)
opengl packages
OpenGL packages
  • GL - OpenGL library
    • main package
  • GLU - Graphics utility library
    • common objects
    • map coords between screen and object space
  • GLUT- GL utility tool kit
    • portable API for windowing environments
unfilled primitives
Unfilled primitives
  • Individual points (GL_POINTS)
  • Line segments (pairs of pts) (GL_LINES)
  • Polylines (GL_LINE_STRIP)
  • Closed polylines (GL_LINE_LOOP)
filled primitives
Filled primitives
  • Polygons (GL_POLYGON, GL_ TRIANGLE, GL_QUADS)
    • polygons are very important in CG!
    • used as performance metric
    • triangles are used to approximate most shapes because they’re convex and planar
    • convex, concave, holes, self-crossing
    • default is filled, for edge, draw twice
  • Strips (GL_ TRIANGLE _STRIP, GL_QUAD_STRIP)
geometry
Geometry
  • Other?
    • OpenGL supports primitive types
    • How about spheres and curved surfaces?
      • Sometimes a mathematical representation will suffice, other times we will tesselate
    • What about basic cubes?
      • The answer is...
questions
Questions
  • 1. In what colors are we drawing?
  • 2. Where on the screen does our image appear?
  • 3. How large will the image be?
  • 4. How do we create an area of the screen - a window - for our image?
  • 5. How much of our infinite pad will appear on the screen?
  • 6. How long will the image remain on the screen?
questions18
Questions
  • 1. In what colors are we drawing?
  • 2. Where on the screen does our image appear?
  • 3. How large will the image be?
  • 4. How do we create an area of the screen - a window - for our image?
  • 5. How much of our infinite pad will appear on the screen?
  • 6. How long will the image remain on the screen?
what is color
What is color?
  • Light in 350 to 780mn in EM spectrum
    • Color is a combination of frequencies (mostly)
    • I.e. a function of wavelength C()
how do we display color
How do we display color?
  • Obviously, we cannot match all frequencies
    • We cannot even discern all frequencies!
    • Two colors, C(), that match perceptually are called metamers, we can discern about 382,720 different colors, or metamers
      • ~128 different hues (fully saturated colors)
      • ~130 different saturation levels (e.g. greyscale)
      • 23 shades (saturation changes given fixed hue and lightness, this is an upper bound)
psychophysics vs physics
Perceptual term

Hue -------------------->

Saturation ------------->

Lightness -------------->

(reflecting objects)

Brightness ------------->

(self-luminous objects)

Colorimetry

Dominant wavelength

(wavelength of color)

Excitation purity

(saturation of color, or pro-portion of pure and white light)

Luminance

(amount/intensity of light)

Luminance

Psychophysics vs. physics
how do we display color22
How do we display color?
  • On a CRT, 14 bits or 16, 384 colors suffice for most images
    • 214 =16,384
  • True-color uses 24 bits, which means that about 16 million colors are available
    • 224 =~16M
rgb color model
RGB color model
  • Default model for CG
    • Given RGB as primary colors
    • All other colors are linear combinations of the primaries
    • C = T1R + T2G + T3B, where T1-3 are the tristimulus values
    • Values are additive, think of spotlights on a dark screen
      • if T1-3 = 0 screen is black
      • if T1-3 = 1* then screen is white
rgb color model24
RGB color model
  • 3D representation - the cube
    • Color specified independent of hardware - use floating pt values (not ints) from 0.0-1.0 and let someone else match color
      • glColor3f(1.0, 0.1, 0.2)
      • glClearColor(1.0, 1.0, 1.0, 1.0) /* takes alpha*/
    • The RGB model is device dependent, so that when you are converting from other color spaces you must account for the parameters of the specific display device
rgb color model25
RGB color model
  • Gamut
    • Not all colors (metamers) can be reproduced on CRT
    • The range of colors that can be produced is called the gamut
    • Gamuts of the eye, film, monitors and printers all differ
      • http://www.rapidgraphics.com/faq_gamut.html
indexed color mode
Indexed color mode
  • What if we only have 8 bits, (256 colors)?
    • We could use 3 bits for red, 3 bits for green and 2 bits for blue (for example)
      • this limits the number of possible colors
      • what if we were displaying paintings from Picasso’s blue period?
    • Or, we could store lookup table indices, instead of intensities, in the frame buffer
      • indirect way to specify color
      • lookup table (lut) contains the actual colors
indexed color mode27
Indexed color mode
    • colors virtually unlimited, e.g. we can have 256 shades of blue!
    • number of displayed colors, or colors in palette, is 2d, where d is the depth of the frame buffer
  • Motivation
    • mostly of historical importance due to reduction in cost of video memory
    • lut load is very fast < 1 millisecond
    • switching palettes is useful
indexed color example gif89a global color table
Indexed color example: GIF89a global color table

a. Description. This block contains a color table, which is a sequence of bytes representing red-green-blue color triplets. … and contains a number of bytes equal to 3 x 2^(Size of Global Color Table+1).

c. Syntax.

7 6 5 4 3 2 1 0 Field Name Type

http://www.dcs.ed.ac.uk/home/mxr/gfx/2d/GIF89a.txt

Red 0

Green 0

Blue 0

Red 1

Green 1

up to

Green 255

Blue 255

Byte

Byte

Byte

Byte

Byte

Byte

Byte

0

1

2

3

4

… .

767

indexed color example animated gif images
Indexed color example: Animated gif images

Bouncing ball animation

Animation steps

LUT entry number*

0 1 2 3 4 5 6 7

0

2

whtwhtwhtwhtwhtwhtwhtwht

wht

whtwht

blkblkblkblkblkblkblkblk

blk

blkblk

red

red

1

2

3

4

5

6

7

8

9

10

11

red

3

red

4

red

5

red

red

6

LUT#

red

red

7

red

1

red

*Unspecified entries are all white

questions30
Questions
  • 1. In what colors are we drawing?
  • 2. Where on the screen does our image appear?
  • 3. How large will the image be?
  • 4. How do we create an area of the screen - a window - for our image?
  • 5. How much of our infinite pad will appear on the screen?
  • 6. How long will the image remain on the screen?
viewing
Viewing
  • Where on the screen is our image displayed?
    • OpenGL uses a default view volume - a 2x2x2 cube centered at origin (0,0,0)
    • We can also specify our own view volume
      • glOrtho(left, right, bottom, top, near, far)
      • z=0 must be between near and far to view our img
    • Our view rectangle is a 2D version of the default view volume with z=0, near=-1, far=1
      • gluOrtho2D(left, right, bottom, top)
projection
Projection
  • Orthographic projection takes a point (x,y,z) in 3D and projects (i.e. maps) it to 2D (x,y,0)
  • Camera positioned at origin and points in negative z direction
    • it ‘sees’ all points in view rect/volume, even those in back of it - this is confusing - essentially, the camera’s position (but not direction) is irrelevant in this particular projection mode
  • Points projected outside our 2D view rectangle (or 3D volume) get clipped out
setting the projection matrix
Setting the projection matrix
  • glMatrixMode(GL_PROJECTION)
  • glLoadIdentity();
  • gluOrtho2D(0.0, 500.0, 0.0, 500.0);
  • glMatrixMode(GL_MODELVIEW);
questions35
Questions
  • 1. In what colors are we drawing?
  • 2. Where on the screen does our image appear?
  • 3. How large will the image be?
  • 4. How do we create an area of the screen - a window - for our image?
  • 5. How much of our infinite pad will appear on the screen?
  • 6. How long will the image remain on the screen?
window vs windows
Window vs. Windows
  • Window denotes a rectangular area of the display, in screen coordinates, or pixels
  • Windowing system refers to multi-window environments like XWindows or MSWindows
  • OpenGL assumes window origin (0,0) at bottom left. Check that this matches your system input device coordinate origin. (Top-left also common)
aspect ratio the ratio of a rect s width to its height
Aspect ratio:The ratio of a rect’s width to its height
  • Clip window (glOrtho) and display window sizes (glutInitWindowSize) need same aspect ratio or image may be distorted.
  • Render into a viewport - a rectangular area of the display window - before final output
    • Scene (world coords)
    • Clip window (eye coords)
    • Viewport (normalized screen coords)

glViewport(x,y,width,height) (note, vp and clip rect have same a.r.)

    • Screen (screen coords)
questions38
Questions
  • 1. In what colors are we drawing?
  • 2. Where on the screen does our image appear?
  • 3. How large will the image be?
  • 4. How do we create an area of the screen - a window - for our image?
  • 5. How much of our infinite pad will appear on the screen?
  • 6. How long will the image remain on the screen?
control functions
Control functions
  • In immediate-mode (our default mode), objects are computed, rasterized, then displayed; nothing is saved
  • To continue to display the object we must continue to re-compute it
  • This is the function of glutMainLoop()
  • We’ll need to Ctrl-C to exit
    • how inelegant!