SlideShare a Scribd company logo
2D transformations and
homogeneous coordinates
        TARUN GEHLOTS
Map of the lecture
• Transformations in 2D:
  – vector/matrix notation
  – example: translation, scaling, rotation
• Homogeneous coordinates:
  – consistent notation
  – several other good points (later)
• Composition of transformations
• Transformations for the window system
Transformations in 2D
• In the application model:
  – a 2D description of an object (vertices)
  – a transformation to apply
• Each vertex is modified:
  • x’ = f(x,y)
  • y’ = g(x,y)
• Express the modification
Translations
• Each vertex is modified:
  • x’ = x+tx
  • y’ = y+ty




       Before                  After
Translations: vector notation
• Use vector for the notation:
  – makes things simpler
• A point is a vector: x
                           y
• A translation is merely a vector sum:
          P’ = P + T
Scaling in 2D
• Coordinates multiplied by the scaling
  factor:
  • x’ = sx x
  • y’ = sy y




       Before                   After
Scaling in 2D, matrix notation
• Scaling is a matrix multiplication:
          P’ = SP

          x      sx    0   x
          y       0   sy   y
Rotating in 2D
• New coordinates depend on both x and y
  • x’ = cos x - sin y
  • y’ = sin x + cos y




     Before                 After
Rotating in 2D, matrix notation
• A rotation is a matrix multiplication:
          P’=RP

   x        cos           sin       x
   y         sin        cos         y
2D transformations, summary
• Vector-matrix notation simplifies writing:
  – translation is a vector sum
  – rotation and scaling are matrix-vector
    multiplication
• I would like a consistent notation:
  – that expresses all three identically
  – that expresses combination of these also
    identically
• How to do this?
Homogeneous coordinates
• Introduced in mathematics:
  – for projections and drawings
  – used in artillery, architecture
  – used to be classified material (in the 1850s)
• Add a third coordinate, w                     x
• A 2D point is a 3 coordinates vector:         y
                                               w
Homogeneous coordinates (2)
• Two points are equal if and only if:
  x’/w’ = x/w and y’/w’= y/w
• w=0: points at infinity
  – useful for projections and curve drawing
• Homogenize = divide by w.
• Homogenized points:    x
                         y
                         1
Translations with homogeneous
x   1 0 tx   x            x   x
                          w   w   tx
y   0 1 ty   y
                          y   y
w   0 0 1 w
                          w   w   ty
             x   x wt x
             y   y wt y
             w     w
Scaling with homogeneous
x   sx   0    0   x              x         x
y   0    sy   0   y              w   s   x w
                                 y         y
w   0    0    1 w
                                 w   s   y w
                      x   sx x
                      y   sy y
                      w   w
Rotation with homogeneous
x    cos    sin    0   x
y    sin   cos     0   y       x         x         y
                               w   cos   w   sin   w
w     0     0      1 w
                               y         x         y
                               w   sin   w   cos   w


             x    cos x sin y
             y    sin x cos y
            w              w
Composition of transformations
• To compose transformations, multiply
  the matrices:
  – composition of a rotation and a translation:
                M = RT
• all transformations can be expressed as
  matrices
  – even transformations that are not
    translations, rotations and scaling
Rotation around a point Q
• Rotation about a point Q:
  – translate Q to origin (TQ),
  – rotate about origin (R )
  – translate back to Q (- TQ).


              P’=(-TQ)R TQ P
Beware!
• Matrix multiplication is not commutative
• The order of the transformations is vital
  – Rotation followed by translation is very different
    from translation followed by rotation
  – careful with the order of the matrices!
• Small commutativity:
  – rotation commute with rotation, translation with
    translation…
From World to Window
• Inside the application:
  – application model
  – coordinates related to the model
  – possibly floating point
• On the screen:
  – pixel coordinates
  – integer
  – restricted viewport: umin/umax, vmin/vmax
From Model to Viewport
ymax



ymin

       xmin    xmax
