Chapter 7 Two-Dimensional Geometric Transformationsshengbin/course/cg/lecture... · Transformation...

Preview:

Citation preview

Chapter 7Two-Dimensional Geometric

Transformations

Computer Graphics

Chapter 7Two-Dimensional Geometric Transformations

Part IbullBasic 2D Geometric TransformationsbullMatrix Representations and Homogeneous Coordinatesbull2D Composite Transformations

2

Transformation A transformation is an operation that transforms or changes a shape Linear and affine (仿射) transformations are central to computer

graphics Linear a mapping that preserves linear combinations in a vector space

including rotation scaling (缩放) shearing(剪切)hellip Affine any transformation that preserves collinearity (共綫性 ie all points

lying on a line initially still lie on a line after transformation) and ratios of distances (eg the midpoint of a line segment remains the midpoint after transformation) Composed of linear transformations and a translation (or ldquoshiftrdquo)

Important features Straight lines to straight lines Preserve parallelism Implemented by matrix multiplication

3

Several basic ways you can change a shape

Translation (moving it)

Rotation (turning it round)

Scaling (making it bigger or smaller)

Shear (changing the main shape)

Reflection (mirroring the shape about axis)

Transformation

Translate

Rotate

Scale

Shear

Reflect

4

2D Translation A translation moves an object into a different position in a

scene without changing its shape

This is achieved by adding an offsettranslation vectorto the original coordinates

In vector notation

x

y

PP

=

P

x xx

y yy

P tPP tP

= +

x

y

tt

=

T

Original points Transformed points

Translate by T

T

5

Eg translate the point (12) using translation vector (56)

The new point position is (6 8)

To translate line translate its endpoints To translate polygon translate its vertices

2D Translation

=

++

=

+

86

6251

65

21

6

2D Translation The routine of the transformation operation

void translatePolygon (wcPt2D verts GLint nVerts GLfloat tx GLfloat ty)

GLint k

for (k = 0 k lt nVerts k++) verts [k]x = verts [k]x + txverts [k]y = verts [k]y + ty

glBegin (GL_POLYGON)for (k = 0 k lt nVerts k++)

glVertex2f (verts [k]x verts [k]y)glEnd ()

class wcPt2D public

GLfloat x y

7

2D Rotation To rotate points through the specified rotation angle (θ) and

rotation axis (Z - axis) Rotation axis is perpendicular to XY plane and they intersect at

point (xr yr) (pivot point) θ is positive - a counterclockwise rotation

θ is negative - a clockwise rotation

Figure 7-3 Rotationof an object through Angle θ about the pivot point (xr yr)

Figure 7-4 Rotation of a point from position (x y) to position (x y) through an angle θrelative to the coord origin

Figure 7-5 Rotating a point from position (x y) to position (x y) through an angle θabout rotation point (xr yr)

8

2D Rotation - derivation

cos ( ) cos cos sin sin θ φ θ φ θ φ+ = minus( ) ( ) ( ) ( )sin( ) sin cos cos sin θ φ θ φ θ φ+ = +( ) ( ) ( ) ( )

P

Q

RPX

PYφ

θ

[1][2]

[3][4]

