import type { HTMLAttributes } from "react"; import { useMemo } from "react"; export type TopographicLinesBgProps = HTMLAttributes & { /** Same seed, same map: output is identical on the server and the client. */ seed?: number; /** Number of hills in the terrain. */ peaks?: number; /** Number of contour intervals. Every fifth line is drawn as an index contour. */ levels?: number; strokeWidth?: number; }; export type ContourLine = { d: string; index: boolean }; const WIDTH = 800; const HEIGHT = 600; const CELL = 10; function mulberry32(seed: number) { let state = seed >>> 0; return function next() { state = (state + 0x6d2b79f5) >>> 0; let t = state; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function round(value: number) { return Math.round(value * 10) / 10; } // Marching-squares lookup: edges are 0 top, 1 right, 2 bottom, 3 left. const segmentsByCase: number[][] = [ [], [3, 2], [2, 1], [3, 1], [0, 1], [3, 0, 2, 1], [0, 2], [3, 0], [3, 0], [0, 2], [0, 1, 3, 2], [0, 1], [3, 1], [2, 1], [3, 2], [], ]; export function buildContours(seed: number, peaks: number, levels: number): ContourLine[] { const random = mulberry32(seed); const hills = Array.from({ length: Math.max(1, peaks) }, () => ({ x: WIDTH * (0.1 + random() * 0.8), y: HEIGHT * (0.1 + random() * 0.8), height: 0.55 + random() * 0.45, spread: 90 + random() * 150, })); const ripples = Array.from({ length: 3 }, () => ({ fx: (random() - 0.5) * 0.03, fy: (random() - 0.5) * 0.03, phase: random() * Math.PI * 2, amplitude: 0.025 + random() * 0.03, })); const columns = WIDTH / CELL + 1; const rows = HEIGHT / CELL + 1; const field: number[] = []; let min = Infinity; let max = -Infinity; for (let row = 0; row < rows; row++) { for (let column = 0; column < columns; column++) { const x = column * CELL; const y = row * CELL; let value = 0; for (const hill of hills) { const dx = x - hill.x; const dy = y - hill.y; value += hill.height * Math.exp(-(dx * dx + dy * dy) / (2 * hill.spread * hill.spread)); } for (const ripple of ripples) value += ripple.amplitude * Math.sin(ripple.fx * x + ripple.fy * y + ripple.phase); field.push(value); if (value < min) min = value; if (value > max) max = value; } } const lines: ContourLine[] = []; for (let level = 1; level <= levels; level++) { const threshold = min + ((max - min) * level) / (levels + 1); let d = ""; for (let row = 0; row < rows - 1; row++) { for (let column = 0; column < columns - 1; column++) { const tl = field[row * columns + column]; const tr = field[row * columns + column + 1]; const br = field[(row + 1) * columns + column + 1]; const bl = field[(row + 1) * columns + column]; const key = (tl > threshold ? 8 : 0) | (tr > threshold ? 4 : 0) | (br > threshold ? 2 : 0) | (bl > threshold ? 1 : 0); const segments = segmentsByCase[key]; if (segments.length === 0) continue; const x = column * CELL; const y = row * CELL; const edgePoint = (edge: number): [number, number] => { if (edge === 0) return [x + CELL * ((threshold - tl) / (tr - tl)), y]; if (edge === 1) return [x + CELL, y + CELL * ((threshold - tr) / (br - tr))]; if (edge === 2) return [x + CELL * ((threshold - bl) / (br - bl)), y + CELL]; return [x, y + CELL * ((threshold - tl) / (bl - tl))]; }; for (let index = 0; index < segments.length; index += 2) { const start = edgePoint(segments[index]); const end = edgePoint(segments[index + 1]); d += "M" + round(start[0]) + " " + round(start[1]) + "L" + round(end[0]) + " " + round(end[1]); } } } if (d) lines.push({ d, index: level % 5 === 0 }); } return lines; } export function TopographicLinesBg({ children, seed = 24, peaks = 4, levels = 14, strokeWidth = 1, className = "", ...props }: TopographicLinesBgProps) { const lines = useMemo(() => buildContours(seed, peaks, levels), [seed, peaks, levels]); return (

{children}

); }