OpenGL is a software interface to graphics - - PDF document

▶
opengl is a software interface to graphics hardware you
SMART_READER_LITE
LIVE PREVIEW

OpenGL is a software interface to graphics - - PDF document

Jan 16, 2024 125 likes •833 views

slide-1
SLIDE 1

١

١

Computer Graphics using openGL

٢

Getting Started

Window based

slide-2
SLIDE 2

٢

٣

  • OpenGL is a software interface to graphics
  • hardware. You can use to specify the objects

and operations needed to produce interactive threedimensional applications

  • OpenGL is designed as a hardwareindependent

interface to be implemented on many different hardware platforms.

٤

OpenGL (1/3)

  • The most popular raster graphics library, providing a

powerful but primitive set of rendering commands

  • Already supported by every window systems
  • OpenGL Utility Library (GLU) : higherlevel routines, part
  • f OpenGL implementation

– Setting up matrices for specific viewing orientations and projections – Performing polygon tessellation and rendering surfaces

  • OpenGL Utility Toolkit (GLUT): windowsystem

independent highlevel library. Need to install this library separately.

slide-3
SLIDE 3

٣

٥

OpenGL (2/3)

  • Install OpenGL Utility Toolkit (GLUT) for MS Windows

– Download GLUT from http://reality.sgi.com/opengl/glut3/glut3.html – Unzip the package – Set “include directory” and “lib directory” in the C Compiler to include the directory containing glut.h, glut.lib – Copy glut32.dll into directory DRIVE:\WINNT\SYSTEM

  • Add #include <glut.h> to the beginning of the program

٦

OpenGL (3/3)

  • OpenGL Programming Guide:

– http://www.cs.ucf.edu/dsg/dtran/teaching/cps5 60/openGL/install/theredbook.zip

  • Nate Robins’ OpenGL Tutors

– http://www.cs.utah.edu/~narobins/opengl.html

slide-4
SLIDE 4

٤

٧

  • !"

## $% & '( $ "( )% * "

&+,$- +. /+.01+ +

