Artistic Resizing A Technique for Rich ScaleSensitive Vector Graphics

1
Artistic ResizingA Technique for
RichScale-Sensitive Vector Graphics

• Pierre Dragicevic
• Stéphane Chatty
• David Thevenin
• Jean-Luc Vinot

Direction Générale de lAviation Civile
2
Graphically Rich User Interfaces

• Graphic designers are given moreand more
  importance in GUIs
• Exploitation of vector graphics(e.g, Scalable
  Vector Graphics)
• IntuiKit Chatty et al, UIST04

3
The Resizing Problem

• Fixedsize
• Naivescaling
• Common resizing

4
Expressing Resizing

• Resizing is commonly described using formulae
• These formulae are
• Translated into code by the programmer
• Or used as an input to constraint-solving systems

5
Expressing Resizing

• But designers think visually
• They are used to produce visual variants
• Variants are also useful to convey general laws

On whitepaper
Smallsize
On blackpaper
Mediumsize
On redpaper
6
Expressing Resizing

• Layout design relies on perception and aesthetics
• Does not translate into simple formulae

7
Artistic Resizing

• Designers produce variants using their
  authoring tool

• IntuiKit interprets the example set

8
Artistic Resizing

• Supports invariants but also finely tuned
  behaviors

9
Artistic Resizing A scenario
10
Artistic Resizing A scenario
11
Artistic Resizing A scenario
12
Artistic Resizing A scenario
13
Artistic Resizing A scenario
14
Artistic Resizing A scenario
15
Artistic Resizing A scenario
?
16
Artistic Resizing How does it work?

• Assumes the exclusive use of
• Copy paste for adding new examples
• Affine transformation tools (move, scale, rotate,
  shear)
• Based on local interpolation of transformations

17
Artistic Resizing How does it work?

• Each variant of T1 is associated withthe
  examples bounding box

T1
T1
T1
T1
18
Artistic Resizing How does it work?

• Problem of multivariate interpolation

T1
T1
height
T1
?
transf.
T1
width
19
Artistic Resizing Orthogonal Interpolation

• An affine transformation matrix

T1
a13
a12
a11
X
X0
a22
a23
a21

Y
Y0
1
0
0
1
1
20
Artistic Resizing Orthogonal Interpolation

• Orthogonal Interpolation hypothesis
• Width only impacts the X contribution
• Height only impacts the Y contribution

a13
a12
width
a11
X
X0
a22
a23
height
a21

Y
Y0
1
0
0
1
1
21
Artistic Resizing Orthogonal Interpolation

• X and Y contributions are projected onto separate
  axis

height
T1
Y transf.
X transf.
width
22
Artistic Resizing Orthogonal Interpolation

• A piecewise linear interpolation is performed on
  each axis

height
Y transf.
X transf.
width
T
?

23
Artistic Resizing Properties of Orthogonal
Interpolation

• Structure-independent
• The interpolation is independent from the
  waypoints have been structured into shapes and
  groups
• (Sodipodi)
  (Illustrator)

T
T
T1
T2
T2
T1
g
g
p2
p1
p1
p2
p1
p2
p2
p1
?
24
Artistic Resizing Properties of Orthogonal
Interpolation

• Preserves algebraic measures
• If horizontal or vertical distances are the same
  on the examples they will remain the same

25
Artistic Resizing Properties of Orthogonal
Interpolation

• Preserves relative ratios
• Ratios that are invariant on the exampleswill
  remain invariant

26
Artistic Resizing Properties of Orthogonal
Interpolation

• Preserves contacts
• Two points that coincide on the exampleswill
  always coincide

27
Artistic Resizing Properties of Orthogonal
Interpolation

• Preserves parallelism
• Two lines that are parallel on the exampleswill
  remain parallel

28
Artistic Resizing Limitations of Orthogonal
Interpolation

• Does not support composition
• Composing interpoled transformations may lead to
  non-linear resizing behaviors

B
A
T1
T1
T2 Scale(0.1)
T2 Scale(1)
T3 Scale(20)
T3 Scale(1)
T4
T4
Scale 1
Scale 2
29
Artistic Resizing Limitations of Orthogonal
Interpolation

• Does not support composition
• Scenegraphs must be normalized by pre-composing
  transformation matrices

B
A
T1
T1
T2
T2
T3 Scale(2)
T3 Scale(1)
T4
T4
Scale 1
Scale 2
30
Artistic Resizing Limitations of Orthogonal
Interpolation

• Does not support pure rotations
• Rotation Xshear Yshear

31
Artistic Resizing Limitations of Orthogonal
Interpolation

• Dependent from the coordinates frame
• Interpolation properties depend on the orientation

32
Artistic Resizing Limitations of Orthogonal
Interpolation

• Does not support cross-axis constraints
• No circles, squares, or squeezing effects

33
Artistic Resizing Limitations of Orthogonal
Interpolation

• Does not support high-level constraints
• e.g., objects cant be told to  carriage return 

34
Artistic Resizing vs. Animation Interpolation

• Techniques
• Separate storage of rotation (Flash, Director,)
• Polar decomposition Shoemake et al. 92
• Animation
• Monovariate (time)
• Axis-independence
• Objects rotate (rigidity)
• Can be precomputed

• GUI Resizing
• Bivariate (widthheight)
• Screen dependence
• Objects are  elastic 
• Must update interactively

35
Artistic Resizing vs. Constraint Inference

• Demonstrational layout specification systems
• Peridot Myers 90
• Chimera Kurlander Feiner 93
• Constraint inference
• Extensive searchfor invariants
• Sensitive to combi-natorial explosion
• Over-constrained orunintended rules

• Orthogonal interpolation
• Ensures the preservation of  interesting 
  invariants
• Fast computation, even with complex vector
  graphics
• Limitations are known, results are easy to predict

36
Artistic Resizing Other Related Work

• Layout models
• Boxes and glue (TeX, Swing,)
• 9-part tiling technique Hudson Tanaka 00
• Constraints
• Textual formulae
• Graphical frontendsHudson Mohamed 90
• Image interpolation
• Multiple Master Fonts
• Shape blending, image morphing

37
Artistic Resizing Ongoing Future Work

• Interpolation of attributes and structure
• Support for parameterization
• Blending with traditional layout managers
• Testing with graphic designers

38
Artistic Resizing Ongoing Future Work

• Interpolation of attributes and structure
• Support for parameterization
• Blending with traditional layout managers
• Testing with graphic designers

39
Artistic Resizing

• Thank you.

http//www.intuilab.com/artresize