2D Transformations Reading Required: Hearn and Baker, Sections 5.1-5.4, 5.6, 61-63, 6.5 Optional: @ Foley et al., Chapter 5.1-5.5 @ David F. Rogers and J. Alan Adams, Mathematical Blements for Computer Graphics, Second edition, MeGraw-Hill New York, 1990, Chapter 22D drawing Think of a program like PowerPoint, Illustrator, MacDraw... # Interactively create a number of primitives, eg., polygons and circles. @ Indicate a front-to-back ordering. @ Scale, translate, and rotate objects, as well as group them together. © Scroll or zoom the “canvas” to look at different parts of the drawing, ¢ Generate an image and displays it on the screen. 2D drawing, cont’d What are some of the key ingredients needed to make this work? # Specification of the front-to-back ordering # A sequence of geometric transformations, some of them stored in hierarchies corresponding to groups of primitives # Definition of the “visible” portion of the canvas «A mapping from the visible portions of the canvas to pixels on the screen © Software or hardware that is able to “rasterize” the primitives, ie., draw the pixels corresponding to the primitives.2D geometry pipeline Let’s think about this in terms of a set of coordinate systems: 1 w ‘Model space yy 2 (Object space) Yo | seale, 0 " window World space (Object space) fw scale, translate Ve i Normalized device space o eee (Screen space) 10 | seale Image space (Window space) (Raster space) (Screen space) evice space) Clipping To avoid drawing primitives or parts of primitives that do not appear in the viewport, we perform “clipping” Clipping includes: # Removal of primitives wholly outside of the viewport (a.k.a., “culling”) ¢ Intersection of the viewport with primitives that straddle the viewport boundary. Clipping can happen: @ In world space ¢ In normalized device space In image spaceA simple OpenGL example Here’s an example of an OpenGL program that will draw a black square over a white background: makeADrawingWindow() ; gl0rtho(xwmin, xw_max, yw.min, ywmax, -1.0, 1.0); glViewport(xi_min, yi_min, width_i, height_i); giClearColor(1.0, 1.0, 1.0, 0.0); giClear (GL_COLOR_BUFFER_BIT) ; glColor3#(0.0, 0.0, 0.0); giBegin(GL_POLYGON) ; glVertex2f(0.0, 0.0); glVertex2£(1.0, 0.0); glVertex2f(1.0, 1.0); glVertex2#(0.0, 1.0); glEnd() ; glFlushQ); For the remainder of this lecture, we will focus on 2D geometric transformations. Representation We can represent a point p = (x,y) in the plane x y as a row vector [xy] ® as a column vectorRepresentation, cont. Two-dimensional transformations We can represent a 2-D transformation M Here's all you get with a 2 x 2 transformation by a matrix matrix M: aio 2) _[ab][« cd y ed|ly | So vw! = axt+by y = cx+dy We will develop some intimacy with the If p is a row vector, MT goes on the right: elements a,b, ¢,d. p= pT ac lev) =e |S We will use column vectors.Identity Scaling Suppose we choose a = d = 1, b=c=0: Suppose we set b= c= 0, but let @ and d take on any positive value: © Gives the “identity” matrix fe # Gives a “scaling” matrix 20 od ol Doesn't move the points at all © Provides differential scaling in x and y: vw = ax y = dy un 2Suppose we keep b = c = 0, but let @ and d go negative Examples: -10 -10 ol 0-1 Mivror reflec. Mirren cef-edion obest Po 45" dine best y-wis 18 Now let’s leave a = d = 1 and experiment with c.. The matrix 10 cl gives: ae) yf =crty Effect is called a “shestingEffect on unit square how a general 2 x 2 transformation M affects the unit square: 0110) _ OONa| = Ocet+dd 6 Effect on unit square, cont. Observe: ¢ Origin invariant under M ¢ -M can be determined just by knowing how the corners (1, 0) and (0,1) are mapped cand d give x- and y-scaling © band c give z- and y-shearing 16Rotation From our observations of the effect on the unit square, it should be easy to write cou a matrix for “rotation about the ori o Ging, cose) : «eon, #8) Limitations of the 2 x 2 matrix A2x 2 matrix allows @ Scaling @ Rotation © Reflection @ Shearing Q: What important operation does that leave out? TranslationHomogeneous coordinates Idea is to loft the problem up into 3-space, adding a third component to every point: t 2 ; ale) And then transform with a 3 x 3 matrix: 1 10m)/[a =|o1n|]y O01 1 . . Gives translation! 19 Rotation about arbitrary points Until now, we have only considered rotation about the origin. With homogeneous coordinates, you can specify rotations about any point q with a matrix: elo ff /@-s © ' 9-4 © 1 Fl [sec oO oo1 ~F ee y|loet oon 1. Translate q to origin 2. Rotate 3. Translate back to q Note: Transformation order is important! 20 & YeWindow-to-viewport transformation How do we transform from the window in world coordinates to the viewport in screen space? World space ‘Normalized device oes Tw - Ze 4) Trenslete BE the engin 2) seabing tralele ba Cov min, Yen) He [io = xen O 1 = Yeon 2 > 4 en w-{ %& 2 2 8 See KO os ° Soe . M; = 1 8 Meni ' [ No] Mathematics of affine transformations All of the transformations we've looked at so far are examples of “affine transformations.” Here are some useful properties of affine transformations: Lines map to lines © Parallel lines remain parallel © Midpoints map to midpoints (in fact, ratios are always preserved)Summary What to take away from this lec © All the underlined names and names in quotations. # How points and transformations are represented. What all the elements of a 2 x 2 transformation matrix do. What homogeneous coordinates are and how they work for affine transformations. « How to concatenate transformations. © The mai ical properties of affine trasnformations. 2a