[1] )( )( )( )( φθφθ sinsincoscos RRxQ minus=

Substituting [3] and [4] into [1] )( )( θθ sincos yPxPxQ minus=

Similarly for [2] )( )( θθ sincos xPyPyQ +=

)cos( φθ += RQ X

)sin( φθ += RQ y

)(cos φRPX = )(sin φR Py =

Rotation of point P relative to the coordinate origin

( Trigonometric identities (三角恒等式))

9

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Chapter 7Two-Dimensional Geometric Transformations

Part IbullBasic 2D Geometric TransformationsbullMatrix Representations and Homogeneous Coordinatesbull2D Composite Transformations

2

Transformation A transformation is an operation that transforms or changes a shape Linear and affine (仿射) transformations are central to computer

graphics Linear a mapping that preserves linear combinations in a vector space

including rotation scaling (缩放) shearing(剪切)hellip Affine any transformation that preserves collinearity (共綫性 ie all points

lying on a line initially still lie on a line after transformation) and ratios of distances (eg the midpoint of a line segment remains the midpoint after transformation) Composed of linear transformations and a translation (or ldquoshiftrdquo)

Important features Straight lines to straight lines Preserve parallelism Implemented by matrix multiplication

3

Several basic ways you can change a shape

Translation (moving it)

Rotation (turning it round)

Scaling (making it bigger or smaller)

Shear (changing the main shape)

Reflection (mirroring the shape about axis)

Transformation

Translate

Rotate

Scale

Shear

Reflect

4

2D Translation A translation moves an object into a different position in a

scene without changing its shape

This is achieved by adding an offsettranslation vectorto the original coordinates

In vector notation

x

y

PP

=

P

x xx

y yy

P tPP tP

= +

x

y

tt

=

T

Original points Transformed points

Translate by T

T

5

Eg translate the point (12) using translation vector (56)

The new point position is (6 8)

To translate line translate its endpoints To translate polygon translate its vertices

2D Translation

=

++

=

+

86

6251

65

21

6

2D Translation The routine of the transformation operation

void translatePolygon (wcPt2D verts GLint nVerts GLfloat tx GLfloat ty)

GLint k

for (k = 0 k lt nVerts k++) verts [k]x = verts [k]x + txverts [k]y = verts [k]y + ty

glBegin (GL_POLYGON)for (k = 0 k lt nVerts k++)

glVertex2f (verts [k]x verts [k]y)glEnd ()

class wcPt2D public

GLfloat x y

7

2D Rotation To rotate points through the specified rotation angle (θ) and

rotation axis (Z - axis) Rotation axis is perpendicular to XY plane and they intersect at

point (xr yr) (pivot point) θ is positive - a counterclockwise rotation

θ is negative - a clockwise rotation

Figure 7-3 Rotationof an object through Angle θ about the pivot point (xr yr)

Figure 7-4 Rotation of a point from position (x y) to position (x y) through an angle θrelative to the coord origin

Figure 7-5 Rotating a point from position (x y) to position (x y) through an angle θabout rotation point (xr yr)

8

2D Rotation - derivation

cos ( ) cos cos sin sin θ φ θ φ θ φ+ = minus( ) ( ) ( ) ( )sin( ) sin cos cos sin θ φ θ φ θ φ+ = +( ) ( ) ( ) ( )

P

Q

RPX

PYφ

θ

[1][2]

[3][4]

[1] )( )( )( )( φθφθ sinsincoscos RRxQ minus=

Substituting [3] and [4] into [1] )( )( θθ sincos yPxPxQ minus=

Similarly for [2] )( )( θθ sincos xPyPyQ +=

)cos( φθ += RQ X

)sin( φθ += RQ y

)(cos φRPX = )(sin φR Py =

Rotation of point P relative to the coordinate origin

( Trigonometric identities (三角恒等式))

9

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Transformation A transformation is an operation that transforms or changes a shape Linear and affine (仿射) transformations are central to computer

graphics Linear a mapping that preserves linear combinations in a vector space

including rotation scaling (缩放) shearing(剪切)hellip Affine any transformation that preserves collinearity (共綫性 ie all points

lying on a line initially still lie on a line after transformation) and ratios of distances (eg the midpoint of a line segment remains the midpoint after transformation) Composed of linear transformations and a translation (or ldquoshiftrdquo)

Important features Straight lines to straight lines Preserve parallelism Implemented by matrix multiplication

3

Several basic ways you can change a shape

Translation (moving it)

Rotation (turning it round)

Scaling (making it bigger or smaller)

Shear (changing the main shape)

Reflection (mirroring the shape about axis)

Transformation

Translate

Rotate

Scale

Shear

Reflect

4

2D Translation A translation moves an object into a different position in a

scene without changing its shape

This is achieved by adding an offsettranslation vectorto the original coordinates

In vector notation

x

y

PP

=

P

x xx

y yy

P tPP tP

= +

x

y

tt

=

T

Original points Transformed points

Translate by T

T

5

Eg translate the point (12) using translation vector (56)

The new point position is (6 8)

To translate line translate its endpoints To translate polygon translate its vertices

2D Translation

=

++

=

+

86

6251

65

21

6

2D Translation The routine of the transformation operation

void translatePolygon (wcPt2D verts GLint nVerts GLfloat tx GLfloat ty)

GLint k

for (k = 0 k lt nVerts k++) verts [k]x = verts [k]x + txverts [k]y = verts [k]y + ty

glBegin (GL_POLYGON)for (k = 0 k lt nVerts k++)

glVertex2f (verts [k]x verts [k]y)glEnd ()

class wcPt2D public

GLfloat x y

7

2D Rotation To rotate points through the specified rotation angle (θ) and

rotation axis (Z - axis) Rotation axis is perpendicular to XY plane and they intersect at

point (xr yr) (pivot point) θ is positive - a counterclockwise rotation

θ is negative - a clockwise rotation

Figure 7-3 Rotationof an object through Angle θ about the pivot point (xr yr)

Figure 7-4 Rotation of a point from position (x y) to position (x y) through an angle θrelative to the coord origin

Figure 7-5 Rotating a point from position (x y) to position (x y) through an angle θabout rotation point (xr yr)

8

2D Rotation - derivation

cos ( ) cos cos sin sin θ φ θ φ θ φ+ = minus( ) ( ) ( ) ( )sin( ) sin cos cos sin θ φ θ φ θ φ+ = +( ) ( ) ( ) ( )

P

Q

RPX

PYφ

θ

[1][2]

[3][4]

[1] )( )( )( )( φθφθ sinsincoscos RRxQ minus=

Substituting [3] and [4] into [1] )( )( θθ sincos yPxPxQ minus=

Similarly for [2] )( )( θθ sincos xPyPyQ +=

)cos( φθ += RQ X

)sin( φθ += RQ y

)(cos φRPX = )(sin φR Py =

Rotation of point P relative to the coordinate origin

( Trigonometric identities (三角恒等式))

9

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Several basic ways you can change a shape

Translation (moving it)

Rotation (turning it round)

Scaling (making it bigger or smaller)

Shear (changing the main shape)

Reflection (mirroring the shape about axis)

Transformation

Translate

Rotate

Scale

Shear

Reflect

4

2D Translation A translation moves an object into a different position in a

scene without changing its shape

This is achieved by adding an offsettranslation vectorto the original coordinates

In vector notation

x

y

PP

=

P

x xx

y yy

P tPP tP

= +

x

y

tt

=

T

Original points Transformed points

Translate by T

T

5

Eg translate the point (12) using translation vector (56)

The new point position is (6 8)

To translate line translate its endpoints To translate polygon translate its vertices

2D Translation

=

++

=

+

86

6251

65

21

6

2D Translation The routine of the transformation operation

void translatePolygon (wcPt2D verts GLint nVerts GLfloat tx GLfloat ty)

GLint k

for (k = 0 k lt nVerts k++) verts [k]x = verts [k]x + txverts [k]y = verts [k]y + ty

glBegin (GL_POLYGON)for (k = 0 k lt nVerts k++)

glVertex2f (verts [k]x verts [k]y)glEnd ()

class wcPt2D public

GLfloat x y

7

2D Rotation To rotate points through the specified rotation angle (θ) and

rotation axis (Z - axis) Rotation axis is perpendicular to XY plane and they intersect at

point (xr yr) (pivot point) θ is positive - a counterclockwise rotation

θ is negative - a clockwise rotation

Figure 7-3 Rotationof an object through Angle θ about the pivot point (xr yr)

Figure 7-4 Rotation of a point from position (x y) to position (x y) through an angle θrelative to the coord origin

Figure 7-5 Rotating a point from position (x y) to position (x y) through an angle θabout rotation point (xr yr)

8

2D Rotation - derivation

cos ( ) cos cos sin sin θ φ θ φ θ φ+ = minus( ) ( ) ( ) ( )sin( ) sin cos cos sin θ φ θ φ θ φ+ = +( ) ( ) ( ) ( )

P

Q

RPX

PYφ

θ

[1][2]

[3][4]

[1] )( )( )( )( φθφθ sinsincoscos RRxQ minus=

Substituting [3] and [4] into [1] )( )( θθ sincos yPxPxQ minus=

Similarly for [2] )( )( θθ sincos xPyPyQ +=

)cos( φθ += RQ X

)sin( φθ += RQ y

)(cos φRPX = )(sin φR Py =

Rotation of point P relative to the coordinate origin

( Trigonometric identities (三角恒等式))

9

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Translation A translation moves an object into a different position in a

scene without changing its shape

This is achieved by adding an offsettranslation vectorto the original coordinates

In vector notation

x

y

PP

=

P

x xx

y yy

P tPP tP

= +

x

y

tt

=

T

Original points Transformed points

Translate by T

T

5

Eg translate the point (12) using translation vector (56)

The new point position is (6 8)

To translate line translate its endpoints To translate polygon translate its vertices

2D Translation

=

++

=

+

86

6251

65

21

6

2D Translation The routine of the transformation operation

void translatePolygon (wcPt2D verts GLint nVerts GLfloat tx GLfloat ty)

GLint k

for (k = 0 k lt nVerts k++) verts [k]x = verts [k]x + txverts [k]y = verts [k]y + ty

glBegin (GL_POLYGON)for (k = 0 k lt nVerts k++)

glVertex2f (verts [k]x verts [k]y)glEnd ()

class wcPt2D public

GLfloat x y

7

2D Rotation To rotate points through the specified rotation angle (θ) and

rotation axis (Z - axis) Rotation axis is perpendicular to XY plane and they intersect at

point (xr yr) (pivot point) θ is positive - a counterclockwise rotation

θ is negative - a clockwise rotation

Figure 7-3 Rotationof an object through Angle θ about the pivot point (xr yr)

Figure 7-4 Rotation of a point from position (x y) to position (x y) through an angle θrelative to the coord origin

Figure 7-5 Rotating a point from position (x y) to position (x y) through an angle θabout rotation point (xr yr)

8

2D Rotation - derivation

cos ( ) cos cos sin sin θ φ θ φ θ φ+ = minus( ) ( ) ( ) ( )sin( ) sin cos cos sin θ φ θ φ θ φ+ = +( ) ( ) ( ) ( )

P

Q

RPX

PYφ

θ

[1][2]

[3][4]

[1] )( )( )( )( φθφθ sinsincoscos RRxQ minus=

Substituting [3] and [4] into [1] )( )( θθ sincos yPxPxQ minus=

Similarly for [2] )( )( θθ sincos xPyPyQ +=

)cos( φθ += RQ X

)sin( φθ += RQ y

)(cos φRPX = )(sin φR Py =

Rotation of point P relative to the coordinate origin

( Trigonometric identities (三角恒等式))

9

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Eg translate the point (12) using translation vector (56)

The new point position is (6 8)

To translate line translate its endpoints To translate polygon translate its vertices

2D Translation

=

++

=

+

86

6251

65

21

6

2D Translation The routine of the transformation operation

void translatePolygon (wcPt2D verts GLint nVerts GLfloat tx GLfloat ty)

GLint k

for (k = 0 k lt nVerts k++) verts [k]x = verts [k]x + txverts [k]y = verts [k]y + ty

glBegin (GL_POLYGON)for (k = 0 k lt nVerts k++)

glVertex2f (verts [k]x verts [k]y)glEnd ()

class wcPt2D public

GLfloat x y

7

2D Rotation To rotate points through the specified rotation angle (θ) and

rotation axis (Z - axis) Rotation axis is perpendicular to XY plane and they intersect at

point (xr yr) (pivot point) θ is positive - a counterclockwise rotation

θ is negative - a clockwise rotation

Figure 7-3 Rotationof an object through Angle θ about the pivot point (xr yr)

Figure 7-4 Rotation of a point from position (x y) to position (x y) through an angle θrelative to the coord origin

Figure 7-5 Rotating a point from position (x y) to position (x y) through an angle θabout rotation point (xr yr)

8

2D Rotation - derivation

cos ( ) cos cos sin sin θ φ θ φ θ φ+ = minus( ) ( ) ( ) ( )sin( ) sin cos cos sin θ φ θ φ θ φ+ = +( ) ( ) ( ) ( )

P

Q

RPX

PYφ

θ

[1][2]

[3][4]

[1] )( )( )( )( φθφθ sinsincoscos RRxQ minus=

Substituting [3] and [4] into [1] )( )( θθ sincos yPxPxQ minus=

Similarly for [2] )( )( θθ sincos xPyPyQ +=

)cos( φθ += RQ X

)sin( φθ += RQ y

)(cos φRPX = )(sin φR Py =

Rotation of point P relative to the coordinate origin

( Trigonometric identities (三角恒等式))

9

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Translation The routine of the transformation operation

void translatePolygon (wcPt2D verts GLint nVerts GLfloat tx GLfloat ty)

GLint k

for (k = 0 k lt nVerts k++) verts [k]x = verts [k]x + txverts [k]y = verts [k]y + ty

glBegin (GL_POLYGON)for (k = 0 k lt nVerts k++)

glVertex2f (verts [k]x verts [k]y)glEnd ()

class wcPt2D public

GLfloat x y

7

2D Rotation To rotate points through the specified rotation angle (θ) and

rotation axis (Z - axis) Rotation axis is perpendicular to XY plane and they intersect at

point (xr yr) (pivot point) θ is positive - a counterclockwise rotation

θ is negative - a clockwise rotation

Figure 7-3 Rotationof an object through Angle θ about the pivot point (xr yr)

Figure 7-4 Rotation of a point from position (x y) to position (x y) through an angle θrelative to the coord origin

Figure 7-5 Rotating a point from position (x y) to position (x y) through an angle θabout rotation point (xr yr)

8

2D Rotation - derivation

cos ( ) cos cos sin sin θ φ θ φ θ φ+ = minus( ) ( ) ( ) ( )sin( ) sin cos cos sin θ φ θ φ θ φ+ = +( ) ( ) ( ) ( )

P

Q

RPX

PYφ

θ

[1][2]

[3][4]

[1] )( )( )( )( φθφθ sinsincoscos RRxQ minus=

Substituting [3] and [4] into [1] )( )( θθ sincos yPxPxQ minus=

Similarly for [2] )( )( θθ sincos xPyPyQ +=

)cos( φθ += RQ X

)sin( φθ += RQ y

)(cos φRPX = )(sin φR Py =

Rotation of point P relative to the coordinate origin

( Trigonometric identities (三角恒等式))

9

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Rotation To rotate points through the specified rotation angle (θ) and

rotation axis (Z - axis) Rotation axis is perpendicular to XY plane and they intersect at

point (xr yr) (pivot point) θ is positive - a counterclockwise rotation

θ is negative - a clockwise rotation

Figure 7-3 Rotationof an object through Angle θ about the pivot point (xr yr)

Figure 7-4 Rotation of a point from position (x y) to position (x y) through an angle θrelative to the coord origin

Figure 7-5 Rotating a point from position (x y) to position (x y) through an angle θabout rotation point (xr yr)

8

2D Rotation - derivation

cos ( ) cos cos sin sin θ φ θ φ θ φ+ = minus( ) ( ) ( ) ( )sin( ) sin cos cos sin θ φ θ φ θ φ+ = +( ) ( ) ( ) ( )

P

Q

RPX

PYφ

θ

[1][2]

[3][4]

[1] )( )( )( )( φθφθ sinsincoscos RRxQ minus=

Substituting [3] and [4] into [1] )( )( θθ sincos yPxPxQ minus=

Similarly for [2] )( )( θθ sincos xPyPyQ +=

)cos( φθ += RQ X

)sin( φθ += RQ y

)(cos φRPX = )(sin φR Py =

Rotation of point P relative to the coordinate origin

( Trigonometric identities (三角恒等式))

9

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Rotation - derivation

cos ( ) cos cos sin sin θ φ θ φ θ φ+ = minus( ) ( ) ( ) ( )sin( ) sin cos cos sin θ φ θ φ θ φ+ = +( ) ( ) ( ) ( )

P

Q

RPX

PYφ

θ

[1][2]

[3][4]

[1] )( )( )( )( φθφθ sinsincoscos RRxQ minus=

Substituting [3] and [4] into [1] )( )( θθ sincos yPxPxQ minus=

Similarly for [2] )( )( θθ sincos xPyPyQ +=

)cos( φθ += RQ X

)sin( φθ += RQ y

)(cos φRPX = )(sin φR Py =

Rotation of point P relative to the coordinate origin

( Trigonometric identities (三角恒等式))

9

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Rotation - derivation With the column-vector representations for coordinate positions

the rotation equations in the matrix formQ = RP

where the rotation matrix is

Therefore general equations for rotation of a point (x y) about any specified pivot ( xr yr ) (eg Fig 7-9)

10

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Scaling To change the size of object

Scaling is done by multiplying each coordinate with a scalar (Sx Sy) Uniform scaling this scalar is the same for all coordinates None-uniform scaling different scalars per coordinate

11

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Uniform scaling

2D Scaling

times 2

12

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

X times 2Y times 05

None uniform scaling

2D Scaling

13

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Scaling ndash relative to the origin Scaling relative to the origin point (0 0)

x = x˙Sx y = y˙Sy (7-10)

Sx scales objects in the x direction whileSy scales in the y direction

In matrix form

P = S ˙ P (7-12)where S is the 2 by 2 scaling matrix

(7-11)

14

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Scaling ndash relative to fixed point Scaling relative to the fixed point (xf yf)

We can rewrite these scaling transformations to

x = xf + (x ndash xf) sx y = yf + (y - yf) sy

Scaling the distance from the point to the fixed point

where the additive terms xf(1 - sx) and yf(1 - sy) are constant

bull It can be represented in the general matrix form15

Figure 7-8 Scaling relative to a chosen fixed point (xf yf ) The distance from each polygon vertex to the fixed point is scaled by Equations 7-13

(7-13)

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

1 Translation

2 Scaling

3 Rotation

General Matrix Representation

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

T

T

T

16

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

General Matrix Representation All these 2D transformations (translation scaling

rotation) can be generically described in terms of a generic matrix equation as follows

ie

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=new position original position

constant part

transformation matrix17

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Advantage amp Disadvantage

The transformation is composed of a linear combinationfollowed by a translation

Unfortunately the translation portion is not a matrixmultiplication and must be added as an extra term orvector ndash this is inconvenient

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

18

+

=

y

x

y

x

y

x

tt

PP

QQ

1001

+

=

00

00

y

x

y

x

y

x

PP

SS

QQ

+

minus=

00

cossinsincos

y

x

y

x

PP

θθθθ

QQ

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Homogeneous Coordinates(齐次坐标)

The ldquotrickrdquo we use is to add an additional component 1 to both Pand Q and also a third row and column to M consisting of zerosand a 1ie

Then all transformation equations can be expressed asmatrix multiplications

Homogeneous coordinates

=

11001y

x

y

x

y

x

PP

tdctba

QQ

+

=

y

x

y

x

y

x

tt

PP

dcba

QQ

t MP Q +=

19

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Homogeneous Coordinates Homogeneous coordinates expand 2D coordinate-

position representation (x y) to a three-elementrepresentation (xh yh h) h is a homogeneous parameter which is a nonzero value such

that

For geometric transformation we can choose any nonzerovalue for h for simplicity to set h=1

h hx yx yh h

= =

20

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Homogeneous Coordinates For translation by (tx ty)

in the abbreviated formP = T(tx ty)P

(7-17)

(7-18)

21

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

How about θ is replaced with ndashθ

Homogeneous Coordinates For rotation transformation by θ about the coordinate

origin

in the abbreviated formP = R(θ)P

The rotation transformation operator R(θ) is the 3 by 3 matrix in Eq7-19 with rotation parameter θ

(7-19)

(7-20)

22

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

For scaling transformation by sx sy relative to thecoordinate origin

in the abbreviated formP = S(sx sy)P

(7-21)

(7-22)

Homogeneous Coordinates

23

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Homogeneous Coordinates In homogeneous form

=

1001001

y

x

tt

M

=

1000000

y

x

SS

M

=

minus

10000

cossin

sincos

θθ

θθ

M

Translation by (tx ty)

Scale by Sx Sy

Rotation by θ

24

How about the inverse transformation

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Composite Transformations We can use more than one transformation operation (same type or

different) on the same object

hellip hellip

25

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Composite Translation Two successive translations (tx1 ty1) and (tx2 ty2) are applied to a

coordinate point P

where P and Prsquo are represented as homogeneous coordinate column vectors

orTwo successive translations are additive of the translation factor

++

=

sdot

1001001

1001001

1001001

21

21

1

1

2

2

yy

xx

y

x

y

x

tttt

tt

tt

( ) ( )( ) ( ) ( )( ) x y x y x y x yP T t t T t t P T t t T t t P= sdot sdot = sdot sdot2 2 1 1 2 2 1 1

( ) ( ) ( )1x y x y x x y yT t t T t t T t t t t+ +sdot =2 2 1 1 1 2 2

26

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Composite Rotation Two successive rotations with θ1 and θ2 round the origin

applied to point P

where P and Prsquo are represented as homogeneous coordinate column vectors

By multiplying the two rotation matrices we can verify that two successive rotations are additive

So that the final rotated coordinates can be calculated with the composite rotation matrix as

( ) ( ) ( 2) ( 1) ( 2) ( 1)P R θ R θ P R θ R θ P= sdot sdot = sdot sdot

)()()( 2121 θθRθRθR +=sdot

PθθRP sdot+= )( 21

+++minus+

=+1000)cos()sin(0)sin()cos(

)21( 2121

2121

θθθθθθθθ

θθRwhere

27

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

2D Composite Scaling Two successive scaling operations

Two successive scaling are multiplicative

=

1000000

1000000

1000000

21

21

1

1

2

2

yy

xx

y

x

y

x

ssss

ss

ss

)()()( 21211122 YYXXYXYX SSSSSSSSSSS sdotsdot=sdot

28

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

General 2D Pivot-Point Rotation A transformation sequence for rotating an object about a

specified pivot point

Steps Translate the object so that the pivot-point position is

moved to the coordinate origin Rotate the object about the coordinate origin Translate the object so that the pivot point is returned to its

original position29

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

General 2D Pivot-Point Rotation

Original Position of Object and Pivot Point (xr yr)

Translation of Object so that Pivot Point is at Origin

30

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

General 2D Pivot-Point Rotation

Rotation about Origin

Translation of Object so that Pivot Point is Returned to original Position

31

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

General 2D Pivot-Point Rotation Rotation with respect to a pivot point (xryr)

or in form

where

1 0 cos sin 0 1 00 1 sin cos 0 0 10 0 1 0 0 1 0 0 1

cos sin (1 cos ) sinsin cos (1 cos ) sin

0 0 1

r r

r r

r r

r r

x xy y

x yy x

θ θθ θ

θ θ θ θθ θ θ θ

minus minus sdot sdot minus

minus minus + = minus minus

( )( ) ( ) ( ) r r r r r rT x y R T x y R x yθ θsdot sdot minus minus =

1( ) ( )r r r rT x y T x yminusminus minus =32

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

General 2D Fixed-Point Scaling A transformation sequence for scaling an object with

respect to a specified fixed position using the scaling matrix

Steps Translate object so that the fixed point coincides with the coordinate

origin

Scale the object with respect to the coordinate origin

Use the inverse translation of step 1 to return the object to its original position33

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

General 2D Fixed-Point Scaling

Original Position of Object and Fixed point

Translation of Object so that Fixed Point is at Origin

34

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

General 2D Fixed-Point Scaling

Scale Object with Respect to Origin

Translation of Object so that Fixed Point is Returned to original Position

35

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

General 2D Fixed-Point Scaling Concatenating the matrices for these operations produces the

required scaling matrix

( )

( ) ( ) ( )

1 0 0 0 1 00 1 0 0 0 10 0 1 0 0 1 0 0 1

0 (1 )0 (1 )0 0 1

x y x y

f f x y

f x f

f y f

x x f

y y f

S x y s s

T x y S s s T x y

x s xy s y

s s xs s y

= sdot sdot minus minus

minus = sdot sdot minus

minus sdot = minus sdot

36

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Matrix Composition Transformations can be combined by matrix multiplication

Order of transformations Matrix multiplication is not commutative

minus

=

w

y

x

sy

sx

ty

tx

w

y

x

100

00

00

100

0cossin

0sincos

100

10

01

θθθθ

prsquo = T(txty) R(Q) S(sxsy) p

prsquo = ( T (R (Sp) ) )prsquo = ( TRS ) p

prsquo = T R S p

37

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Order of Transformations

P = R T P P = T R P

38

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

More Example Suppose we want

We have to compose two transformations

)90( degminusR )3(xT

39

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

More Example Matrix multiplication is not commutative

)3()90()90()3( xx TRRT degminusnedegminussdot

Translationfollowed by

rotation

Rotationfollowed bytranslation

40

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Chapter 7Two-Dimensional Geometric Transformations

Part IIbullOther 2D TransformationsbullRaster Methods for Geometric TransformationsbullOpenGL Raster Transformations

41

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Reflection Reflection produce a mirror image of an object

Reflection about x-axis xrsquo = x yrsquo = -y

Reflection about y-axis xrsquo = -x yrsquo = y

42

minus=

primeprime

11001

00

001

1yx

yx

minus=

primeprime

11001

00

001

1yx

yx

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Reflection Reflection about origin point (0 0)

Reflection about the line y = x and y = -x

43

minus

minus=

primeprime

11001

00

001

1yx

yx

=

primeprime

11000

01

010

1yx

yx

0 1 01 0 0

1 0 0 1 1

x xy yprime minus

prime = minus

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Shear Shear

Distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other

It is done by changing the value of one coordinate and keeping the other coordinate without changing

Two types of shear To shift in x To shift in y

44Y- direction shear

X- direction shear

To stretch rectangles into parallelograms

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

X-direction Shear refer to x-axis X- direction shear

xrsquo = x + shx bull yyrsquo = y

In matrix representation

45

=

primeprime

11001

00

01

1yxsh

yx x

(7-57)

FIGURE 7-23 A unit square (a) is converted to a parallelogram (b) using the x-direction shear matrix 7-57 with shx = 2

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

X-direction Shear refer to y=yref x-direction shears relative to other reference lines y = yref

46

y=yref

y=0 y=0

minus

10010

001refy

10001001 xsh

10010

001refy

minus

=

primeprime

110010

001

10001001

10010

001

1yx

ysh

yyx

ref

x

ref

y=yref

x = x + shx(y ndash yref) y = y

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Y-direction Shear refer to y-axis Y- direction shear

x = x y = y + shy bull x

In matrix representation

47

Given shy = 2 relative to the y-axis ( x = 0) and a square with coordinates (00) (01) (11) (10)

=

primeprime

11001

0

001

1yx

shyx

y

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

y-direction shear relative to the line x = xrefx = xy = shy(x ndash xref) + y

48

Y-direction Shear refer to x=xref

Example y-direction shear relative to the line xref = -1

FIGURE 7-25 A unit square (a) is turned into a shifted parallelogram (b) with parameter values shy = 05 and xref = -1 in the y-direction shearing transformation 7-61

(7-61)

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Raster Methods for Geometric Transformations An alternative method for performing 2D transformations To use raster operations to directly manipulating pixel values in the

frame buffer

49

1 Block Transfer (bitblt pixblt) Block transfer (bitblt (bit-block transfer) pixblt) moving a block of

pixel values from one position to another

FIGURE 7-26 Translating an object from screen position (a) to the destination position shown in (b) by moving a rectangular block of pixel values Coordinate positions Pmin and Pmax specify the limits of the rectangular block to be moved and P0 is the destination reference position

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Raster Methods for Geometric TransformationsRotations Rotations in 90 or 180 degrees are easily accomplished by

rearranging the elements of a pixel array 90deg-counterclockwise rotation by reversing the pixel values in each row

of the array 180deg-counterclockwise rotation by reversing the order of the elements in

each row then reversing the order of the rows

12 11 109 8 76 5 43 2 1

10 7 4 111 8 5 212 9 6 3

1 2 34 5 67 8 9

10 11 12

(a) (b) (c)

FIGURE 7-27 Rotating an array of pixel values The original array is shown in (a) the positions of the array elements after a 90deg counterclockwise rotation are shown in (b) and the positions of the array elements after a 180degrotation are shown in (c)50

90180

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

OpenGL Raster Transformations 1) TranslationCopyA translation of a rectangular array of pixel-color values from one buffer to

