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 full-size slide

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

    View full-size slide

  3. Grid Layouts
    3

    View full-size slide

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

    View full-size slide

  5. Contain Grid
    iPhoto
    5

    View full-size slide

  6. Contain Grid
    iPhoto
    6

    View full-size slide

  7. Contain/Cover
    Contain Cover
    7

    View full-size slide

  8. Patterns
    Canvas Shapes
    9

    View full-size slide

  9. Patterns
    Results
    10

    View full-size slide

  10. Cropping is hard
    Original
    by Austin Thomas
    Vertical Crop
    Horizontal Crop




    ✗ ✗ ✗



    11

    View full-size slide

  11. Small & big demo
    12

    View full-size slide

  12. Initial State
    13

    View full-size slide

  13. Add a 2x2 square
    14

    View full-size slide

  14. Add a 1x1 square
    15

    View full-size slide

  15. Reordering
    16

    View full-size slide

  16. Canonical representation
    17

    View full-size slide

  17. End result
    18

    View full-size slide

  18. Horizontal & Vertical Layouts
    19

    View full-size slide

  19. Lightbox demo
    20

    View full-size slide

  20. Fill Smallest Column
    21

    View full-size slide

  21. Expand to two columns
    22

    View full-size slide

  22. Coarse grid
    23

    View full-size slide

  23. Flickr demo
    24

    View full-size slide

  24. Underlying idea
    Images Layouts
    25

    View full-size slide

  25. 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 full-size slide

  26. Search Tree
    27

    View full-size slide

  27. Shortest Path
    28

    View full-size slide

  28. Image Equivalent
    Art Jonak Photos
    29

    View full-size slide

  29. Search Tree
    30

    View full-size slide

  30. Tree Pruning
    31

    View full-size slide

  31. Possible Results
    32

    View full-size slide

  32. Irregular Layouts
    33

    View full-size slide

  33. Square root of two = 1.41421
    35

    View full-size slide

  34. Holy Grail
    36

    View full-size slide

  35. Examples
    Kristy Mannix Photography
    Google Search Results
    37

    View full-size slide

  36. 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 full-size slide

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

    View full-size slide