From Model to Viewport
• Model is (xmin,ymin)-(xmax,ymax)
• Viewport is (umin,vmin)-(umax,vmax)
• Translate by (-xmin,-ymin)
• Scale by ( umax-umin , vmax-vmin )
             xmax-xmin   ymax-ymin
• Translate by (umin,vmin)

         M = T’ST
From Model to Viewport


Pixel Coordinates             Model Coordinates
                    u     x
                    v   M y
                    w     w
Mouse position: inverse problem
• Mouse click: coordinates in pixels
• We want the equivalent in World Coord
  – because the user has selected an object
  – to draw something
  – for interaction
• How can we convert from window
  coordinates to model coordinates?
Mouse click: inverse problem
    • Simply inverse the matrix:
                        1               1
                    M       (T ST)
Model Coordinates
                                            Pixels coordinates
                    x               u
                                1
                    y       M       v
                    w               w
2D transformations: conclusion
• Simple, consistent matrix notation
  – using homogeneous coordinates
  – all transformations expressed as matrices
• Used by the window system:
  – for conversion from model to window
  – for conversion from window to model
• Used by the application:
  – for modeling transformations

More Related Content

PPTX
3d transformation computer graphics
PPT
Two dimensional geometric transformations
PPTX
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPT
PDF
3D Transformation
PPTX
Composite transformation
PPT
2 d geometric transformations
PPTX
Halftoning in Computer Graphics
PPTX
Spline representations
3d transformation computer graphics
Two dimensional geometric transformations
HOMOGENEOUS CO-ORDINATES IN COMPUTER GRAPHICS PPT
3D Transformation
Composite transformation
2 d geometric transformations
Halftoning in Computer Graphics
Spline representations

What's hot (20)

PPTX
Homogeneous Representation: rotating, shearing
PPT
Z buffer
PPTX
Computer Graphic - Transformations in 2D
PPTX
Color Models Computer Graphics
PPTX
Bezeir curve na B spline Curve
PPT
Image segmentation ppt
PDF
2D Transformation in Computer Graphics
PPT
Window to viewport transformation
PPTX
2d-transformation
PPT
Visible surface detection in computer graphic
PPT
PPT
2d transformation
PPTX
Cohen sutherland line clipping
DOCX
Bezier Curve in Computer Graphics.docx
PPTX
3D Transformation
PPT
Ellipses drawing algo.
PPTX
3D Transformation in Computer Graphics
PPS
Overview of 2D and 3D Transformation
PPT
Coordinate transformation
Homogeneous Representation: rotating, shearing
Z buffer
Computer Graphic - Transformations in 2D
Color Models Computer Graphics
Bezeir curve na B spline Curve
Image segmentation ppt
2D Transformation in Computer Graphics
Window to viewport transformation
2d-transformation
Visible surface detection in computer graphic
2d transformation
Cohen sutherland line clipping
Bezier Curve in Computer Graphics.docx
3D Transformation
Ellipses drawing algo.
3D Transformation in Computer Graphics
Overview of 2D and 3D Transformation
Coordinate transformation
Ad

Viewers also liked (20)

PPT
2d/3D transformations in computer graphics(Computer graphics Tutorials)
DOCX
Homogeneous coordinate
PPT
Projection Matrices
PPT
CS 354 Transformation, Clipping, and Culling
PPT
3D transformation
PDF
OpenGL Transformation
PPT
Secrets of CryENGINE 3 Graphics Technology
PPTX
Display devices CRT and LCD screen
PPT
lecture1 introduction to computer graphics(Computer graphics tutorials)
PDF
Computer Graphics Notes
PPT
3 d projections
PPT
3 d geometric transformations
PPTX
Introduction to Computer graphics
PDF
CG - Display Devices
PPTX
3D Geometric Transformations
PPTX
Video display device
PPT
transformation 3d
PPT
2 d transformations by amit kumar (maimt)
PDF
Computer Graphics Notes (B.Tech, KUK, MDU)
PPT
applications of computer graphics
2d/3D transformations in computer graphics(Computer graphics Tutorials)
Homogeneous coordinate
Projection Matrices
CS 354 Transformation, Clipping, and Culling
3D transformation
OpenGL Transformation
Secrets of CryENGINE 3 Graphics Technology
Display devices CRT and LCD screen
lecture1 introduction to computer graphics(Computer graphics tutorials)
Computer Graphics Notes
3 d projections
3 d geometric transformations
Introduction to Computer graphics
CG - Display Devices
3D Geometric Transformations
Video display device
transformation 3d
2 d transformations by amit kumar (maimt)
Computer Graphics Notes (B.Tech, KUK, MDU)
applications of computer graphics
Ad