another can be accomplished in OpenGL as a copy operation

glCopyPixels (xmin ymin width height GL_COLOR)

-- GL_COLOR buffer type to be copied (others GL_DEPTH GL_STENCIL)

-- Destination Current Raster Position

The translation can be - carried out on any OpenGL buffers for refreshing- used between different bufferssource buffer is chosen with glReadBuffer destination buffer is selected with glDrawBuffer

51

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

OpenGL Raster Transformations 2) Rotation a block of pixel-color values in 90 degrees

Read a block of pixel-color values from a buffer and store in an array by glReadPixels

glReadPixels (xmin ymin width height GL_RGB GL_UNSIGNED_BYTE colorArray )

-- The color of block read into colorArray[ ] with data format GL_RGB amp data type GL_UNSIGNED_BYTE

Rearrange the rows and columns of the array Placing the rotated array back in the buffer

glDrawPixels (width height GL_RGB GL_UNSIGNED_BYTEcolorArray )

--The block is written by colorArray[ ] to Current Raster Position

52

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

3) Scaling a block of pixel-color values

Firstly specify the scaling factors by glPixelZoomglPixelZoom ( sx sy )

-- Zoom referred to Current Raster Position-- sx sy nonzero floating-point values-- gt 10 positive values increase the size of an element in the source

array-- lt 10 positive values decrease element size-- negative value produce a reflection and scaling the array elements

Then write back (either glCopyPixels or glDrawPixels)

53

OpenGL Raster Transformations

- End of Part IampII -

Recommended