Image Layout Algorithms - HTML5 Dev Conf

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Grid Layouts 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Contain Grid iPhoto 5

Slide 6

Slide 6 text

Contain Grid iPhoto 6

Slide 7

Slide 7 text

Contain/Cover Contain Cover 7

Slide 8

Slide 8 text

500px demo 8

Slide 9

Slide 9 text

Patterns Canvas Shapes 9

Slide 10

Slide 10 text

Patterns Results 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Small & big demo 12

Slide 13

Slide 13 text

Initial State 13

Slide 14

Slide 14 text

Add a 2x2 square 14

Slide 15

Slide 15 text

Add a 1x1 square 15

Slide 16

Slide 16 text

Reordering 16

Slide 17

Slide 17 text

Canonical representation 17

Slide 18

Slide 18 text

End result 18

Slide 19

Slide 19 text

Horizontal & Vertical Layouts 19

Slide 20

Slide 20 text

Lightbox demo 20

Slide 21

Slide 21 text

Fill Smallest Column 21

Slide 22

Slide 22 text

Expand to two columns 22

Slide 23

Slide 23 text

Coarse grid 23

Slide 24

Slide 24 text

Flickr demo 24

Slide 25

Slide 25 text

Underlying idea Images Layouts 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Search Tree 27

Slide 28

Slide 28 text

Shortest Path 28

Slide 29

Slide 29 text

Image Equivalent Art Jonak Photos 29

Slide 30

Slide 30 text

Search Tree 30

Slide 31

Slide 31 text

Tree Pruning 31

Slide 32

Slide 32 text

Possible Results 32

Slide 33

Slide 33 text

Irregular Layouts 33

Slide 34

Slide 34 text

Lightbox 34

Slide 35

Slide 35 text

Square root of two = 1.41421 35

Slide 36

Slide 36 text

Holy Grail 36

Slide 37

Slide 37 text

Examples Kristy Mannix Photography Google Search Results 37

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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