1 artistic resizing a technique for rich scale-sensitive vector graphics merci de ne pas diffuser...

1

Artistic Resizing

A Technique for RichScale-Sensitive Vector Graphics

Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours)

Pierre Dragicevic

Stéphane Chatty

David Thevenin

Jean-Luc VinotDirection

Générale de l’Aviation

Civile

2

Graphical designers are given moreand more importance in GUIs

Exploitation of vector graphics(e.g, Scalable Vector Graphics)

IntuiKit [Chatty et al, UIST’04]

Graphically Rich User Interfacs

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

w

h

wL

hL

yL

xLr

hB

wB

xL = (w-wL) / 2 yL = (h-hL) / 2 wL = 20 hL = 10

wB = 5 hB = 5

r = 20

5

Expressing Resizing

But designers think visually

They are used to produce visual declinations

Variants are also useful to convey general laws

On whitepaper

On blackpaper

On redpaper

Mediumsize

Smallsize

6

Expressing Resizing

Layout design relies on perception and aesthetics

Does not translate into simple formulae

7

Artistic Resizing

1. Designers produce variants using their authoring tool

2. IntuiKit interprets the example set

8

Artistic Resizing

Support for invariants but also for complex laws

w

h

wL

hL

yL

xLr

hB

wB xL = (w-wL) / 2 yL = (h-hL) / 2 wL = 20 hL = 10

wB = 5 hB = 5

r = 20

9

Artistic Resizing A scenario

10


11


12


13


14


15


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

T1 T1’

17


Each variant of T1 is associated withthe example’s bounding box

T1 T1’

?

T1’’ T1’’’

18


Problem of multivariate interpolation

width

height

T1’

T1’’’

T1’’

transf.

T1

?

19

An affine transformation matrix:

Artistic Resizing Orthogonal Interpolation

a11 a12 a13

a21 a22 a23

0 0 1

T1

X

Y

1

X0

Y0

1

=

20

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


a11 a12 a13

a21 a22 a23

0 0 1

X

Y

1

X0

Y0

1

=

width

height

21


X and Y contributions are projected onto separate axis:

width

T1

a11 a12 a13

a21a22

a23

height

X transf. Y transf.

22

A piecewise linear interpolation is performed on each axis:


width

height

X transf. Y transf.

→+ a11 a12 a13

a21a22

a23 a11 a12 a13

a21 a22 a23

0 0 1

T

23

Artistic Resizing Properties of Orthogonal Interpolation

Structure-independent: The interpolation is independent from the way

points have been structured into shapes and groups

(Sodipodi) (Illustrator)

p2

T1 T1’T2 T2’

p1 p2 p1

T T’

g g

p2p1 p2 p1

24


Preserves algebraic measures: If horizontal or vertical distances are the same on the

examples they will remain the same

25


Preserves relative ratios: Ratios that are invariant on the examples

will remain invariant

26


Preserves contacts: Two points that coincide on the examples

will always coincide

27


Preserves parallelism: Two lines that are parallel on the examples

will remain parallel

28

Artistic Resizing Limitations of Orthogonal Interpolation

Does not support composition: Composing interpoled transformations may lead to

non-linear resizing behaviors

T1

T2 = Scale(1)

T3 = Scale(1)

T4

T1

T2 = Scale(0.1)

T3 = Scale(20)

T4

Scale = 1Scale = 2

A BT1

T2 = Scale(0.55)

T3 = Scale(10.5)

T4

Scale = 5.775

(A+B)/2

29


Does not support composition: Scenegraphs must be normalized by pre-composing

transformation matrices

T1

T2

T3 = Scale(1)

T4

T1

T2

T3 = Scale(2)

T4

Scale = 1Scale = 2

A B

T1

T2

T3 = Scale(1.5)

T4

Scale = 1.5

(A+B)/2

30


Does not support pure rotations: Rotation = Xshear + Yshear

31


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

32


Does not support cross-axis constraints: No circles, squares, or «squeezing» effects

33


Does not support high-level constraints: e.g., objects can’t 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 (width+height) Screen dependence Objects are « elastic » Must update interactively

35

Demonstrational layout specification systems: Peridot [Myers 90] Chimera [Kurlander & Feiner 93]

Constraint inference: Extensive search

for invariants Sensitive to combi-

natorial explosion Over-constrained or

unintended rules

Artistic Resizing vs. Constraint Inference

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 frontends

[Hudson & Mohamed 90]

Image interpolation: Multiple Master Fonts Shape blending, image morphing

37

Artistic Resizing Future Work

More extensive support for SVG attributes

Support for parametrization

Blending with traditional layout managers:

Testing with graphical designers

38

Artistic Resizing Future Work

More extensive support for SVG attributes

Support for parametrization

Blending with traditional layout managers:

Testing with graphical designers

39

Artistic Resizing

Questions ?

1 artistic resizing a technique for rich scale-sensitive vector graphics merci de ne pas diffuser...

Documents

resizing resizing

scenario slide

artistic resizing support

width height slide

resizing layout design

laviation civile slide

t1t1 x y

rich user interfacs