Image Layout Algorithms - HTML5 Dev Conf

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