Diorama v2

Almost 10 years ago I wrote an algorithm that layouts a set of images into a fixed-size rectangle. The old algorithm was heavily optimized for speed, making the code hard to read and even harder to maintain.

Recently (2023) I had an idea how to simplify the algorithm and decided to put this on to a more modern foundation.

Though the algorithm searches for gap-less solutions the provided demo here cheats by giving images a bit of space and avoids cropping. It should be fairly trivial to display images via contain/cover modes in other scenarios.

The demo can be seen here.

Layout algorithm

If you want to use this algorithm in your own project you can install the library via npm i diorama which exports a single function "findSolution".

export const findSolution = (
  pictures: Picture[],
  targetDimension: Dimension,
  config?: Config
): Promise<Solution>

targetDimension is the rectangle into which the list of pictures is going to be placed in. Config can customize the behavior of the algorithm. Beware that this is a long running task and it runs inside a WebWorker. The returned Solution contains all you need to know, so let the types guide you. Note that a solution has its own property dimension which might slightly differ from the targetDimension. It's up to you to scale the solution, however the solution's dimension never exceeds the targetDimension.

Configuration

export type Config = {
  maxComputationTime: number // ms how long the algorithm is allowed to search for a good solution, default 300ms
  sizeHomogenity: number // how imporant equal picture-sizes are. If you don't care about cropping at all set this to 1000
}