Lecture 11: Output 2

1
Lecture 11 Output 2
2
UI Hall of Fame or Shame?
3
Todays Topics

• Alpha compositing
• Transforms
• Clipping
• Painting tricks

4
Transparency

• Alpha is a pixels 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

5
Antialiasing
Antialiased
Simple
6
Alpha Compositing

• Compositing rules control how source and
  destination pixels are combined
• Source
• Image
• Stroke drawing calls
• Destination
• Drawing surface

7
Porter-Duff Alpha Compositing Rules

• Source pixel Rs Gs Bs As
• Destination pixel Rd Gd Bd Ad
• Premultiply RGB by A
• RGBs RGBsAs
• RGBd RGBdAd
• Compute weighted combination of source and
  destination pixel
• RGBAd RGBAsfs RGBAdfd
• for weights fs, fd determined by the compositing
  rule
• Postdivide RGB by A
• RGBd RGBd / Ad unless Ad 0

8
Simple Copying

• clear fs0, fd0
• RGBAd 0
• src fs1, fd0
• RGBAd RGBAs
• dst fs0, fd1
• RGBAd RGBAd

9
Layering

• src over dst fs1, fd1-As
• RGBAd
• RGBAs RGBAd(1-As)
• dst over src fs1-Ad, fd1
• RGBAd
• RGBAd RGBAs(1-Ad)

10
Masking

• src in dst
• RGBAd RGBAsAd
• dst in src
• RGBAd RGBAdAs
• src out dst
• RGBAd RGBAs(1-Ad)
• dst out src
• RGBAd RGBAd(1-As)

11
Other Masking

• src atop dst
• RGBAd
• RGBAsAd RGBAd(1-As)
• dst atop src
• RGBAd
• RGBAs(1-Ad) RGBAdAs
• src xor dst
• RGBAd
• RGBAs(1-Ad) RGBAd(1-As)

12
Coordinate Transforms

• Translation
• moves origin by dx, dy
• Scaling
• multiplies coordinatesby sx, sy
• Rotation
• rotates by ? around origin

6
6
13
Matrix Representation

• Normally points in 2D are represented by a
  two-element vector x,y
• Transformations are 2x2 matrices
• But translation cant be represented this way

Scaling
Rotation

14
Homogeneous Transforms

• We can represent all three transforms as matrices
  if points are three-element vectors x,y,1

Translation

Scaling
Rotation

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)

16
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)

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(2p/12)

18
Some Applications of Transforms

• Standard Cartesian origin
• translate(0, height)
• scale(1, -1)

19
Some Applications of Transforms

• Drawing in inches rather than pixels
• dpi pixels per inch
• scale(dpi, dpi)

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
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

22
Scene Graphs

• Traditional 2D toolkits are limited in many ways
• View hierarchy is a tree (cant share views)
• Parents must enclose descendents (and clip them)
• Parents translate children, but dont 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 dont clip their children
  by default
• Input events and repaint requests are transformed
  too