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;
}

/**
 * How many photographs the field holds.
 *
 * 150 on desktop / 96 on a phone, up from 96 / 56. The raise is deliberate: the
 * featured tiles are now 1.5x larger, so they occupy noticeably more of the
 * plane than before, and at the old counts the gaps between them read as empty
 * space rather than as a dense field. More ordinary tiles fills that space
 * without touching the emphasis -- the newest photographs still ring, and there
 * are still only ten of those.
 *
 * A phone is raised less than a desktop because tile AREA is bounded by the
 * viewport, not by the tile count: past ~100 the extra tiles fall below their own
 * thumbnail size and the field turns to grain.
 */
export function fieldCount(width) { return width < 650 ? 96 : 150; }

/**
 * Tile size bounds for the user-facing size control.
 *
 * Below the lower bound the tiles stop being recognisable as photographs, and
 * above the upper bound a single tile covers the search pill and most of the
 * viewport, so the field stops reading as a collection at all.
 */
export const MIN_TILE_SCALE = 0.6;
export const MAX_TILE_SCALE = 1.8;

/**
 * How far the whole plane may be pushed, in px, before it stops being
 * reachable. Larger than half the shortest likely viewport, so a photographer
 * can be moved out from under the search pill without being lost off-screen.
 */
export const MAX_FIELD_OFFSET = 320;

export function clampTileScale(value) {
  const scale = Number(value);
  return Number.isFinite(scale) ? Math.max(MIN_TILE_SCALE, Math.min(MAX_TILE_SCALE, scale)) : 1;
}

export function clampFieldOffset(value) {
  const offset = Number(value);
  return Number.isFinite(offset) ? Math.max(-MAX_FIELD_OFFSET, Math.min(MAX_FIELD_OFFSET, offset)) : 0;
}

/**
 * Size one tile.
 *
 * `tileScale` is the user's size multiplier and is applied to `unit` BEFORE the
 * per-photograph variance, so every tile grows and shrinks together and the
 * collection keeps its rhythm instead of the biggest photographs absorbing the
 * whole change.
 */
export function dimensions(image, viewportWidth, tileScale = 1) {
  const unit = Math.max(68, Math.min(168, viewportWidth / 10.25)) * tileScale;
  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, offsetX = 0, offsetY = 0) {
  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 + offsetX,
    y: -40 + (Math.floor(index / columns) + 0.5 + (seed(image.id + 'y') - 0.5) * 0.48) * (height + 80) / rows + offsetY,
    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, offsetX = 0, offsetY = 0) {
  const angle = rank * 2.399963229728653 + 0.54;
  const radius = Math.sqrt((rank + 0.6) / count);
  // 0.62 instead of 0.68: the top results hug the centre -- and therefore the
  // search pill -- more tightly, so the answer to a query sits visibly NEAR
  // the box the visitor typed in, not pushed out towards the field's rim.
  const x = width / 2 + Math.cos(angle) * radius * width * 0.62;
  let y = Math.sin(angle) * radius * height * 0.66;
  // Ease the central photographs around the pill, without a separate results layer.
  //
  // Clearance has to account for the TILE, not just its centre. A featured tile
  // is 1.5x its neighbours, so a distance tuned to clear an ordinary tile still
  // lets a featured corner land under the pill. `dimensions()` is therefore
  // called here for the real half-height, and the push grows with it.
  const clearance = Math.max(0, 1 - Math.abs(x - width / 2) / (width * 0.31));
  // The tile is scaled by `scale` on top of its CSS size, and that scale reaches
  // 1.32 for a central featured tile -- so the clearance has to be computed from
  // the RENDERED half-extent. Measuring the unscaled box let a 289px tile clear
  // the pill by 221px and still land on it.
  const scale = 0.96 + seed(image.id + 'scale') * 0.18 + (1 - radius) * 0.18;
  const size = dimensions(image, width, image?.featuredScale || 1);
  const half = Math.max(size.width, size.height) / 2 * scale;
  // PILL_HALF is the search box's own half-width plus margin, so "far enough" is
  // measured from the box rather than from its centreline. The 22px margin
  // (previously 34) lets a result settle closer to the box while still clearing
  // the glass itself.
  const pillHalf = (width < 650 ? 165 : 235) + 22;
  // 80/118 was a generous shove; 74/96 keeps the same shape but brings the arc
  // in so the top results read as "attached" to the pill rather than banished.
  y += Math.sign(y || 1) * clearance * (width < 650 ? 60 : 92) * (1 - radius * 0.45);
  // If the tile's own rendered box could still reach the pill, push it clear along
  // y. Both conditions must hold: the tile is near the pill's row AND its column
  // overlaps the pill's width. Only genuinely-overlapping tiles move, so the arc
  // keeps its shape and tiles already clear are left alone.
  if (clearance > 0
    && Math.abs(y) < half + 40
    && Math.abs(x - width / 2) < pillHalf + half) {
    y += Math.sign(y || 1) * (half + 40 - Math.abs(y));
  }
  return {
    x: x + offsetX, y: height / 2 + y + offsetY,
    // The same `scale` the clearance was computed from. Recomputing it here
    // would be a second, independently-evaluated expression for one number, and
    // the clearance would silently stop matching what is drawn if the two ever
    // drifted apart.
    scale,
  };
}

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 };
}