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

Image Layout Algorithms - HTML5 Dev Conf

48a313e2ad9f47036b3a4d073cef3e54?s=47 vjeux
October 24, 2013

Image Layout Algorithms - HTML5 Dev Conf

48a313e2ad9f47036b3a4d073cef3e54?s=128

vjeux

October 24, 2013
Tweet

Transcript

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

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

    those are only my guesses.
  3. Grid Layouts 3

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

  5. Contain Grid iPhoto 5

  6. Contain Grid iPhoto 6

  7. Contain/Cover Contain Cover 7

  8. 500px demo 8

  9. Patterns Canvas Shapes 9

  10. Patterns Results 10

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

    Crop ✔ ✔ ✗ ✔ ✗ ✗ ✗ ✗ ✗ ✔ 11
  12. Small & big demo 12

  13. Initial State 13

  14. Add a 2x2 square 14

  15. Add a 1x1 square 15

  16. Reordering 16

  17. Canonical representation 17

  18. End result 18

  19. Horizontal & Vertical Layouts 19

  20. Lightbox demo 20

  21. Fill Smallest Column 21

  22. Expand to two columns 22

  23. Coarse grid 23

  24. Flickr demo 24

  25. Underlying idea Images Layouts 25

  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
  27. Search Tree 27

  28. Shortest Path 28

  29. Image Equivalent Art Jonak Photos 29

  30. Search Tree 30

  31. Tree Pruning 31

  32. Possible Results 32

  33. Irregular Layouts 33

  34. Lightbox 34

  35. Square root of two = 1.41421 35

  36. Holy Grail 36

  37. Examples Kristy Mannix Photography Google Search Results 37

  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
  39. Questions? Christopher Chedeau @vjeux blog.vjeux.com/category/image