1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser...
-
Upload
lester-anderson -
Category
Documents
-
view
221 -
download
6
Transcript of 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser...
![Page 1: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/1.jpg)
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
![Page 2: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/2.jpg)
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
![Page 3: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/3.jpg)
3
The Resizing Problem
Fixedsize
Naivescaling
Common resizing
![Page 4: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/4.jpg)
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
![Page 5: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/5.jpg)
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
![Page 6: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/6.jpg)
6
Expressing Resizing
Layout design relies on perception and aesthetics
Does not translate into simple formulae
![Page 7: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/7.jpg)
7
Artistic Resizing
1. Designers produce variants using their authoring tool
2. IntuiKit interprets the example set
![Page 8: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/8.jpg)
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
![Page 9: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/9.jpg)
9
Artistic Resizing A scenario
![Page 10: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/10.jpg)
10
Artistic Resizing A scenario
![Page 11: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/11.jpg)
11
Artistic Resizing A scenario
![Page 12: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/12.jpg)
12
Artistic Resizing A scenario
![Page 13: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/13.jpg)
13
Artistic Resizing A scenario
![Page 14: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/14.jpg)
14
Artistic Resizing A scenario
![Page 15: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/15.jpg)
15
Artistic Resizing A scenario
![Page 16: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/16.jpg)
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’
![Page 17: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/17.jpg)
17
Artistic Resizing How does it work?
Each variant of T1 is associated withthe example’s bounding box
T1 T1’
?
T1’’ T1’’’
![Page 18: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/18.jpg)
18
Artistic Resizing How does it work?
Problem of multivariate interpolation
width
height
T1’
T1’’’
T1’’
transf.
T1
?
![Page 19: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/19.jpg)
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
=
![Page 20: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/20.jpg)
20
Orthogonal Interpolation hypothesis: Width only impacts the X contribution Height only impacts the Y contribution
Artistic Resizing Orthogonal Interpolation
a11 a12 a13
a21 a22 a23
0 0 1
X
Y
1
X0
Y0
1
=
width
height
![Page 21: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/21.jpg)
21
Artistic Resizing Orthogonal Interpolation
X and Y contributions are projected onto separate axis:
width
T1
a11 a12 a13
a21a22
a23
height
X transf. Y transf.
![Page 22: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/22.jpg)
22
A piecewise linear interpolation is performed on each axis:
Artistic Resizing Orthogonal Interpolation
width
height
X transf. Y transf.
→+ a11 a12 a13
a21a22
a23 a11 a12 a13
a21 a22 a23
0 0 1
T
![Page 23: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/23.jpg)
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
![Page 24: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/24.jpg)
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
![Page 25: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/25.jpg)
25
Artistic Resizing Properties of Orthogonal Interpolation
Preserves relative ratios: Ratios that are invariant on the examples
will remain invariant
![Page 26: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/26.jpg)
26
Artistic Resizing Properties of Orthogonal Interpolation
Preserves contacts: Two points that coincide on the examples
will always coincide
![Page 27: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/27.jpg)
27
Artistic Resizing Properties of Orthogonal Interpolation
Preserves parallelism: Two lines that are parallel on the examples
will remain parallel
![Page 28: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/28.jpg)
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
![Page 29: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/29.jpg)
29
Artistic Resizing Limitations of Orthogonal Interpolation
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
![Page 30: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/30.jpg)
30
Artistic Resizing Limitations of Orthogonal Interpolation
Does not support pure rotations: Rotation = Xshear + Yshear
![Page 31: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/31.jpg)
31
Artistic Resizing Limitations of Orthogonal Interpolation
Dependent from the coordinates frame: Interpolation properties depend on the orientation
![Page 32: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/32.jpg)
32
Artistic Resizing Limitations of Orthogonal Interpolation
Does not support cross-axis constraints: No circles, squares, or «squeezing» effects
![Page 33: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/33.jpg)
33
Artistic Resizing Limitations of Orthogonal Interpolation
Does not support high-level constraints: e.g., objects can’t be told to « carriage return »
![Page 34: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/34.jpg)
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
![Page 35: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/35.jpg)
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
![Page 36: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/36.jpg)
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
![Page 37: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/37.jpg)
37
Artistic Resizing Future Work
More extensive support for SVG attributes
Support for parametrization
Blending with traditional layout managers:
Testing with graphical designers
![Page 38: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/38.jpg)
38
Artistic Resizing Future Work
More extensive support for SVG attributes
Support for parametrization
Blending with traditional layout managers:
Testing with graphical designers
![Page 39: 1 Artistic Resizing A Technique for Rich Scale-Sensitive Vector Graphics Merci de ne pas diffuser avant le 30 octobre 05 (brevet en cours) Pierre Dragicevic.](https://reader036.fdocuments.in/reader036/viewer/2022081519/56649f455503460f94c67653/html5/thumbnails/39.jpg)
39
Artistic Resizing
Questions ?