" 2( $ " $ 32" ! ! " 3( $ 32" $ " ( $ %$"$%* $ 32" ") "

٨

In the "Project options" textbox replace 4& 4 with 4&4

/5,

The following files to the Object/library modules: opengl32.lib glut32.lib glu32.lib

slide-5
SLIDE 5

٥

9

  • Programming with OpenGL

Part 1: Background

10

  • Objectives
  • Development of the OpenGL API
  • OpenGL Architecture

– OpenGL as a state machine

  • Functions

– Types – Formats

  • Simple program
slide-6
SLIDE 6

٦

11

  • OpenGL

The success of OpenGL (1992), a platform independent API that was – Easy to use – Close enough to the hardware to get excellent performance – Focus on rendering – Omitted windowing and input to avoid window system dependencies

12

  • GLUT
  • OpenGL Utility Toolkit (GLUT)

– Provides functionality common to all window systems

  • Open a window
  • Get input from mouse and keyboard
  • Menus
  • Eventdriven

– Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform

  • No slide bars
slide-7
SLIDE 7

٧

13

  • OpenGL Functions
  • Primitives

– Points – Line Segments – Polygons

  • Attributes
  • Transformations

– Viewing – Modeling

  • Control (GLUT)
  • Input (GLUT)
  • Query

14

  • OpenGL State
  • OpenGL is a state machine
  • OpenGL functions are of two types

– Primitive generating

  • Can cause output if primitive is visible
  • How vertices are processed and appearance of

primitive are controlled by the state

– State changing

  • Transformation functions
  • Attribute functions
slide-8
SLIDE 8

٨

15

  • Lack of Object Orientation
  • OpenGL is not object oriented so that there are

multiple functions for a given logical function – – –

  • Underlying storage mode is the same
  • Easy to create overloaded functions in C++ but

issue is efficiency

16

OpenGL function format

$ .6376889: !"! # 6889 floats

slide-9
SLIDE 9

٩

15/03/2010 17

OpenGL Function Format

Why does this matter?

  • 1. On some operating systems the C/C++ same C/C++ datatypes have

different sizes > the OpenGL types are consistent.

  • 2. 0 is not always 0 e.g. could be 0.0000000011111. Therefore to insure

accuracy we should say:

GLfloat myFloat = 0.0f

Computer Graphics CSC476

Graphics Library

  • Primitives: lines, circles, ellipses, polygons,

filling, clipping

  • Attributes

– Color – Line style – Material properties for 3D

  • Lights
  • Transformations
slide-10
SLIDE 10

١٠

OpenGL

  • The most popular raster graphics library, providing a

powerful but primitive set of rendering commands

  • Already supported by every window systems
  • OpenGL Utility Library (GLU) : higherlevel routines, part
  • f OpenGL implementation

– Setting up matrices for specific viewing orientations and projections – Performing polygon tessellation and rendering surfaces

  • OpenGL Utility Toolkit (GLUT): windowsystem

independent highlevel library. Need to install this library separately. OpenGL

  • Install OpenGL Utility Toolkit (GLUT) for MS

Windows

– Download GLUT from http://reality.sgi.com/opengl/glut3/glut3.html – Unzip the package – Set “include directory” and “lib directory” in the C Compiler to include the directory containing glut.h, glut.lib – Copy glut32.dll into directory DRIVE:\WINNT\SYSTEM

  • Add #include <glut.h> to the beginning of the

program

slide-11
SLIDE 11

١١

OpenGL

  • OpenGL Programming Guide:

– http://www.cs.ucf.edu/dsg/dtran/teaching/cps5 60/openGL/install/theredbook.zip

  • Nate Robins’ OpenGL Tutors

– http://www.cs.utah.edu/~narobins/opengl.html 5 ,

  • Dot
  • Lines
  • Polylines
  • Polygons
  • Text
  • Filled regions
  • Raster Images

,*&

slide-12
SLIDE 12

١٢

23

  • OpenGL Primitives
  • 24
  • Polygon Issues
  • OpenGL will only display polygons correctly that

are

– Simple: edges cannot cross – Convex: All points on line segment between two points in a polygon are also in the polygon – Flat: all vertices are in the same plane

  • User program can check if above true

– OpenGL will produce output if these conditions are violated but it may not be what is desired

  • Triangles satisfy all conditions
  • $
slide-13
SLIDE 13

١٣

25

  • Attributes
  • Attributes are part of the OpenGL state and

determine the appearance of objects – Color (points, lines, polygons) – Size and width (points, lines) – Stipple pattern (lines, polygons) – Polygon mode

  • Display as filled: solid color or stipple pattern
  • Display edges
  • Display vertices

,

The first two polylines in Figure 1.12 are distinguished by the linethickness attribute. The third polyline is drawn using dashed segments. The attributes of a polyline are sometimes set by calling routines" 7;:!7!:"

slide-14
SLIDE 14

١٤

  • Some graphics devices have two distinct display modes: a 6

and a $"

  • 6 is used for the simple input and output of characters.

Usually, these characters cannot be placed arbitrarily on the display, but rather, can be put only in some row and column of a builtin grid.

  • $ offers a richer set of character shapes than the

text mode does, and characters can be placed arbitrarily. Figure 1.14 shows some examples of text drawn graphically.

A routine to draw a character string might look like /$7688$:< This routine places the starting point of the string at position (x, y) and draws the sequence of characters stored in the variable string.

  • 6&

6%( = 9( $( "

  • 7

* -$ '"'>8 $8-$'"'>7:"

  • !$
slide-15
SLIDE 15

١٥

  • - (?$
  • The ($ (sometimes called "fill area") primitive is a

shape filled with some color or pattern.

  • The boundary of a filled region is often a polygon.
  • Figure 1.17 shows several filled polygons.

Polygon A is filled with its edges visible, whereas B is filled with its border left undrawn. Polygons C and D are nonsimple. Polygon D even contains polygonal holes. Such shapes can still be filled. To draw a filled polygon, one would use a routine like , $7 8:< where the variable holds the data for the polygon the same kind of list as for a polyline and the variable contains some description of the pattern to be used for filling.

  • $ '"'1 $
  • @"

5 $ @ ( $ $ " $ ! @ 6 $ "

$

$ $8 $"

slide-16
SLIDE 16

١٦

15/03/2010 31

Colours

  • Before you start drawing you will want to set the

colour of the window (background) and the colour of the drawing (foreground).

  • The background and foreground can be

changed at anytime during the program.

Computer Graphics CSC476 15/03/2010 32

Colours

  • Colours are specified using a mixture of Red,

Green and Blue (RGB).

  • Each amount of colour is specified by a float

value between 0 and 1.

– 0 = none of this colour – 1 = all of this colour

  • A colour is specified as (R,G,B) e.g (1, 0.5, 0.2)
  • Can you guess what R, G and B are set to for

black and white?

Computer Graphics CSC476

slide-17
SLIDE 17

١٧

15/03/2010 33

Colours

  • White is:

– (1,1,1)

  • Black is:

– (0,0,0);

  • Did you think Black would be the addition of all

the colours and hence, (1,1,1) ????

15/03/2010 Computer Graphics CSC476 34

Black is not Black

  • Even in art (with paints and stuff) if you mix the

primary colours together you will NOT get black!!!

  • Mixing pixels of different colours of light is

different from mixing paint pigments.

  • Adding lights of colour together means adding

the light EM waves together.

slide-18
SLIDE 18

١٨

15/03/2010 35

Additive Colour Mixing

  • Each primary colour

provides about 1/3 of the wavelengths in the total spectrum.

15/03/2010 Computer Graphics CS510373 36

Setting the Background Colour

glClearColour(R, G, B, α);

glClearColour( glClearColour(1 1, ,0 0, ,0 0, ,0 0); ); glClearColour( glClearColour(0 0, ,1 1, ,0 0, ,0 0); ); glClearColour( glClearColour(0 0, ,0 0, ,1 1, ,0 0); );

slide-19
SLIDE 19

١٩

15/03/2010 Computer Graphics CS510373 37

Setting the Foreground Colour

glColor3f(R, G, B); glColor4f(R, G, B, α);

colourExample.exe

38

  • OpenGL #defines
  • Most constants are defined in the include files ,

! and ! – A "#$!%&'! ( should automatically include the others – Examples – )#*+ – ,-*,))+

  • include files also define OpenGL data types: .-,

.!/,….

slide-20
SLIDE 20

٢٠

39

  • Compilation on Windows
  • Visual C++

– Get glut.h, glut32.lib and glut32.dll from web – Create a console application – Add opengl32.lib, glut32.lib, glut32.lib to project settings (under link tab)

  • Borland C similar
  • Cygwin (linux under Windows)

– Can use gcc and similar makefile to linux – Use –lopengl32 –lglu32 –lglut32 flags

٤٠

1 Initialization

  • All the functions in GLUT have the prefix glut, and

those which perform some kind of initialization have the prefix glutInit.

  • The first thing you must do is call the function

glutInit. void glutInit(int *argc, char **argv); Parameters: argc argv are the standard ones for passing information about the command line ( not used here)

slide-21
SLIDE 21

٢١

٤١

  • 9$ 8%$$"
  • %8"" "

$ ," *$ ,768:< $ ,7'BB8 'CB:< ,&

  • 6 ( 6 "
  • ( 6 "

٤٢

Window size

  • Next we'll choose the window size. In order to do this

we use the function glutInitWindowSize.

* $ /978$:< $ /97>DB8D1B:<

Parameters:

  • width The width of the window
  • height the height of the window
  • The values for width and height are only a suggestion, so

avoid choosing negative values.

  • When the program is running the user can resize the window
slide-22
SLIDE 22

٢٢

٤٣

  • $
  • $

*$ 7$: ,&

  • (

) 8 "

56 &

  • E?FE?F( ?F"

"

  • EA5G( 6"

$

  • glutInitDisplayMode(unsigned

int mode) specifies whether to use an RGBA or colorindex color model. You can also specify whether you want a single or doublebuffered window. (If you're working in color index mode, you'll want to load certain colors into the color map; use glutSetColor() to do this.) Finally, you can use this routine to indicate that you want the window to have an associated depth, stencil, and/or accumulation buffer.

  • For example, if you want a window with double

buffering, the RGBA color model, and a depth buffer, you might call glutInitDisplayMode(GLUT_DOUBLE |GLUT_RGB | GLUT_DEPTH).

٤٤

slide-23
SLIDE 23

٢٣

٤٥

  • *8

$

  • $ 7H :<

,&

  • (

$ 7I4:< J K"L J KM"L J KM"L J KM$ "L *7$8HH$*: N $ 7O$8$*:<MM 9 ! MM $ 7E/A5PE?F:< MM9 $ /97>DB8D1B:< MM $ ,7'BB8'CB:< $ 744:< Q

46

  • A Simple Program

Generate a square on a solid background

slide-24
SLIDE 24

٢٤

47

  • simple.c

J KM$ "L * 7:N $ 7E?EF--5?EF:< $ F$7E,)A:< $ .627(B"C8(B"C:< $ .627(B"C8B"C:< $ .627B"C8B"C:< $ .627B"C8(B"C:< $ 57:< $ - 7:< Q 7$8HH$*:N $ 74 4:< $ -7 :< $ 7:< Q

48

  • Event Loop
  • Note that the program defines a display callback

function named 0123-1 – Every glut program must have a display callback – – The display callback is executed whenever The display callback is executed whenever OpenGL decides the display must be OpenGL decides the display must be refreshed refreshed, for example when the window is

  • pened

– The 0-# function ends with the program entering an event loop

slide-25
SLIDE 25

٢٥

٤٩

Making Pictures

  • Step One: Initialisation

– Setting up the graphics display.

1. Entire Screen is used (computer games, slide shows)

٥٠

Making Pictures

  • Step One: Initialisation

– Setting up the graphics display.

2. Windowbased (upside down coordinates) (when multiple windows are useful, paint packages, word processing, graphing)

slide-26
SLIDE 26

٢٦

٥١

Making Pictures

  • Step One: Initialisation

– Setting up the graphics display.

3. Windowbased (right side up coordinates) (an alternative more natural representation)

٥٢

Making Pictures

OpenGL – Inverted Windows !#4#.56*789:8;9+<%%%%%%%%%%% !#4#.5.2.#*=99:%=>9+<% !,-4#.5*?#%3#%4#.5@+< ! .*99:%7899:%8;99:%99+<

void $ 2(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top); Creates a matrix for projecting twodimensional coordinates onto the screen and multiplies the current projection matrix by it. The clipping region is a rectangle with the lowerleft corner at 7 8: and the upperright corner at 7$8:"

void $ 2( GLdouble left, GLdouble right, GLdouble bottom, GLdouble top)

slide-27
SLIDE 27

٢٧

٥٣

Making Pictures OpenGL – Inverted Windows

  • ٥٤

Making Pictures

OpenGL – “Rightside Up” Windows !#4#.56*789:8;9+<%%%%%%%%%%% !#4#.5.2.#*=99:%=>9+<% !,-4#.5*?#%3#%4#.5@+< ! .*99:%7899:%99:%8;99+<

slide-28
SLIDE 28

٢٨

٥٥

Making Pictures OpenGL – “Rightside Up” Windows

  • ٥٦

J K"L J KM"L J KM"L J KM$ "L *7*: N $ 7'"B8'"B8'"B8B"B:<MM !$ $ 37B"B8 B"B8B"B:<MM$ $ ,/971"B:<MM116 $ 67E,?R5A:< $ 7:< $ 27B8>DB8D1B8B:< Q * 7*: MM N MHH Q

/! $

slide-29
SLIDE 29

٢٩

٥٧

*7$8HH$*: N

$ 7O$8$*:<MM 9 ! MM $ 7E/A5PE?F:< MM9 $ /97>DB8D1B:< MM $ ,7'BB8'CB:<

$ 744:< 7:< MM 9

MM$ !

$ -7 :< $ 7:<

Q

*$ *$ 8 $6*" $ 8

٥٨

8% ! "

  • "

56 '& 3" * 7*:MMMM N $ 7E?EF--5?EF:< $ F$7E,A/:< $ .627'BB8CB:< $ .627'BB8'3B:< $ .627'CB8'3B:< $ 57:< $ - 7:< MM Q * *$ - $ -7*7H 7*7H :7*::< :7*::< ,&

  • (

" 6 $ - $ -7 :< :<

slide-30
SLIDE 30

٣٠

٥٩

60

  • simple.c revisited
  • In this version, we shall see the same output but

we have defined all the relevant state values through function calls using the default values

  • In particular, we set

– Colors – Viewing conditions – Window properties

slide-31
SLIDE 31

٣١

61

  • 0-#$

0-#$

"#$!%&'! ( #%0-#*#%-$:%$ -AA%-+ B !#*C-$:-+<% !#23-1D.*E)+<%%%%%% !#4#.56*>99:>99+<%%%% !#4#.5.2.#*9:9+<% !,-4#.5*@203@+<%%%%% !23-1!#$*0123-1+<%% #*+<% !D-#..3*+< F

$ " $ "

  • 62
  • GLUT functions
  • !#%allows application to get command line

arguments and initializes system

  • !#23-1D.%requests properties for the

window (the rendering context)

– RGB color – Single buffering – Properties logically ORed together

  • !4#.56%in pixels
  • !4#.5.2.#%from topleft corner of display
  • !,-4#.5%create window with title “simple”
  • !23-1!#$%display callback
  • !D-#..3%enter infinite event loop
slide-32
SLIDE 32

٣٢

>3 >3

  • !

!"# # $%%& $%%&

#$ #$

.%#*+ B ,-,..%*99:%99:%99:%=9+< ,..*=9:%=9:%=9+<% D-D.%*G,+<%%%% .-#1%*+<%%%% .*H=9:%=9:%H=9:%=9:%H=9:%=9+<%% F

  • '

' ( (

  • 64
  • OpenGL Camera
  • OpenGL places a camera at the origin in object

space pointing in the negative % direction

  • The default viewing volume

is a box centered at the

  • rigin with a side of

length 2

slide-33
SLIDE 33

٣٣

65

  • Orthographic Viewing

%& %&

In the default orthographic view, points are projected forward along the % axis onto the plane %& 66

  • Transformations and Viewing
  • In OpenGL, projection is carried out by a

projection matrix (transformation)

  • There is only one set of transformation functions

so we must set the matrix mode first

D-D.%*G,+

  • Transformation functions are incremental so we

start with an identity matrix and alter it with a projection matrix that gives the view volume

.-#1*+<%%%% .*H=9:%=9:%H=9:%=9:%H=9:%=9+<%%

slide-34
SLIDE 34

٣٤

67

  • Two and threedimensional viewing
  • In .*:% :%/..0:%.3:%

#-:%-+%the near near and far far distances are measured from from the camera

  • Twodimensional vertex commands place all

vertices in the plane z=0

  • If the application is in two dimensions, we can use

the function ! .*:% :/..0:.3+

  • In two dimensions, the view or clipping volume

becomes a clipping window

68

  • mydisplay.c

.%0123-1*+ B ,-*,))+<% )#*+<%%%%%%%% *H9>: H9>+<%%%%%%%% *H9>: 9>+<%%%%%%%% *9>: 9>+<%%%%%%%% *9>: H9>+<%%%% #*+< !2 *+<% F

slide-35
SLIDE 35

٣٥

٦٩

56 2& $ " */7*:N $ 7E?EF--5?EF:< $ F$7E?A5/:< $ .637(B"C8(B"C8B"B:< $ .637B"C8B"B8B"B:< $ .637B"B8B"C8B"B:< $ 57:< $ - 7:< Q $ $ $ -7/);

٧٠

slide-36
SLIDE 36

٣٦

٧١

The constant GL_POINTS is builtinto OpenGL. to draw other primitives, you replace GL_POINTS with GL_LINES, GL_POLYGON, etc. glColor3f() glVertex2i(…)

٧٢

. 7 6 8 : NMM $ 768 : $ F$7E,A/:< $ .62768 :< $ 57:< Q . 7 6 8 : MM$ $ NMM $ 768 : $ F$7E,A/:< $ .62768 :< $ 57:< Q

slide-37
SLIDE 37

٣٧

٧٣

$ ,/973"B: < MM 9 $ 3 6 3 6 $ 37'"B8 B"B8 B"B:< MM $ $ 37B"B8 '"B8 B"B:< MM $ $ $ 37B"B8 B"B8 '"B:< MM $ $ 37B"B8 B"B8 B"B:< MM $ ! $ 37'"B8 '"B8 '"B:< MM $

٧٤

J K"L J KM"L J KM"L J KM$ "L ,N & 68< Q< 7: N 7:S< Q *7*: N $ 7'"B8'"B8'"B8B"B:<MM!$ $ 37B"B8B"B8B"B:<MM$ $ ,/971"B:< MM116 $ 67E,?R5A:< $ 7:< $ 27B8>DB8B8D1B:< Q

56 3

X

slide-38
SLIDE 38

٣٨

٧٥

*768: NMM$768: $ F$7E,A/:< $ .62768 :< $ 57:< Q */!7*:MM N ,T3UVNN'B8'BQ8N3BB83BQ8N2BB83BBQQ<MM 6 V 73:<MMB8 '82W ! $ 7E?EF--5?EF:< , VT6U<MM 7'B8'B:73BB83B:72BB83BB: 7"68":<MM 7VB< K'BBB<##:MM'BBB N 6V73:< "6V7"6#T6U"6:M2< "V7"#T6U":M2< 7"68":< Q $ - 7:< MM Q

X

٧٦

*7$8HH$*: N $ 7O$8 $*:<MM 9 ! MM $ 7E/A5P E?F:< $ /97>DB8D1B:<MM9 $ ,7'BB8'CB:< MM $ 7I$/!4:< MM$ ! $ -7/!:< 7:< MM 9 $ 7:< Q

X

slide-39
SLIDE 39

٣٩

٧٧

X

٧٨

  • Sierpinski Gasket (2D)
  • Start with a triangle
  • Connect bisectors of sides and remove central

triangle

  • Repeat

56 3

slide-40
SLIDE 40

٤٠

٧٩

  • Example
  • Five subdivisions

٨٠

  • The gasket as a fractal
  • Consider the filled area (black) and the

perimeter (the length of all the lines around the filled triangles)

  • As we continue subdividing

– the area goes to zero – but the perimeter goes to infinity

  • This is not an ordinary geometric object

– It is neither two nor threedimensional

  • It is a fractal (fractional dimension) object
slide-41
SLIDE 41

٤١

٨١

  • Gasket Program

"#$!%&'! ( 'A%#-%-#%A' .-%IJIJKBBH=9: H9>;F:% B=9:%H9>;F:%B99:%==>FF< #%#< 'A%#!0/%.%$!2%232%A'

٨٢

  • Draw one triangle

.%-#*%.-%A-:%.-%A/:% .-%A$+ 'A%23-1%.#%-#%%A' B *-+<% */+<%% *$+< F

slide-42
SLIDE 42

٤٢

٨٣

  • Triangle Subdivision

.%-#*.-%A-:%.-%A/:%.-%A$:% #%0+ B 'A%-#%2!/2.#%!2#%%#!0/2%A' 3.#%9:%=:%< #%L< *0(9+ B .*LK9<%L&<%LMM+%9ILJK*-ILJM/ILJ+'< .*LK9<%L&<%LMM+%=ILJK*-ILJM$ILJ+'< .*LK9<%L&<%LMM+%ILJK*/ILJM$ILJ+'<

  • #*-:%9:%=:%0H=+<
  • #*$:%=:%:%0H=+<
  • #*/:%:%9:%0H=+<

F 2*-#*-:/:$++< 'A%-5%-#%-%#%.%$!2.#%A' F

٨٤

  • display and init Functions

.%23-1*+ B ,-*,))+< )#*+<

  • #*I9J:%I=J:%IJ:%#+<

#*+< !2 *+< F .%01#*+ B D-D.*G,+< .-#1*+< ! .*H9:%9:%H9:%9+< D-D.*D4+< ,-,..%*=9:%=9:%=9:=9+ ,..*99:99:99+< F

slide-43
SLIDE 43

٤٣

٨٥

  • main Function

#%0-#*#%-$:%$ -%AA-+ B #K8< !#*C-$:%-+< !#23-1D.*E)+< !#4#.56*>99:%>99+< !,-4#.5*?%-2N@+< !23-1!#$*23-1+< 01#*+< !D-#..3*+< F

٨٦

  • Efficiency Note

By having the )# and # in the display callback rather than in the function -# and using rather than %in )#, we call )# and # only once for the entire gasket rather than once for each triangle

slide-44
SLIDE 44

٤٤

15/03/2010 87

  • $
  • Sometimes you may want to print out a plot of

some data when the data ranges are unknown.

  • However, you want them to appear in the window

presented in a visually pleasing manner.

15/03/2010 88

Fitting it in

  • E.g. Let’s plot
  • Plotted with screen

coordinates of 640 x 480 we will get:

'

  • (
  • π

−

%--%3.%2%#.%..% %5%$-#O%2% PP

slide-45
SLIDE 45

٤٥

15/03/2010 89

Fitting it in

How do we MAGNIFY the data?

$ %.!%Q $ %.!%Q $ %.!% $ %.!%

15/03/2010 90

Fitting it in

  • The X coordinates of the window range over 640

values (from 0 to 639).

  • The X values for the data range from 0 to 4.
  • We need to modify the data values so that data

point 0 maps to window coordinate 0 and data point 4 maps to window coordinate 640.

slide-46
SLIDE 46

٤٦

15/03/2010 91

Fitting it in

9 9 8 8

'

  • (
  • π

−

15/03/2010 92

Fitting it in

  • In essence we want 4 to be plotted at 640.
  • 4 * A = 640;
  • A = 160; ….. or for all cases

A = SCREENWIDTH/xmax

  • Therefore, x’ = x * A

…. if x ranges from 0 .. xmax

slide-47
SLIDE 47

٤٧

15/03/2010 93

Fitting it in

  • If x ranges from say 1 to 4 then we will want to

stretch a range of 3 out instead of 4, therefore: A = SCREENWIDTH/(xmax – xmin)

  • The same applies for the y coordinates:

B = ,RR%/(ymaxymin)

15/03/2010 94

Fitting it in

  • But what is ymin and ymax ??
  • We know x because it is the range we set… but

y is not known unless you calculate y for each x and record the minimum and maximum values.

slide-48
SLIDE 48

٤٨

15/03/2010 95

Moving it around

  • After scaling the plot

would now look like this:

%3.% -2% /#%2$-% /!%.2%#.% 20%.%% #% % 5#.5PP

15/03/2010 96

Moving it around

  • Or…

* *%H 0#+%A%,4R'*0-H0#+:% *3.5*S=;:%H+A$.2*A=8A++A%,RR'*10-H 10#+%M%-/2*10#++<

  • Or in the format (as per the textbook on page 51)

x’ = Ax + C and y’ = By + D

fabs(x) : Calculates the absolute value of the floatingpoint argument.

slide-49
SLIDE 49

٤٩

15/03/2010 97

Moving it around

x’ = Ax + B and y’ = Cy + D

%K%,4R'*0-H0#+ )%K%H0#A ,%K%,RR'*10-H10#+ %K%E10#EA,

%-#%,%-%2$--2 )%-#%%-%-#2-.2

15/03/2010 98

Moving it around

slide-50
SLIDE 50

٥٠

٩٩

J K"L J K"L J KM"L J KM"L J KM$ "L V>DB< X$VD1B< 8F88< *7*: N $ 7'"B8'"B8'"B8B"B:<MM!$ $ 37B"B8B"B8B"B:<MM$ $ ,/97D"B:< MMDD6 $ 67E,?R5A:< $ 7:< $ 27B"B87 :8B"B87 :X$:< VMD"B< FVB"B< VVX$M2"B< Q

56 D

VMD"B<MM6BYD FVB"B<MMVB VVX$M2"B< MM

  • 'Y('

MM

  • VX$M2"B

١٠٠

* 7*:MM N $ 7E?EF--5?EF:< $ F$7E,A/:< 7 6VB<6KD"B<6#VB"BBC: N V67(6:H72H3"'D'C02>CH6:< $ .627H6#F8H#:< Q $ 57:< $ - 7:< Q

VMD"B<MM6BYD FVB"B<MMVB VVX$M2"B<

MM

  • 'Y('

MM

  • VX$M2"B
slide-51
SLIDE 51

٥١

١٠١

*7$8HH$*: N MM 9 ! $ 7O$8$*:< MM $ 7E/A5PE?F:< MM9 $ /97>DB8D1B:< MM $ ,7'BB8'CB:< MM $ 74 4:< MM$ ! $ -7 :< 7:< MM 9 $ 7:< Q

١٠٢

slide-52
SLIDE 52

٥٢

١٠٣

Making Line Drawings

  • EA5/$$ F$7:8

*" *76'8'8 628 2: N $ F$7EA5/:< $ .6276'8 ':< $ .627628 2:< $ 57:< Q

/ "

56 C

١٠٤

If more than two vertices are specified between glBegin(GL_LINES) and glEnd (), they are taken in pairs, and a separate line is drawn between each pair. would be drawn using the following commands: glBegin(GL_LINES) ; glVertex2i(10, 20) ; MM9 glVertex2i(40, 20) ; glVertex2i(20, 10) ; MM* glVertex2i(20, 40) ;

MM $ .627:

glEnd() ; gIFlush() ;

  • A line's color is set in the same way as that for points,

using $ 37:"

  • Thick of lines are set by $7D"B:. The default

thickness is 1.0.

slide-53
SLIDE 53

٥٣

١٠٥ ١٠٦

#include <windows.h> #include <math.h> #include <GL/GL.h> #include <GL/GLU.h> #include <GL/glut.h> const int screenWidth = 640; const int screenHeight = 480; GLdouble A,B,C,D; *7*: N MM!$ $ 7'"B8'"B8'"B8B"B:< MM$ $ 37B"B8B"B8B"B:< MM D6 $ 7D"B:< $ 67E,?R5A:< $ 7:< $ 27B"B87 :8B"B87 :X$:< Q

slide-54
SLIDE 54

٥٤

١٠٧

void myDisplay(void) MM

  • {

glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_LINES) ; glVertex2i(100, 200) ; // first horizontal line glVertex2i(400, 200) ; glVertex2i(200, 100) ; // first vertical line glVertex2i(200, 400) ; glVertex2i(100, 300) ; // Second horizontal line glVertex2i(400, 300) ; glVertex2i(300, 100) ; // Second vertical line glVertex2i(300, 400) ; glEnd() ; glFlush() ; // send all output to display }

١٠٨

void main (int argc, char ** argv) { glutInit(&argc, argv); // initialize the toolkit // set the display mode glutInitDisplayMode(GLUT_SINGLE| GLUT_RGB); glutInitWindowSize(640,480); // set window size

// open the screen window

glutInitWindowPosition(100,150); glutCreateWindow(“Lines Plot"); // register callback functions glutDisplayFunc(myDisplay); myInit(); // additional initializtons as necessary glutMainLoop(); }

slide-55
SLIDE 55

٥٥

١٠٩

$, , $

, $@" 8W V768:8'V76'8':8"""8V768:" 8 4 4$ *88$F$7EA5E/?,:$ 57:"

  • 6 8

$ F$7EA5E/?,:<MM $ .6272B8'B:< $ .627CB8'B:< $ .6272B81B:< $ .627CB81B:< $ 57:< $- 7:<

$8 EA5E/?,EA5E,

١١٠

  • , $ $ EA5E,

"

  • $8

$F$ 7E,)A:" 5G,52"3"'$ $

  • "

$ $ $ 8 $ -$ 2"'> $ @" $ 8 " W 8 F8 8 "

slide-56
SLIDE 56

٥٦

١١١ ١١٢

$ $ $" * 8 "

slide-57
SLIDE 57

٥٧

١١٣

Parameterizing figures

  • Figure 2.23 shows a simple house consisting of a few
  • polylines. It can be drawn using code shown partially in

the following

١١٤

*X7*: N $ 7E?EF--5?EF:< $ F$7EA5E,:< $ .627DB8DB:<MM $ .627DB80B:< $ .627;B8'2B:< $ .627'BB80B:< $ .627'BB8DB:< $ 57:< $ F$7EA5E/?,:< $ .627CB8'BB:<MM $ .627CB8'2B:< $ .627>B8'2B:< $ .627>B8''B:< $ 57:<

slide-58
SLIDE 58

٥٨

١١٥

$ F$7EA5E/?,:< $ .627CC8DB:<MM $ .627CC81B:< $ .627;B81B:< $ .627;B8DB:< $ 57:< $ F$7EA5E,:< $ .6271B8;C:<MM $ .6271B81C:< $ .6270B81C:< $ .6270B8;C:< $ 57:< Q

١١٦

  • * 6 "

8 X 7:

  • 9

9 "

slide-59
SLIDE 59

٥٩

١١٧

  • ?5

2"2> A "village"

  • f

houses drawn usingparameterizedHouse().

  • This routine may be used to draw a "village," as shown in

Figure 2.26, by making successive calls to parameterizedHouse () with different parameter values. (How is a house "flipped" upside down? Can all of the houses in the figure be drawn using the routine given?)

١١٨

*9X7,!88$: MM!<9$* MM$ N $ 7E?EF--5?EF:< $ F$7EA5E,:< $ .627!"68!":< MM $ .627!"6#M28!"( 3H$M1:< $ .627!"6#M28!"( $:< $ .627!"6( M28!"( $:< $ .627!"6( M28!"( 3H$M1:< $ 57:< $ F$7EA5E/?,:< MM $ 57:< $ F$7EA5E/?,:< MM $ 57:< $ F$7EA5E,:< MM $ 57:< $ - 7:< Q

! $" $88 6"

slide-60
SLIDE 60

٦٠

١١٩

J K"L J K"L J KM"L J KM"L J KM$ "L 7: N 7:S< Q ,N & 68< Q< V>DB< X$VD1B<

١٢٠

//<<<<<<<<<<<<<<<<<<<< myInit >>>>>>>>>>>>>>>>>> void myInit(void) { glClearColor(1.0,1.0,1.0,0.0); // set white background color glColor3f(0.0f, 0.0f, 0.0f); // set drawing color glLineWidth(1.0); // the line width is 4 pixels glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0,(GLdouble) screenWidth,0.0, (GLdouble) screenHeight); }

slide-61
SLIDE 61

٦١

١٢١

//<<<<< parameterizedHouse >>>>>>>>>>>>>> void parameterizedHouse(GLintPoint peak, GLint width, GLint height)

// the top of house is at the peak; the size of house is given // by the height and width

{ // the code written here } //<<<<<<<<<< myDisplay >>>>>>>> void myDisplay(void) { GLintPoint point; int width, height; // make successive calls to parameterizedHouse } //<<<<<<< main >>>>>>>>> void main (int argc, char ** argv) { // code written here }

١٢٢

5G,52"3"DF $

  • Some applications compute and store the vertices of a

polyline in a list. We have to add to our growing toolbox

  • f routines a function that accepts the list as a parameter

and draws the corresponding polyline.

  • The list might be in the form of an array or a linked list.
  • Here we use the array form and define the class to hold

it in

class GLintPointArray { const int MAX_NUM = 100; public: int num = 100; GLintPoint pt [MAX_NUM]; } pt is an array of GLintPoint num is the actual number of elements in the array

slide-62
SLIDE 62

٦٢

١٢٣

*, 7, 8 : N $F$7 EA5E,&EA5E/?,:< 7VB< K " num<##: $ .627 "TU"68 "TU":< $ 57:< $- 7:< Q

MMpt is an array of GLintPoint // num is the actual number of elements in the array

  • ! &

98EA5E,

  • *6

١٢٤

$$*7: 7:

  • We can summarize the effects of the two functions as

follows:

  • moveto (x, y): set CP to (x, y)

CP

  • lineto (x, y): draw a line from CP to (x, y), and then

update CP to (x, y) A line from (x1, y1) to (x2, y2) is therefore drawn using the two calls moveto (x1, y1) and lineto (x2 , y2). A polyline based on the list of points, so it is easily drawn using the following code: moveto(x[0], y [0]); for ( int i =1; i < n; i++) lineto ( x[i], y[i]);

slide-63
SLIDE 63

٦٣

١٢٥

,,< // global current position //«««««« moveto »»»»»»» **768: N ,"6V 6<,"V<MM,: Q //«««««« lineTo >»»»»»»»» * 768: N $ F$7EA5/:< // draw the line $ .627,"68 ,":< $ .62768 :< $ 57:< $- 7:< ,"6V 6<,"V < // update the CP Q

*7: 7: "

15/03/2010 126

Rectangles

  • A special type of polygon with four sides and

with aligned with the coordinate axis is called an $$ .

slide-64
SLIDE 64

٦٤

15/03/2010 127

Aligned Rectangles

$*#%=:%#%1=:%#%:%#%1+<

* *= =:1 :1= =+ + * * :1 :1 + +

15/03/2010 128

Aligned Rectangles

$*#%=:%#%1=:%#%:%#%1+<

$ 8 $ "

slide-65
SLIDE 65

٦٥

١٢٩

$ $?$

A special case of a polygon is the $$ 8 so called because its sides are aligned with the coordinate axes. You just need two points to draw it. // white background glClearColor(l.0,1.0,1.0,0.0); // clear window glClear(GL_COLOR_BUFFER_BIT); // // filled color is bright gray glColor3f(0.6,0.6,0.6); // draw the rectangle glRecti(20,20,100,70); // filled color is dark gray glColor3f(0.2,0.2,0.2); // draw the rectangle glRecti(70, 50, 150, 130) ; glFlush();

١٣٠

,7:4 4 $$ $

$ $ *- 78 88X$: MM$ X$$ N 7VB<K<##: N 6'V7:<MM 'V7X$:< 62V7:<MM !9 2V7X$:< *V7'B:M'B"BMM* 8$B' $ 37 *8 *8 *:<MM$ * $ $?76'8'86282:<MM$ Q $ - 7:< Q

slide-66
SLIDE 66

٦٦

١٣١

*F79: MM$ X$$ N *'V7'B:M'B"B< MM* 8$B' *2V7'B:M'B"B< MM* 8 $B' 7VB<K1<##: 7@VB<@K1<@##: N 6'VH9<MM ' 'V@H9< 62VH9#9<MM 2 2V@H9#9< 77#@:S2VVB:MM#@* $ 37 *'8 *'8 *':< $ 37 *28 *28 *2:< $ ?76'8'86282:<MM$ Q $ - 7:< Q

١٣٢

slide-67
SLIDE 67

٦٧

١٣٣

MMKKKKKKKKKKKKKKKLLLLLLLLLLLLLLLLLLLLLLLLLL *7,8: MM$ X$$ N 6BV"6<MM BV"< $ F$7EA5E,:< $ .6276B(8B:< $ .6276B8B(:< $ .6276B#8B:< $ .6276B8B#:< $ 57:< $ - 7:< Q MMKKKKKKKKKKKKKKK LLLLLLLLLLLLLLLLLLLLLLLLLL * 7*: MM N ,,< 9VDB< ,"6V M2< ,"VX$M2< $ 7E?EF--5?EF:< 7,89:< $ - 7:< MM

} ١٣٤

slide-68
SLIDE 68

٦٨

١٣٥

*6 $

based on vertices use the usual list of vertices, but place them between a glBegin(GL_POLYGON) and a glEnd (): $ F$7E,)A:< glVertex2f(xo, yo); glVertex2f(x1, y1); . . glVertex2f(xn, yn); $ 57:< $ " 7/2"C:8

١٣٦

,*

E?A5/E?A5E/?,E?A5E-A

  • E?A5/& takes the listed vertices three at a time and draws a separate

triangle for each.

  • E?A5E/?,: draws a series of triangles based on triplets of vertices:

vo, v1, v2,, then v1, v2, v3, then v2, v3, v4., etc. (in an order such that all triangles are "traversed" in the same way, e.g., counterclockwise).

  • E?A5E-A& draws a series of connected triangles based on triplets of

vertices: vo, v1, v2, then vo, v2, v3, then vo, v3, v4., etc.

slide-69
SLIDE 69

٦٩

١٣٧

  • EZ/: takes the vertices four at a time and draws a separate

quadrilateral for each.

  • EZE/?,: draws a series of quadrilaterals based on

foursomes of vertices: first vo, v1, v2,v3, then v2, v3 , v4, v5, then v4, v5, v6, v7, .,etc. (in an order such that all quadrilaterals are "traversed" in the same way, e.g., counterclockwise).

EZ/EZE/?,

15/03/2010 Computer Graphics CS510373 138

Anatomy of GLUT

  • !

"#

  • !$
slide-70
SLIDE 70

٧٠

15/03/2010 Computer Graphics CS510373 139

Anatomy of GLUT

  • !

"#

  • !$

!

%*N1%KK%TO%EE%N1%KK%TO+ B !!$#*+< F 2%*N1%KK%T5O%EE%N1%KK%T4O+ B !2 -34#.5*789:8;9+< F

15/03/2010 Computer Graphics CS510373 140

Anatomy of GLUT

.%01U1/.-*!#2#%$ -%N1:%#%0.!2Q:%#%0.!2+

Runs whenever a keyboard event occurs (e.g. user presses a key)

.%01D.!2*#%/!.#:%#%2-:%#%:%#%1+

Runs whenever a mouse event occurs (e.g. user presses a mouse button, mouse moves)

.%0123-1*.+

Runs whenever the system determines that the window must be redrawn (e.g. window comes to the front, window has been moved)

.%012 -3*.+

Runs whenever a window changes size