Calculating Optimal Grid Layout for Stacked Images

Grid layout determines how scenes are arranged in a composite image for stacked generation.

Algorithm

Use optimal grid calculation:

cols = ceil(sqrt(N))
rows = ceil(N/cols)

Implementation

function calculateGridLayout(sceneCount: number): {
  cols: number;
  rows: number;
  emptyCells: number;
} {
  const cols = Math.ceil(Math.sqrt(sceneCount));
  const rows = Math.ceil(sceneCount / cols);
  const emptyCells = cols * rows - sceneCount;

  return { cols, rows, emptyCells };
}

Grid Position Calculation

Convert scene index to grid position (1-indexed):

function getGridPosition(sceneIndex: number, cols: number): {
  row: number;
  col: number;
} {
  const col = (sceneIndex % cols) + 1;  // 1-indexed
  const row = Math.floor(sceneIndex / cols) + 1;  // 1-indexed

  return { row, col };
}

Empty Cell Positions

Identify which grid cells are empty:

function getEmptyPositions(
  sceneCount: number,
  cols: number,
  rows: number
): string[] {
  const totalCells = cols * rows;
  const emptyCells = totalCells - sceneCount;

  if (emptyCells === 0) return [];

  const positions: string[] = [];

  for (let i = sceneCount; i < totalCells; i++) {
    const { row, col } = getGridPosition(i, cols);
    positions.push(`Position (${row}, ${col})`);
  }

  return positions;
}

Grid Configurations Table

Cell Dimensions

Each scene is 1080×1920 (9:16 aspect ratio).

Composite dimensions:

compositeWidth = cols × 1080
compositeHeight = rows × 1920

Example for 3 scenes (2×2 grid):

compositeWidth = 2 × 1080 = 2160
compositeHeight = 2 × 1920 = 3840

Usage Example

const scenes = [/* 7 scenes */];
const grid = calculateGridLayout(scenes.length);
// { cols: 3, rows: 3, emptyCells: 2 }

scenes.forEach((scene, idx) => {
  const position = getGridPosition(idx, grid.cols);
  console.log(`Scene ${idx + 1}: Row ${position.row}, Col ${position.col}`);
});

const empty = getEmptyPositions(scenes.length, grid.cols, grid.rows);
// ["Position (3, 1)", "Position (3, 2)"]