'Is there a known algorithm for 2D images(rectangles) to form a cluster layout?

I am looking for an existing algorithm for images (squares) layout similar to this: enter image description here

Is anyone aware of something similar? Maybe a library or just a description? It would be something like this:

  • Place image somewhere in the 2D space
  • Continue arranging remaining images around it (various sizes, but smaller than the first one)

Any help is greatly appreciated!

algorithmimage2d


Solution 1:[1]

This is maybe not exactly what you want, but it works with a rectangular canvas of any dimension and creates a gapless layout (I'm the author).

Most existing layout algorithms work on a row-by-row partitioning basis. Bin packing will always give you gaps and is not suitable for your usecase imo.

However if you don't mind coding it yourself it doesn't seem that complicated.

  • 1st image goes to the center and defines the starting bounds
  • then you can place images in 1 of the 4 cardinal directions. whenever you exceed the length of the current side, you move on to placing images for the next direction.
  • for each placed image you grow the canvas bounds, so the next trip around the center knows when images exceed the threshold to switch direction again.
  • rinse and repeat.

what your question doesn't define is how many images you want to place by each side. In your example the images shrink down, but is that fixed rate or should that be automatically scaled down and so on. how do you handle images with really weird aspect ratios like 1:10 etc?

Solution 2:[2]

The approach I took in the end was not ideal, but it did work. enter image description here

The above is one of the possible configurations. The algorithm is as follows:

  • Place largest image in the centre
  • Place second image next to it
  • Make a polygon out of it
  • And then for any number of remaining images do as follows:
  • Find a corner closest to the centre
  • Make sure the image does not intersect with existing polygon
  • After placing the image, create a new polygon

For polygon creation and checking for intersections i have used: @flatten-js/core

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andreas Herd
Solution 2 Tomas

Related Questions