Question

I have a problem understanding the algorithm in the Photo Gallery Algorithm. The main part i am not quite no what is going is what is the representation of the Partition specified in the 2nd step

(2b) Distribute photos over rows using the aspect ratio as weight

weights = photos.map (p) -> parseInt(p.get('aspect_ratio') * 100)
partition = linear_partition(weights, rows)

Is the weights and partition an array of something. I am using the linear_partition.js from this link : https://github.com/math-utils/linear-partition/blob/master/linear_partition.js

Last the the 3rd : I am completely lost..

Can someone please give me an idea what is going on, especially the third one.

Was it helpful?

Solution

Step 2b:

The linear_partition algorithm will take an array of photo weights (which is calculated as their aspect ratio times 100, rounded) and how many rows you want to arrange them in. It will then return a two-dimensional array where the first dimension is an array of the rows and the second dimension is the contents of the row. Like this:

linear_partition([9,2,6,3,8,5,8,1,7,3,4], 3) => [[9,2,6,3],[8,5,8],[1,7,3,4]]

Step 3:

In this step, they iterate through the partition and use that data to correctly size the photos so that they are evenly distributed. See comments below.

weights = photos.map(function (p) {
    return parseInt(p.get('aspect_ratio') * 100);
});

// Call the partition module and get a 2-dimensional array as return value
partition = linear_partition(weights, rows);
index = 0;

// Create a new collection to temporarily hold data
row_buffer = new Backbone.Collection();

// Iterate through each row
_.each(partition, function (row) {
    var summed_ratios;
    row_buffer.reset(); // reset the collection

    // Iterate through each photo in the row and add
    // the photo at that index to our temp collection
    _.each(row, function () {
        return row_buffer.add(photos.at(index++));
    });

    // The reduce function will sum the aspect ratio of all photos in the row
    // Read more about the reduce function at http://underscorejs.org/#reduce
    summed_ratios = row_buffer.reduce((function (sum, p) {
        return sum += p.get('aspect_ratio');
    }), 0);

    // Iterate through all the photos in the row (in temp collection)
    // For each photo, call the resize() function which I assume is their custom
    // function which sets the correct size for each photo
    return row_buffer.each(function (photo) {
        return photo.view.resize(parseInt(viewport_width / summed_ratios * photo.get('aspect_ratio')), parseInt(viewport_width / summed_ratios));
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top