efficiently calculate locations for rectangles in a unit grid

Question

I'm working on a specific layout algorithm to display photos in a unit based grid. The desired behaviour is to have every photo placed in the next available space line by line.

Since there could easily be a thousand photos whose positions need to be calculated at once, efficiency is very important.

Has this problem maybe been solved with an existing algorithm already? If not, how can I approach it to be as efficient as possible?

Edit Regarding the positioning: What I'm basically doing right now is iterating every line of the grid cell by cell until I find room to fit the element. That's why 4 is placed next to 2.

Answer 1

How about keeping a list of next available row by width? Initially the next-available-row list looks like:

(0,0,0,0,0)

When you've added the first photo, it looks like

(0,0,0,0,1)

Then

(0,0,0,2,2)

Then

(0,0,0,3,3)

Then

(1,1,1,4,4)

And the final photo doesn't change the list.

This could be efficient because you're only maintaining a small list, updating a little bit at each iteration (versus searching the entire space every time. It gets a little complicated - there could be a situation (with a tall photo) where the nominal next available row doesn't work, and then you could default to the existing approach. But overall I think this should save a fair amount of time, at the cost of a little added complexity.

Update In response to @matteok's request for a coordinateForPhoto(width, height) method:

Let's say I called that array "nextAvailableRowByWidth".

public Coordinate coordinateForPhoto(width, height) {
    int rowIndex = nextAvailableRowByWidth[width + 1]; // because arrays are zero-indexed
    int[] row = space[rowIndex]
    int column = findConsecutiveEmptySpace(width, row);
    for (int i = 1; i < height; i++) {
        if (!consecutiveEmptySpaceExists(width, space[i], column)) {
            return null;
            // return and fall back on the slow method, starting at rowIndex
        }
    }
    // now either you broke out and are solving some other way,
    // or your starting point is rowIndex, column.  Done.
    return new Coordinate(rowIndex, column);
}

Update #2 In response to @matteok's request for how to update the nextAvailableRowByWidth array:

OK, so you've just placed a new photo of height H and width W at row R. Any elements in the array which are less than R don't change (because this change didn't affect their row, so if there were 3 consecutive spaces available in the row before placing the photo, there are still 3 consecutive spaces available in it after). Every element which is in the range (R, R+H) needs to be checked, because it might have been affected. Let's postulate a method maxConsecutiveBlocksInRow() - because that's easy to write, right?

public void updateAvailableAfterPlacing(int W, int H, int R) {
    for (int i = 0; i < nextAvailableRowByWidth.length; i++) {
        if (nextAvailableRowByWidth[i] < R) {
            continue;
        }
        int r = R;
        while (maxConsecutiveBlocksInRow(r) < i + 1) {
            r++;
        }
        nextAvailableRowByWidth[i] = r;
    }
}

I think that should do it.

Answer 2

How about a matrix (your example would be 5x9) where each cell has a value representing the distance from the top left corner (for instance (row+1)*(column+1) [+1 is only necessary if your first row and value are 0]). In this matrix you look for the area which has the lowest value (when summing up the values of empty cells). A 2nd matrix (or a 3rd dimension of the first matrix) stores the status of each cell.

edit:

int[][] grid = new int[9][5];
int[] filledRows = new int [9];
int photowidth = 2;
int photoheight = 1;
int emptyRowCounter = 0;
boolean photoFits = true;

for(int i = 0; i < grid.length; i++){
    for(int m = 0; m < filledRows.length; m++){
        if(filledRows[m]-(photoHeight-1) > i || filledRows[m]+(photoHeight-1) < i){
            for(int j = 0; j < grid[i].length; j++){
                if(grid[i][j] == 0){
                    for(int k = 0; k < photowidth; k++){
                        for(int l = 0; k < photoheight){
                            if(grid[i+l][j+k]!=0){
                                photoFits = false;
                            }
                        }
                    }
                } else{
                    emptyRowCounter++;
                }
            }
            if(photoFits){
                //place Photo at i,j
            }
            if(emptyRowCounter == 5){
                filledRows[i] = 1;
            }
        }
    }
}

Answer 3

In the gif you have above, it turned out nicely that there was a photo (5) that could fit into the gap under (1) and to the left of (2). My intuition suggests we want to avoid creating gaps like that. Here is an idea that should avoid these gaps.

Maintain a list of "open regions", where an open region has a int leftBoundary, an int topBoundary, and an optional int bottomBoundary. The first open region is just the whole grid (leftBoundary:0, topBoundary: 0, bottom: null).

Sort the photos by height, breaking ties by width.

Until you have placed all photos:

Choose the tallest photo (in case of ties, choose the widest of the tallest photos). Find the first open region it can fit in (such that grid.Width - region.leftBoundary >= photo.Width). Place the photo at the top left of this region. When you place this photo, it may span the entire width or height of the region.

1. If it spans both the width and the height of the region, the region is filled! Remove this region from the list of open regions.

2. If it spans the width, but not the height, add the photo's height to the topBoundary of the region.

3. If it spans the height, but not the width, add the photo's width to the leftBoundary of the region.

4. If it does not span the height or width of the boundary, we are going to conceptually divide this region into two: one region will cover the space directly to the right of this photo (call it rightRegion), and the other region will cover the space below this region (call it belowRegion).

   rightRegion = { leftBoundary = parentRegion.leftBoundary + photo.width, topBoundary = parentRegion.topBoundary, bottomBoundary = parentRegion.topBoundary + photo.height }

   belowRegion = { leftBoundary = 0, topBoundary = parentRegion.topBoundary + photo.height, bottomBoundary = parentRegion.bottomBoundary }

   Replace the current region in the list of open regions with rightRegion, and insert belowRegion directly after rightRegion.

---

You can visualize how this algorithm would work on your example: First, it would sort the photos: (2,3,4,1,5).

It considers 2, which fits into the first region (the whole grid). When it places 2 at the top left, it splits that region into the space directly to the right of 2, and the space below 2.

Then, it considers 3. It considers the open regions in turn. The first open region is to the right of 2. 3 fits there, so that's where it goes. It spans the width of the region, so the region's topBoundary gets adjusted downward.

Then, it considers 4. It again fits in the first open region, so it places 4 there. 4 spans the height of the region, so the region's leftBoundary gets adjusted rightward.

Then, 1 gets put in the 1x1 gap to the right of 4, filling its region. Finally, 5 gets put just below 2.