Image Layout Algorithms - HTML5 Dev Conf

Transcript

1. Image Layout Algorithms
   Christopher Chedeau
   @vjeux
   blog.vjeux.com/category/image
   

   View Slide

2. Disclaimer: I don’t know
   how the algorithms are
   really implemented, those
   are only my guesses.
   

   View Slide

3. Grid Layouts
   3
   

   View Slide

4. Square Grids
   Windows 3.1 (1992) iOS7 (2013)
   4
   

   View Slide

5. Contain Grid
   iPhoto
   5
   

   View Slide

6. Contain Grid
   iPhoto
   6
   

   View Slide

7. Contain/Cover
   Contain Cover
   7
   

   View Slide

8. 500px demo
   8
   

   View Slide

9. Patterns
   Canvas Shapes
   9
   

   View Slide

10. Patterns
    Results
    10
    

    View Slide

11. Cropping is hard
    Original
    by Austin Thomas
    Vertical Crop
    Horizontal Crop
    ✔
    ✔
    ✗
    ✔
    ✗ ✗ ✗
    ✗
    ✗
    ✔
    11
    

    View Slide

12. Small & big demo
    12
    

    View Slide

13. Initial State
    13
    

    View Slide

14. Add a 2x2 square
    14
    

    View Slide

15. Add a 1x1 square
    15
    

    View Slide

16. Reordering
    16
    

    View Slide

17. Canonical representation
    17
    

    View Slide

18. End result
    18
    

    View Slide

19. Horizontal & Vertical Layouts
    19
    

    View Slide

20. Lightbox demo
    20
    

    View Slide

21. Fill Smallest Column
    21
    

    View Slide

22. Expand to two columns
    22
    

    View Slide

23. Coarse grid
    23
    

    View Slide

24. Flickr demo
    24
    

    View Slide

25. Underlying idea
    Images Layouts
    25
    

    View Slide

26. Text layout
    In olden times when wishing still helped one, there lived a king
    whose daughters were all beautiful; and the youngest was so
    beautiful that the sun itself, which has seen so much, was aston-
    ished whenever it shone in her face. Close by the king’s castle lay
    a great dark forest, and under an old lime-tree in the forest was
    a well, and when the day was very warm, the king’s child went
    out into the forest and sat down by the side of the cool fountain;
    and when she was bored she took a golden ball, and threw it up
    on high and caught it; and this ball was her favorite plaything.
    26
    

    View Slide

27. Search Tree
    27
    

    View Slide

28. Shortest Path
    28
    

    View Slide

29. Image Equivalent
    Art Jonak Photos
    29
    

    View Slide

30. Search Tree
    30
    

    View Slide

31. Tree Pruning
    31
    

    View Slide

32. Possible Results
    32
    

    View Slide

33. Irregular Layouts
    33
    

    View Slide

34. Lightbox
    34
    

    View Slide

35. Square root of two = 1.41421
    35
    

    View Slide

36. Holy Grail
    36
    

    View Slide

37. Examples
    Kristy Mannix Photography
    Google Search Results
    37
    

    View Slide

38. Image Layout Analysis Framework
    Grid, Column, Row, Irregular?
    Fair, Portrait, Landscape
    Crop?
    Predefined sizes, Adjustments
    Resize / Whitespace?
    Contain, Cover
    Human Intervention?
    Fully automatic, manual help
    Sizes?
    Few predefined sizes, Arbitrary based on order
    Order?
    Strictly respected, loosely respected
    Make images bigger?
    All & Any, Only some, None
    Modifications (insert, remove, move)?
    Real time, Not real time
    38
    

    View Slide

39. Questions?
    Christopher Chedeau
    @vjeux
    blog.vjeux.com/category/image
    

    View Slide