JQuery plugin to arrange images using knapsack algorithm | Hacker News Reader

JQuery plugin to arrange images using knapsack algorithm

github.com

46 pointssushi29 comments

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

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.

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

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.

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

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?

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/

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

go for it :)

I wish there was a quick link to an example.

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

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

Too slow. Pull request submitted :)

Request accepted. Thanks :)

Thanks for the lib.

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.

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

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?

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.

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?

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

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.

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

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/

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

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

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.

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

How is the performance on this one?

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

Reply on news.ycombinator.com