1 / 22

Exploring UI Design Principles: Alpha Compositing, Transforms, and Clipping Techniques

In this lecture on UI Design and Implementation, we delve into essential topics such as alpha compositing, transforms, clipping, and painting techniques. We explore the significance of pixel transparency, the use of 32-bit RGBA pixels, and various compositing rules that determine how source and destination pixels are combined. Additionally, we discuss coordinate transformations, common mistakes in using transforms, and their practical applications in UI design. Enhance your understanding of these fundamental principles to create visually appealing and effective user interfaces.

darena
Download Presentation

Exploring UI Design Principles: Alpha Compositing, Transforms, and Clipping Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 11: Output 2 6.831 UI Design and Implementation

  2. UI Hall of Fame or Shame? 6.831 UI Design and Implementation

  3. Today’s Topics • Alpha compositing • Transforms • Clipping • Painting tricks 6.831 UI Design and Implementation

  4. Transparency • Alpha is a pixel’s transparency • from 0.0 (transparent) to 1.0 (opaque) • 32-bit RGBA pixels: each pixel has red, green, blue, and alpha values • Uses for alpha • Antialiasing • Nonrectangular images • Translucent components 6.831 UI Design and Implementation

  5. Antialiasing Antialiased Simple 6.831 UI Design and Implementation

  6. Alpha Compositing • Compositing rules control how source and destination pixels are combined • Source • Image • Stroke drawing calls • Destination • Drawing surface 6.831 UI Design and Implementation

  7. Porter-Duff Alpha Compositing Rules Source pixel [Rs Gs Bs As ] Destination pixel [ Rd Gd Bd Ad ] • Premultiply RGB by A [RGB]s = [RGB]sAs [RGB]d = [RGB]dAd • Compute weighted combination of source and destination pixel [RGBA]d = [RGBA]sfs + [RGBA]dfd for weights fs, fd determined by the compositing rule • Postdivide RGB by A [RGB]d = [RGB]d / Ad unless Ad == 0 6.831 UI Design and Implementation

  8. Simple Copying clear fs=0, fd=0 [RGBA]d = 0 src fs=1, fd=0 [RGBA]d = [RGBA]s dst fs=0, fd=1 [RGBA]d = [RGBA]d 6.831 UI Design and Implementation

  9. Layering src over dst fs=1, fd=1-As [RGBA]d = [RGBA]s + [RGBA]d(1-As) dst over src fs=1-Ad, fd=1 [RGBA]d = [RGBA]d + [RGBA]s(1-Ad) 6.831 UI Design and Implementation

  10. Masking src in dst [RGBA]d = [RGBA]sAd dst in src [RGBA]d = [RGBA]dAs src out dst [RGBA]d = [RGBA]s(1-Ad) dst out src [RGBA]d = [RGBA]d(1-As) 6.831 UI Design and Implementation

  11. Other Masking src atop dst [RGBA]d = [RGBA]sAd + [RGBA]d(1-As) dst atop src [RGBA]d = [RGBA]s(1-Ad) + [RGBA]dAs src xor dst [RGBA]d = [RGBA]s(1-Ad) + [RGBA]d(1-As) 6.831 UI Design and Implementation

  12. Coordinate Transforms • Translation • moves origin by dx, dy • Scaling • multiplies coordinatesby sx, sy • Rotation • rotates by θ around origin 6 6 6.831 UI Design and Implementation

  13. sxx syy x y x y cosθ sinθ -sinθ cosθ sx 0 0 sy 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 way Scaling Rotation = 6.831 UI Design and Implementation

  14. x+dx y+dy 1 x y 1 x y 1 x y 1 sxx syy 1 cosθ sinθ 0 -sinθ cosθ 0 0 0 1 1 0 dx 0 1 dy 0 0 1 sx 0 0 0 sy 0 0 0 1 Homogeneous Transforms • We can represent all three transforms as matrices if points are three-element vectors [x,y,1] Translation = Scaling Rotation = 6.831 UI Design and Implementation

  15. Common Mistakes in Using Transforms • Transforms affect later drawing, not the current contents of the drawing surface drawImage(“bunny.jpg”) scale(2, 2) • Transforms are not commutative translate(50,50) scale(2,2) scale(2, 2) translate(25,25) 6.831 UI Design and Implementation

  16. x y 1 x y 1 1 0 -ox 0 1 -oy 0 0 1 sx 0 -sxox+ox/sx 0 sy -syoy+oy/sy 0 0 1 1 0 ox/sx 0 1 oy/sy 0 0 1 sx 0 0 0 sy 0 0 0 1 Combining Multiple Transforms • Scaling around a point (ox,oy) 1. Move the point back to the origin translate(-ox,-oy) 2. Scale relative to the new origin scale(sx, sy) 3. Move the point back (using the new scale) translate(ox/sx, oy/sy) = 6.831 UI Design and Implementation

  17. Some Applications of Transforms • Clock face draw circle(0,0,2r,2r) translate(r, r) for i = 0 to 11 { draw line (r-k, 0, r, 0) rotate(2π/12) } 6.831 UI Design and Implementation

  18. Some Applications of Transforms • Standard Cartesian origin translate(0, height) scale(1, -1) 6.831 UI Design and Implementation

  19. Some Applications of Transforms • Drawing in inches rather than pixels dpi = pixels per inch scale(dpi, dpi) 6.831 UI Design and Implementation

  20. Clipping • Rectangular clipping regions setClip(x,y,w,h) drawString(“hello”) • Stroke-based clipping setClip(new Circle(x, y, w, h)) drawString(“hello”) • Pixel-based clipping drawImage(“bunny.jpg”) setComposite(src in dst) drawString(“hello”) hello hello hello 6.831 UI Design and Implementation

  21. Component Model Effects • Changing Graphics passed to children • Transforms: rotation, zooming • Clipping: setting new clipping regions • Wrapping Graphics passed to children • Intercept child calls and modify or capture them • Painting onto offscreen images and then transforming the images • Blur, shimmer, masking • Using components as rubber stamps • Table, list, and tree cell renderers 6.831 UI Design and Implementation

  22. Scene Graphs • Traditional 2D toolkits are limited in many ways • View hierarchy is a tree (can’t share views) • Parents must enclose descendents (and clip them) • Parents translate children, but don’t otherwise transform them • Piccolo toolkit (designed for zooming user interfaces) • View hierarchy is actually a graph, not merely a tree • Components can translate, rotate, scale their children • Parents transform but don’t clip their children by default • Input events and repaint requests are transformed too 6.831 UI Design and Implementation

More Related