Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Image Layout Algorithms - HTML5 Dev Conf

vjeux
October 24, 2013

Image Layout Algorithms - HTML5 Dev Conf

vjeux

October 24, 2013
Tweet

More Decks by vjeux

Other Decks in Programming

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