Spring 2008 6.831 User Interface Design and Implementation 1Lecture 21: Coordinate Transforms & Clipping UI Hall of Fame or Shame?Spring 2008 6.831 User Interface Design and Implementation 2 From Lydia Chilton: “Stellar is MIT's internal course website service. Uses want to navigate the Stellar homepage to find their class' Stellar page. Each course has a list of about 100 classes. Unfortunately for the user, the scroll panel only displays two classes at a time.” (Also mentioned by Stanley Wang) Let’s discuss the front page of Stellar with respect to any of the UI design principles we’ve talked about, e.g.: - learnability - visibility - user control & freedom - errors - efficiency - graphic design - color design Today’s Topics• Coordinate transforms• Clipping• Other useful output techniquesSpring 2008 6.831 User Interface Design and Implementation 3 Today’s lecture is about advanced output techniques. Most of what we’ll talk about is coordinate transforms, which change the coordinate system in which (x,y) coordinates are interpreted. But we’ll also touch on clipping and a few other useful tricks for output, like changing the drawing context that you pass down to your children in order to modify their appearance. Coordinate Transforms• Translation– moves origin by dx, dy• Scaling– multiplies coordinatesby sx, sy•Rotation– rotates by θ around originSpring 2008 6.831 User Interface Design and Implementation 46 Coordinate systems are relevant to all output models. In the component model, every component in a view hierarchy has its own local coordinate system, whose origin is generally at the top left corner of the component, with the y axis increasing down the screen. (Postscript is an exception to this rule; its origin is the bottom left, like conventional Cartesian coordinates.) When you’re drawing a component, you start with the component’s local coordinate system. But you can change this coordinate system (a property of the graphics context) using three transformations: Translation moves the origin, effectively adding (dx,dy) to every coordinate used in subsequent drawing. Scaling shrinks or stretches the axes, effectively multiplying subsequent x coordinates by a scaling factor sx and subsequent y coordinates by sy. Rotation rotates the coordinate system around the origin. Matrix Representation• Normally points in 2D are represented by a two-element vector [x,y]• Transformations are 2x2 matrices• But translation can’t be represented this waySpring 2008 6.831 User Interface Design and Implementation 5xysx00 sysxxsyy=xycosθ sinθ-sinθ cosθScalingRotation These operations are typically represented internally by a transform matrix which can be multiplied by a coordinate vector [x,y] to map it back to the original coordinate system. Scaling and rotation are easy to represent by matrix multiplication, but translation seems harder, since it involves vector addition, not multiplication. Homogeneous Transforms• We can represent all three transforms as matrices if points are three-element vectors [x,y,1]Spring 2008 6.831 User Interface Design and Implementation 61 0 dx0 1 dy0 0 1xy1=x+dxy+dy1Translationsx0 00 sy00 0 1xy1=sxxsyy1Scalingcosθ sinθ 0-sinθ cosθ 00 0 1xy1Rotation Homogeneous transforms offer a way around this problem, allowing translations to be represented homogeneously with the other transforms, so that the effect of a sequence of coordinate transforms can be multiplied together into a single matrix. Homogeneous transforms add a dummy element 1 to each coordinate vector. Common Mistakes in Using Transforms• Transforms affect later drawing, not the current contents of the drawing surfacedrawImage(“bunny.jpg”)scale(2, 2)• Transforms are not commutativetranslate(50,50) scale(2,2)scale(2, 2) translate(25,25)Spring 2008 6.831 User Interface Design and Implementation 7 One misconception in using transforms is that they apply to what you’ve already put on the drawing surface – as if you were doing a rotate, scale, or move operation in a drawing program. That’s not the way it works. Transforms change the coordinate system for subsequent drawing calls. In the example shown here, the bunny already drawn won’t be affected by the later scale() call. Another misconception is that you can freely reorder transforms – e.g., that you can gather up all the translates, scales, and rotates you’ll have to do, and do them in a single place at the beginning of your paint() method. In general, that doesn’t work, because transform operations are not commutative. Transforms of the same type are commutative, of course – two translates can be done in either order, and in fact can trivially be combined into a single translate by adding their components. Likewise, two scaling operations can be commuted (and combined by multiplying), and two rotations can be commuted (or combined by adding the angles). But two operations of different types cannot be done in any order, because the results change depending on the order. Combining Multiple Transforms• Scaling around a point (ox,oy)1. Move the point back to the origintranslate(-ox,-oy)2. Scale relative to the new originscale(sx, sy)3. Move the point back (using the new scale)translate(ox/sx, oy/sy)Spring 2008 6.831 User Interface Design and Implementation 81 0 ox/sx0 1 oy/sy0 0 11 0 -ox0 1 -oy0 0 1xy1sx0 00 sy00 0 1=sx 0 -sxox+ox/sx0 sy-syoy+oy/sy0 0 1xy1 Rotation around a point is similar: first make the point the origin, then rotate, and then move the point back. Undoing the translate is harder, however, so Swing simplifies things by actually giving you a rotate(theta,x,y) method that does all the work. Some Applications of Transforms• Clock facedraw circle(0,0,2r,2r)translate(r, r)for i = 0 to 11 {draw line (r-k, 0, r, 0)rotate(2π/12)}Spring 2008 6.831 User Interface Design and Implementation 9 Transforms can make a lot of drawing easier. For example, if you have to draw the same thing at several places, just write one function that draws the thing at (0,0), and use translate() before each call to the function to put (0,0) in the right place. Here’s a similar example – rather than calculate where the ticks of a clock face should go, just use rotation around the center of the clock face so that you can draw the same tick each time. The radius of the clock face is r, and the length
View Full Document
Unlocking...