Similar to 2 d transformations and homogeneous coordinates (20)

PDF
2d Transformation.pdf
PPTX
Computer Graphics - transformations in 2d
PPT
2D-Transformations-Transformations are the operations applied to geometrical ...
PPT
Geometric transformation cg
PPT
Matrix 2 d
PPT
Computer graphics
PPT
Transforms UNIt 2
PPTX
Computer Graphics transformations
PDF
2D Translation.pdf
PPT
“Transformations are the operations applied to geometrical description of an ...
PPTX
Transformations computer graphics
PPT
06.Transformation.ppt
PPT
Transformations in Computer Graphics
PPT
september4.ppt
PPTX
moule 3 ppt1 basic 2D transformations.pptx
PPT
Cs8092 computer graphics and multimedia unit 2
PPT
GeometricTransformations.ppt
PDF
2-D Transformations.pdf
PPT
SJT_TWO DIMENSIONAL TRANSFORMATIONNn.ppt
PPTX
Computer graphics basic transformation
2d Transformation.pdf
Computer Graphics - transformations in 2d
2D-Transformations-Transformations are the operations applied to geometrical ...
Geometric transformation cg
Matrix 2 d
Computer graphics
Transforms UNIt 2
Computer Graphics transformations
2D Translation.pdf
“Transformations are the operations applied to geometrical description of an ...
Transformations computer graphics
06.Transformation.ppt
Transformations in Computer Graphics
september4.ppt
moule 3 ppt1 basic 2D transformations.pptx
Cs8092 computer graphics and multimedia unit 2
GeometricTransformations.ppt
2-D Transformations.pdf
SJT_TWO DIMENSIONAL TRANSFORMATIONNn.ppt
Computer graphics basic transformation

More from Tarun Gehlot (20)

PDF
Materials 11-01228
PDF
Binary relations
PDF
Continuity and end_behavior
PDF
Continuity of functions by graph (exercises with detailed solutions)
PDF
Factoring by the trial and-error method
PDF
Introduction to finite element analysis
PDF
Finite elements : basis functions
PDF
Finite elements for 2‐d problems
PDF
Error analysis statistics
PDF
Matlab commands
PPT
Introduction to matlab
PDF
Linear approximations and_differentials
PDF
Local linear approximation
PPT
Interpolation functions
PDF
Propeties of-triangles
PDF
Gaussian quadratures
PDF
Basics of set theory
PPT
Numerical integration
PPT
Applications of set theory
PDF
Miscellneous functions
Materials 11-01228
Binary relations
Continuity and end_behavior
Continuity of functions by graph (exercises with detailed solutions)
Factoring by the trial and-error method
Introduction to finite element analysis
Finite elements : basis functions
Finite elements for 2‐d problems
Error analysis statistics
Matlab commands
Introduction to matlab
Linear approximations and_differentials
Local linear approximation
Interpolation functions
Propeties of-triangles
Gaussian quadratures
Basics of set theory
Numerical integration
Applications of set theory
Miscellneous functions

