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 Stéphane Chatty David Thevenin Jean-Luc Vinot Direction Générale de l’Aviation Civile

2. 2 Graphical designers are given more and more importance in GUIs Exploitation of vector graphics (e.g, Scalable Vector Graphics) IntuiKit [Chatty et al, UIST’04] Graphically Rich User Interfacs

3. 3 The Resizing Problem Fixed size Naive scaling Common resizing

4. 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 wLwL hLhL yLyL xLxL r hBhB wBwB  x L = (w-w L ) / 2  y L = (h-h L ) / 2  w L = 20  h L = 10  w B = 5  h B = 5  r = 20

5. 5 Expressing Resizing But designers think visually They are used to produce visual declinations Variants are also useful to convey general laws On white paper On black paper On red paper Medium size Small size

6. 6 Expressing Resizing Layout design relies on perception and aesthetics Does not translate into simple formulae

7. 7 Artistic Resizing 1. Designers produce variants using their authoring tool 2. IntuiKit interprets the example set

8. 8 Artistic Resizing Support for invariants but also for complex laws w h wLwL hLhL yLyL xLxL r hBhB wBwB  x L = (w-w L ) / 2  y L = (h-h L ) / 2  w L = 20  h L = 10  w B = 5  h B = 5  r = 20

9. 9 Artistic Resizing A scenario

10. 10 Artistic Resizing A scenario

11. 11 Artistic Resizing A scenario

12. 12 Artistic Resizing A scenario

13. 13 Artistic Resizing A scenario

14. 14 Artistic Resizing A scenario

15. 15 Artistic Resizing A scenario

16. 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 T1T1 T1’T1’

17. 17 Artistic Resizing How does it work? Each variant of T1 is associated with the example’s bounding box T1T1 T1’T1’ ? T 1 ’’ T 1 ’’’

18. 18 Artistic Resizing How does it work? Problem of multivariate interpolation width height T1’T1’ T 1 ’’’ T 1 ’’ transf. T1T1 ?

19. 19 An affine transformation matrix: Artistic Resizing Orthogonal Interpolation a 11 a 12 a 13 a 21 a 22 a 23 0 0 1 T1T1 X Y 1 X0X0 Y0Y0 1 =

20. 20 Orthogonal Interpolation hypothesis: Width only impacts the X contribution Height only impacts the Y contribution Artistic Resizing Orthogonal Interpolation a 11 a 12 a 13 a 21 a 22 a 23 0 0 1 X Y 1 X0X0 Y0Y0 1 = width height

21. 21 Artistic Resizing Orthogonal Interpolation X and Y contributions are projected onto separate axis: width T1T1 a 11 a 12 a 13 a 21 a 22 a 23 height X transf. Y transf.

22. 22 A piecewise linear interpolation is performed on each axis: Artistic Resizing Orthogonal Interpolation width height X transf. Y transf. → + a 11 a 12 a 13 a 21 a 22 a 23 a 11 a 12 a 13 a 21 a 22 a 23 0 0 1 T

23. 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 T1T1 T1’T1’ T2T2 T2’T2’ p1 p2 p1 T T’ g g p2 p1 p2 p1 

24. 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. 25 Artistic Resizing Properties of Orthogonal Interpolation Preserves relative ratios: Ratios that are invariant on the examples will remain invariant

26. 26 Artistic Resizing Properties of Orthogonal Interpolation Preserves contacts: Two points that coincide on the examples will always coincide

27. 27 Artistic Resizing Properties of Orthogonal Interpolation Preserves parallelism: Two lines that are parallel on the examples will remain parallel

28. 28 Artistic Resizing Limitations of Orthogonal Interpolation Does not support composition: Composing interpoled transformations may lead to non-linear resizing behaviors T1T1 T 2 = Scale(1) T 3 = Scale(1) T4T4 T1T1 T 2 = Scale(0.1) T 3 = Scale(20) T4T4 Scale = 1 Scale = 2 A B  T1T1 T 2 = Scale(0.55) T 3 = Scale(10.5) T4T4 Scale = 5.775 ( A + B )/ 2 

29. 29 Artistic Resizing Limitations of Orthogonal Interpolation Does not support composition: Scenegraphs must be normalized by pre-composing transformation matrices T1T1 T2T2 T 3 = Scale(1) T4T4 T1T1 T2T2 T 3 = Scale(2) T4T4 Scale = 1 Scale = 2 A B T1T1 T2T2 T 3 = Scale(1.5) T4T4 Scale = 1.5 ( A + B )/ 2  

30. 30 Artistic Resizing Limitations of Orthogonal Interpolation Does not support pure rotations: Rotation = Xshear + Yshear

31. 31 Artistic Resizing Limitations of Orthogonal Interpolation Dependent from the coordinates frame: Interpolation properties depend on the orientation

32. 32 Artistic Resizing Limitations of Orthogonal Interpolation Does not support cross-axis constraints: No circles, squares, or «squeezing» effects

33. 33 Artistic Resizing Limitations of Orthogonal Interpolation Does not support high-level constraints: e.g., objects can’t be told to « carriage return »

34. 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. 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. 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. 37 Artistic Resizing Future Work More extensive support for SVG attributes Support for parametrization Blending with traditional layout managers: Testing with graphical designers

38. 38 Artistic Resizing Future Work More extensive support for SVG attributes Support for parametrization Blending with traditional layout managers: Testing with graphical designers

39. 39 Artistic Resizing Questions ?