Drawing 2D Graphics v2

  GRAFIKA KOMPUTER

  ~ M. Ali Fauzi Drawing D Graphics

  2

  VIEWPORT TRANSFORMATION Recall :Coordinate System

  glutReshapeFunc(reshape); void reshape(int w, int h) { glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity();

  World Coordinate System

World Coordinate System

  1

• ^-1

  ^{2 -2}

^{1 2}

  

World Coordinate System

~ The representation of an

object is measured in some

physical or abstract units .

  ~ Space in which the object

World Window

  1

• ^-1

  ^{2 -2}

^{1 2}

World Window

  1

• ^-1

  ^{2 -2}

^{1 2} World Window ~ Rectangle defining the part of the world we wish to display .

  

~ Area that can be seen (what

  World Window ~ Known as clipping-area void reshape(int w, int h) { glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity();

  The Default

  The default OpenGL 2D clipping-area is an orthographic view with x and y in the range of

• 1.0
World Window ~ Reset to the default void reshape(int w, int h) { glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity();

Viewport

  _Screen Screen _{window Window Interface} Viewport

  

Screen Coordinate System

~ Space in which the image is displayed ~ For example : x

  800 600 pixels Interface Window

~ Visual representation of the

screen coordinate system for

windowed displays glutInitWindowSize(320, 320);

  Vewport

~ A rectangle on the interface

window defining where the

image will appear ,

~ The default is the entire

  Viewport

  Interface Window

~ Set the viewport to the

entire screen / window void reshape(int w, int h) { glViewport(0,0,(GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION);

  Interface Window

~ Set the viewport to half of

the screen / window glutInitWindowSize(320, 320); glutInitWindowPosition(50, 50);

Viewport

  _Screen Screen _{window Window Interface} Viewport

  Viewport

  Viewport Transformation

~ The Process called viewport

transformation

  THE ASPECT RATIO PROBLEM

The distortion

  _Screen Screen _{window Window Interface} Viewport

The distortion

  _Screen Screen _{window Window Interface} Viewport

  Ratio

~ R = Aspect Ratio of World

  Ratio

Keeping the Ratio

  _Screen Screen _{window Window Interface} Viewport

Keeping the Ratio

  _Screen Screen _{window Window Interface} Viewport

  The Startegy

~ To avoid distortion, we must

change the size of the world

window accordingly.

  For that, we assume that the ~ The Startegy ~ Default glOrtho2D (-L, L, -L, L); For example L=1, ~ glOrtho2D (-1, 1, -1, 1);

  The Startegy if (w <= h) glOrtho2D(-L, L, -L * h/w, L * h/w); else glOrtho2D(-L * w/h, L * w/h, -L, L); if (w <= h) glOrtho2D(-1, 1, -1 * h/w, 1 * h/w);

  The Startegy

The Startegy

  

~ A possible solution is to change

the world window whenever the

viewport of the interface

window were changed.

  

~ So, the callback Glvoid

  _{ void reshape(GLsizei width, GLsizei height) _{if (height == 0) height = 1; glMatrixMode(GL_PROJECTION); glViewport(0, 0, width, height);} GLfloat aspect = (GLfloat)width/(GLfloat)height; _{{ if (width >= height)} glLoadIdentity(); _{} 1.0);} gluOrtho2D(-1.0 * aspect, 1.0 * aspect, -1.0, _{ else _{gluOrtho2D(-1.0, 1.0, -1.0 / aspect, 1.0 /}

  _{width and height */ first appears and whenever the window is re-sized with its new} /* Handler for window re-size event. Called back when the window _{ void reshape(GLsizei width, GLsizei height) _{// GLsizei for non-negative integer // Compute aspect ratio of GLfloat aspect = (GLfloat)width / (GLfloat)height; if (height == 0) height = 1; // To prevent divide by 0} the new window

  // Set the viewport to cover the new window _{// Set the aspect ratio of the clipping area to match the glViewport(0, 0, width, height); glLoadIdentity(); // Reset the projection matrix glMatrixMode(GL_PROJECTION);} viewport _{ if (width >= height) _{// aspect >= 1, set the height from -1 to 1, with larger }}

_{gluOrtho2D(-1.0 * aspect, 1.0 * aspect, -1.0, 1.0);}

width

  D

Transformation

  

Is The geometrical changes

of an object from a current

state to modified state.

Why Needed?

  

To manipulate the initially

created object and to

display the modified object

without having to redraw it

  

Transformation Pipeline

Vertex

_{Modelview Projection Perspective Viewport}

_{Matrix Matrix Division Transformation Coordinates Object Coordinates Eye Coordinates Clip Coordinates} Normalized _{device Coordinates Window glRotate() glTranslate()} GL_MODELVIEW mode _{gluOrtho2D() glOrtho() GL_PROJECTION mode glViewport()}

  Types of Transformation ~ Modeling.

  

In 3D graphics, handles moving

objects around the scene .

  ~ Viewing.

  In

  3D graphics, specifies the Types of Transformation ~ Projection.

  

Defines the viewing volume and

clipping planes from eye

coordinate to clip coordinates.

  Types of Transformation ~ Viewport.

  

Maps the projection of the scene

into the rendering window .

  ~ Modelview.

  

Combination of the viewing and

  Transformation Matrix

Transformations in OpenGL

using matrix concept

Matrix Modes

  ~ ModelView Matrix (GL_MODELVIEW) These concern model-related operations such as translation, rotation, and scaling, as well as

  Matrix Modes ~ Projection Matrix (GL_PROJECTION)

  Setup camera projection and cliiping-area

  

Transformation Pipeline

Vertex

_{Modelview Projection Perspective Viewport}

_{Matrix Matrix Division Transformation Coordinates Object Coordinates Eye Coordinates Clip Coordinates} Normalized _{device Coordinates Window glRotate() glTranslate()} GL_MODELVIEW mode _{gluOrtho2D() glOrtho() GL_PROJECTION mode glViewport()}

Why do we use matrix?

  ~ More convenient organization of data.

  ~ More efficient processing ~ Enable the combination of

Matrix addition and subtraction

  a _b ^c _d  ^{= a  c} _{b  d}

Matrix addition and subtraction

  5

  1

• =

  6

• 3

Matrix addition and subtraction

  6

  5

  1

• =

  3

  6

• 3
Matrix addition and subtraction

  1

  3

  1

• =
• 1

  4

• 3
Matrix addition and subtraction

  3

  1

  1

• =
• 1
• 3
Matrix Multiplication

  a b _{c d} ^{e f} _{g h} . ^{= a.e + b.g a.f + b.h} _{c.e + d.g c.f + d.h} Matrix Multiplication

  a b ^{e f} _{g h} . ^{= a.e + b.g a.f + b.h}

Matrix Multiplication

  1

  2

  1

  2

  3

  1 . ⁼

Matrix Multiplication

  1

  2

  1

  2

  3

  1 . ⁼

  6

  6

Matrix Multiplication

  1

  2

  1

  2

  3

  1 . ⁼

Matrix Multiplication

  1

  2

  1

  2

  3

  1 . ^{= Tak boleh}

Matrix Types

  _{e f f} e

Row Vector Column Vector Matrix Multiplication

  a b _{c d} ^e _f . ⁼ e f ^{a b} _{c d} . ⁼ e f ^{a c} _{b d} ⁼ Matrix Multiplication

  a b _{c d} ^e _f . ^{= a.e + b.f} _{c.e + d.f} e f ^{a b} _{c d} . ^{= a.e + c.f b.e + d.f} e f ^{a c} _{b d} ^{= a.e + b.f c.e + d.f} Matrix Math We’ll use the column-vector representation for a point.

  Matrix Math Which implies that we use pre-

  

multiplication of the transformation

• – it appears before the point to be transformed in the equation.

  THE TRANSFORMATION Translation A translation moves all points in an object along the same straight-line

  path to new positions.

  Translation The path is represented by a vector, called the translation or shift vector .

  P' = P + T _{t y’} x’ x _{= + y t y x} Translation

  x’ _y’ ^x _y ^t _{x t y = +} (2, 2) t ^x = 6 t ^y =4 ? x’ _y’

  2

  2

  6

  4 ^{= +} Translation

  x’ _y’ ^x _y ^t _{x t y = +} (2, 2) t ^x = 6 t ^y =4 ?

  8

  6

  2

  2

  6

  4 ^{= +}

Rotation

  A rotation repositions all points in an object along a circular path in the plane centered at the pivot point .

   ^P P’ p ' _x ⁼ p _x ^cos

  Rotation

  

• – p
_y ^sin  p ' _y ⁼ p _x ^sin  ⁺ p _y ^cos  Rotation The transformation using Rotation

  Matrix P' = R . P

  Rotation The transformation using Rotation

  Matrix P' = R . P

  Rotation Find the transformed point, P’, caused by rotating P= ( ) about the

  5, 1 .

  origin through an angle of

  90 Rotation

Scaling

  Scaling changes the size of an object and involves two scale factors, Sx and Sy for the x- and y- coordinates respectively.

  Scaling Scales are about the origin.

  P’

  p' s p _{x x x}

• • =

  p' s p _{y y y P}

• • =
Scaling The transformation using Scale

  Matrix P' = S • P

  Scaling The transformation using Scale

  Matrix P' = S • P

  Scaling If the scale factors are in between 0

  

  and 1 the points will be moved

  

closer to the origin the object will be smaller . Scaling P(2, 5), Sx = 0.5, Sy = 0.5 Find P’ ?

  p' s p _{x x x P(2, 5)}

• • =

  p' s p _{y y y}

• • =
Scaling If the scale factors are larger than 1

  

  the points will be moved away

  

from the origin the object will be larger . Scaling P(2, 5), Sx = 2, Sy = 2 Find P’ ?

  P’

  p' s p _{x x x P(2, 5)}

• • =

  p' s p _{y y y}

• • =
Scaling If the scale factors are not the same,

  

  Sx  Sy differential scaling Change in size and shape

  Scaling If the scale factors are the same,

  

  Sx = Sy uniform scaling

  Scaling P(1, 3), Sx = 2, Sy = 5

  

  square rectangle

  P’

  p' s p _{x x x}

• • =

  p' s p _{y y y}

• • =
Scaling What does scaling by do?

  1 Sx=1 , Sy=1 Scaling What does scaling by do?

  1 

  Sx=1 , Sy=1 Nothing changed What is that matrix called?

  Scaling What does scaling by do?

  1 

  Sx=1 , Sy=1 Nothing changed What is that matrix called?

  Identity Matrix

Scaling

  What does scaling by a negative value do? Sx=-2 , Sy=-2

  Scaling What does scaling by a negative value do?

  

  Sx=-2 , Sy=-2 Moved to Different

  Quadran

  COMBINING TRANSFORMATIONS Combining Transf For example, we want to rotate/scale then we want to do translation

  P' = M • P + A Combining Transf For example, we want to translate, then we want to rotate and sclae

  P' = S • R • (A + P) Combining Transf P (Px,Py)=( ) : Translate( ) ->

  4 , 6 6 , -3

  Rotation( ) -> Scaling ( )

  60 0.5 , 2.0 ˚

  P' = S • R • (A + P) Combining Transf

  Combining Transf To combine multiple transformations, we must explicitly compute each transformed point.

  P' = S • R • (A + P) Combining Transf

  nicer if we could use the same

  It’d be matrix operation all the time.

  combine

  But we’d have to

  multiplication and addition into a single operation.

  Combining Transf

  one

  Let’s move our problem into

  dimension higher

  HOMOGENOUS COORDINATES Homogenous Coord Let point (x, y) in 2D be represented by point (x, y, 1) in the new space.

  y ^y _w x _

Homogenous Coord

  ~ Scaling our new point by any value a puts us somewhere along a particular line: (ax, ay, a). ~ A point in 2D can be represented in many ways in the new space.

  Homogenous Coord We can always map back to the original 2D point by dividing by the last coordinate

   (15, 6, 3) (5, 2).

   (60, 40, 10) ?. Homogenous Coord The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name –

  homogeneous coordinates.

Homogenous Coord

  With homogeneous coordinates, we can combine multiplication and addition into a single operation.

  Homogenous Coord Point in column-vector:

  Homogenous Coord Translation:

  x’ _y’ ^x _y ^t _{x t y = +} Homogenous Coord Rotation:

  Homogenous Coord Scaling:

  Homogenous Coord P (Px,Py)=( ) : Translate( ) ->

  4 , 6 6 , -3

  Rotation( ) -> Scaling ( )

  60 0.5 , 2.0 ˚ Homogenous Coord We can represent any sequence of transformations as a single matrix

  Homogenous Coord Does the order of operations matter ?

  Homogenous Coord Yes, the order does matter ! _{1. Translate}

  ^{1. Rotate 2. Translate}

Homogenous Coord

  Yes, the order does matter ! A . B = B . A?

Homogenous Coord

  Yes, the order does matter ! A . B  B . A

Homogenous Coord

  Yes, the order does matter ! (A.B).C = A.(B.C)?

  Homogenous Coord Yes, the order does matter ! (A.B).C = A.(B.C)

• =
• =

   

   

   

    

    

        

  dhl cfl dgj cej dhk cfk dgi cei ^{bhl afl bgj aej bhk afk bgi aei l k j i dh cf dg ce bh af bg ae}

    

    

        

    

    

         _{l k} ^{j i} _{h g} ^{f e} _{d c} ^{b a} Composite Transformation Matrix

• • Arrange the transformation matrices in order from

  right to left.
• General Pivot- Point Rota
• Operation :-

  1. Translate (pivot point is moved to origin)

  2. Rotate about origin

  3. Translate (pivot point is returned to original _{) T(pivot) • R() • T(–pivot)} position Composite Transformation Matrix

  T(pivot) _{1 0 t x 1 0 -t x} • R() • T(–pivot) _{cos 0 1 t y 0 1 -t y sin  cos 0}  -sin 0 _{1 0 t x 0 0 1 0 0 1} . . _{0 0 1} cos x cos y sin _{0 1 t y sin  cos -t x sin  - t y cos }  -sin -t + t  _{0 0 1 cos x cos y sin x} . _{0 0 1 sin  cos -t x sin  - t y cos  + t y 0 0}  -sin -t + t  + t ₁

  Reflection: x-axis y-axis

   ^{ } _ ^{   } _ ^{  1 1 1}  ^{ } _ ^{   } _ ^{ 1 1 1} Other Transf Reflection: origin line x=y

   ^{ } _ ^{   } _ ^{   1 1 1   } _ ^{   } _ ^{ 1 1 1} Other Transf Shearing

• Shearing-x
• Shearing-y
^{Sebelum Sesudah Sebelum Sesudah}