

JQuery plugin to arrange images using knapsack algorithm - sushi
https://github.com/heroic/Rucksack

======
vog
Great idea! However, the term "knapsack algorithm" is quite misleading.

There is the "knapsack problem", but there are various different algorithms to
solve it. Which of those has been used? Why this and not another algorithm?
All those questions are concealed behind the squishy term "knapsack algoritm".

~~~
gauravsc
We have used Knapsack 0-1 algorithm, since in our case images had different
widths but the same height, we wanted to fit in as many images as possible so
that they fit in the best way possible. We gave value 1 to each image and
weight equal to width and use the total width of container of images as the
maximum weight allowed.

~~~
jahewson
Knapsack 0-1 is a (special case) _problem_ , not an algorithm.

~~~
gauravsc
Well as far as my knowledge goes, any sequence of steps to solve a problem is
an algorithm(some are simple algorithms and some are complex). In our case we
couldn't use fractional knapsack since we couldn't break images.

~~~
jahewson
Yes, the steps used to solve the problem are indeed the algorithm... But the
question stands: what algorithm did you use?

------
omgmog
Whipped up a quick example, it seems to re-order the images in a way to fit
the most it can on each row given the width constraints and the width of each
image - <http://jsfiddle.net/vXbCY/>

~~~
heroic
Thanks! Mind if I include this on the github link?

~~~
omgmog
go for it :)

------
zsherman
I wish there was a quick link to an example.

~~~
jmathai
<https://github.com/heroic/Rucksack/issues/1>

~~~
heroic
Hi! I am the author of the plugin. Thanks for the issue. Creating an example
for you guys right away :)

~~~
jmathai
Too slow. Pull request submitted :)

------
riffraff
what is the "knapsack algorithm" ?

I understand how arranging images may be a "knapsack problem" but I can't
pinpoint what _the algorithm_ is supposed to be.

~~~
gauravsc
Plugin co-author: I have answered it in the above comments, see if that
suffices.

~~~
ColinWright
No, it doesn't suffice. You are using an undescribed and unspecified algorithm
to solve a specific instance of the Knapsack Problem.

To the best of my knowledge there is no such thing as "The Knapsack
Algorithm." (Except in the (now broken) Knapsack Public Key Encryption system)

The only references I've found in a quick search either incorrectly use the
term "Knapsack Algorithm" when they actually mean "Knapsack Problem," or they
simply refer to the obvious depth-first recursive search.

So the question remains - what algorithm are you using? Depth-first search?
Dynamic programming? Greedy algorithm with heuristics and early cut-off?
Simulated Annealing? Hill-Climbing? All of these can be used to find good
solutions to an instance of the Knapsack Problem.

The auxiliary question: Given that the Knapsack Problem has been shown to be
NP-Complete, what will your code do when given a hard instance?

~~~
gauravsc
We are using Dynamic programming and you are correct, knapsack is a problem
but since the most common solution(and widely used) is using DP, we sometimes
intermittently use the term Knapsack algorithm with DP algorithm to solve
Knapsack problem.

~~~
ColinWright
Right, that makes sense. Thank you.

What would happen if I encoded a large integer factorization instance into a
Knapsack Problem and called your system?

~~~
DennisP
Given that it's a jquery plugin, you'd probably get a "script on this page is
running slowly" message.

~~~
vog
This answer completely misses the point. Of course the algorithm could run
"forever", thus triggering browser timeouts.

But it could as well terminate early, providing a suboptimal but fast
solution.

------
jmathai
I believe this is similar to the layout used for G+ photos and Flickr's new
justified view. Am I right?

We adapted the script below for <http://current.openphoto.me/photo/list> \---
curious to check this out as well.

[http://www.techbits.de/2011/10/25/building-a-google-plus-
ins...](http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-
image-gallery/)

~~~
true_religion
It's similar but not the same.

The Google+ and Google Image Search will resize and crop the image by width to
fit a specified row, greedily optimizing for the maximum number of images per
row.

Interesting you bring up [1] because I used a variation of that technique in
my own site [2].

You can greatly simplify things if you resize all the images on the backend to
the same width, then all you have to do is crop in the frontend to the minimum
height in a row.

The trade off is the distortion happens by height rather than width, so you
could end up cutting off someones head in a photo-gallery.

My patchwork solution now is to approximate the cropping that would be done in
the rule of 3rds with a certain offset (so we lose dead space at the top).

A better technique would be to dynamically determine where a face was in the
picture, and center on that. This plugin might help but you'd be better off
passing that information from the backend. [3]

[1] [http://www.techbits.de/2011/10/25/building-a-google-plus-
ins...](http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-
image-gallery/)

[2] <http://www.picociti.com>

[3] <http://facedetection.jaysalvat.com/>

------
moe
Aren't most (all?) knapsack solvers greedy?

That doesn't seem like a good idea just to arrange some images (battery
killer?).

------
gauravsc
Plugin co-author here: One more possible extension of this algo would be to
use value of each image equal to the weight of each image. This would ensure
best fit and would be one more way to make things look beautiful and arranged.

------
dangoldin
Pretty interesting stuff. Have you heard of the Isotope jQuery library? It
does something similar.

How is the performance on this one?

~~~
heroic
The isotope library is based on the masonry library, which will not work like
rucksack to arrange items that have random width.

