JQuery plugin to arrange images using knapsack algorithm

https://github.com/heroic/Rucksack

by sushi • 14 years ago

46 28 14 years ago

github.com

zsherman• 14 years ago

I wish there was a quick link to an example.

jmathai4• 14 years ago

https://github.com/heroic/Rucksack/issues/1

heroic4• 14 years ago

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

heroic4• 14 years ago

Request accepted. Thanks :)

riffraff• 14 years ago

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.

gauravsc5• 14 years ago

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

ColinWright2• 14 years ago

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?

vog3• 14 years ago

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".

gauravsc5• 14 years ago

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.

jahewson2• 14 years ago

Knapsack 0-1 is a (special case) problem, not an algorithm.

vog3• 14 years ago

So which algorithm did you use to solve the Knapsack 0-1 problem? Via Dynamic Programming? Or using the Meet-in-the-Middle Algorithm? Or a greedy approximation algorithm?

jmathai4• 14 years ago

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...

true_religion• 14 years ago

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...

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

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

omgmog2• 14 years ago

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/

heroic4• 14 years ago

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

omgmog2• 14 years ago

go for it :)

gauravsc5• 14 years ago

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.

moe• 14 years ago

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

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

dangoldin• 14 years ago

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

How is the performance on this one?

heroic4• 14 years ago

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

JQuery plugin to arrange images using knapsack algorithm

Related Stories