src/layout.js

// Stable randomness keeps identity and size consistent as photographs move.
export function seed(text) {
  let hash = 2166136261;
  for (let i = 0; i < text.length; i++) hash = Math.imul(hash ^ text.charCodeAt(i), 16777619);
  return (hash >>> 0) / 4294967295;
}

export function fieldCount(width) { return width < 650 ? 56 : 96; }

export function dimensions(image, viewportWidth) {
  const unit = Math.max(68, Math.min(168, viewportWidth / 10.25));
  const area = unit * unit * (0.74 + seed(image.id + 'size') * 0.48);
  const ar = Math.max(0.5, Math.min(2, image.ar));
  return { width: Math.sqrt(area * ar), height: Math.sqrt(area / ar) };
}

export function scatter(image, index, count, width, height) {
  const columns = Math.ceil(Math.sqrt(count * width / height));
  const rows = Math.ceil(count / columns);
  return {
    x: -35 + (index % columns + 0.5 + (seed(image.id + 'x') - 0.5) * 0.44) * (width + 70) / columns,
    y: -40 + (Math.floor(index / columns) + 0.5 + (seed(image.id + 'y') - 0.5) * 0.48) * (height + 80) / rows,
    scale: 0.88 + seed(image.id + 'scale') * 0.20,
  };
}

/** One continuous layout for the whole collection, including non-matching photos. */
export function fieldPosition(image, rank, count, width, height) {
  const angle = rank * 2.399963229728653 + 0.54;
  const radius = Math.sqrt((rank + 0.6) / count);
  const x = width / 2 + Math.cos(angle) * radius * width * 0.68;
  let y = Math.sin(angle) * radius * height * 0.70;
  // Ease the central photographs around the pill, without a separate results layer.
  const clearance = Math.max(0, 1 - Math.abs(x - width / 2) / (width * 0.31));
  y += Math.sign(y || 1) * clearance * (width < 650 ? 65 : 95) * (1 - radius * 0.45);
  return {
    x, y: height / 2 + y,
    scale: 0.96 + seed(image.id + 'scale') * 0.18 + (1 - radius) * 0.18,
  };
}

export function edgePosition(image, width, height, target) {
  const dx = target.x - width / 2 || 1;
  const dy = target.y - height / 2 || 1;
  const factor = Math.min((width / 2 + 210) / Math.abs(dx), (height / 2 + 210) / Math.abs(dy));
  return { x: width / 2 + dx * factor, y: height / 2 + dy * factor, scale: target.scale };
}