2 d transformations and homogeneous coordinates

  • 1. 2D transformations and homogeneous coordinates TARUN GEHLOTS
  • 2. Map of the lecture • Transformations in 2D: – vector/matrix notation – example: translation, scaling, rotation • Homogeneous coordinates: – consistent notation – several other good points (later) • Composition of transformations • Transformations for the window system
  • 3. Transformations in 2D • In the application model: – a 2D description of an object (vertices) – a transformation to apply • Each vertex is modified: • x’ = f(x,y) • y’ = g(x,y) • Express the modification
  • 4. Translations • Each vertex is modified: • x’ = x+tx • y’ = y+ty Before After
  • 5. Translations: vector notation • Use vector for the notation: – makes things simpler • A point is a vector: x y • A translation is merely a vector sum: P’ = P + T
  • 6. Scaling in 2D • Coordinates multiplied by the scaling factor: • x’ = sx x • y’ = sy y Before After
  • 7. Scaling in 2D, matrix notation • Scaling is a matrix multiplication: P’ = SP x sx 0 x y 0 sy y
  • 8. Rotating in 2D • New coordinates depend on both x and y • x’ = cos x - sin y • y’ = sin x + cos y Before After
  • 9. Rotating in 2D, matrix notation • A rotation is a matrix multiplication: P’=RP x cos sin x y sin cos y
  • 10. 2D transformations, summary • Vector-matrix notation simplifies writing: – translation is a vector sum – rotation and scaling are matrix-vector multiplication • I would like a consistent notation: – that expresses all three identically – that expresses combination of these also identically • How to do this?
  • 11. Homogeneous coordinates • Introduced in mathematics: – for projections and drawings – used in artillery, architecture – used to be classified material (in the 1850s) • Add a third coordinate, w x • A 2D point is a 3 coordinates vector: y w
  • 12. Homogeneous coordinates (2) • Two points are equal if and only if: x’/w’ = x/w and y’/w’= y/w • w=0: points at infinity – useful for projections and curve drawing • Homogenize = divide by w. • Homogenized points: x y 1
  • 13. Translations with homogeneous x 1 0 tx x x x w w tx y 0 1 ty y y y w 0 0 1 w w w ty x x wt x y y wt y w w
  • 14. Scaling with homogeneous x sx 0 0 x x x y 0 sy 0 y w s x w y y w 0 0 1 w w s y w x sx x y sy y w w
  • 15. Rotation with homogeneous x cos sin 0 x y sin cos 0 y x x y w cos w sin w w 0 0 1 w y x y w sin w cos w x cos x sin y y sin x cos y w w
  • 16. Composition of transformations • To compose transformations, multiply the matrices: – composition of a rotation and a translation: M = RT • all transformations can be expressed as matrices – even transformations that are not translations, rotations and scaling
  • 17. Rotation around a point Q • Rotation about a point Q: – translate Q to origin (TQ), – rotate about origin (R ) – translate back to Q (- TQ). P’=(-TQ)R TQ P
  • 18. Beware! • Matrix multiplication is not commutative • The order of the transformations is vital – Rotation followed by translation is very different from translation followed by rotation – careful with the order of the matrices! • Small commutativity: – rotation commute with rotation, translation with translation…
  • 19. From World to Window • Inside the application: – application model – coordinates related to the model – possibly floating point • On the screen: – pixel coordinates – integer – restricted viewport: umin/umax, vmin/vmax
  • 20. From Model to Viewport ymax ymin xmin xmax
  • 21. From Model to Viewport • Model is (xmin,ymin)-(xmax,ymax) • Viewport is (umin,vmin)-(umax,vmax) • Translate by (-xmin,-ymin) • Scale by ( umax-umin , vmax-vmin ) xmax-xmin ymax-ymin • Translate by (umin,vmin) M = T’ST
  • 22. From Model to Viewport Pixel Coordinates Model Coordinates u x v M y w w
  • 23. Mouse position: inverse problem • Mouse click: coordinates in pixels • We want the equivalent in World Coord – because the user has selected an object – to draw something – for interaction • How can we convert from window coordinates to model coordinates?
  • 24. Mouse click: inverse problem • Simply inverse the matrix: 1 1 M (T ST) Model Coordinates Pixels coordinates x u 1 y M v w w
  • 25. 2D transformations: conclusion • Simple, consistent matrix notation – using homogeneous coordinates – all transformations expressed as matrices • Used by the window system: – for conversion from model to window – for conversion from window to model • Used by the application: – for modeling transformations