/** * A circuit outline. Coordinates are OpenF1 location units (decimetres, y up) * so a car's raw `x`/`y` can be matched against the outline as it arrives, * but any consistent space works if you trace your own. */ export type Circuit = { /** OpenF1 `circuit_key`, so a session can find its outline. */ key?: number; /** OpenF1 `circuit_short_name`, e.g. `Monza`. */ name: string; /** * The lap as a closed loop, flat: `[x0, y0, x1, y1, ...]`. Starts on the * finish line and runs in the direction of travel. */ points: readonly number[]; /** Where sectors 1 and 2 end, as fractions of the lap. */ sectors?: readonly [number, number]; /** Degrees to turn the outline for display, clockwise. */ rotation?: number; }; type Loop = { xs: Float64Array; ys: Float64Array; /** Distance from the line to each point; the last entry is the lap. */ run: Float64Array; }; function loop(xs: number[], ys: number[]): Loop { const n = xs.length; const run = new Float64Array(n + 1); for (let i = 1; i <= n; i++) { run[i] = run[i - 1] + Math.hypot(xs[i % n] - xs[i - 1], ys[i % n] - ys[i - 1]); } return { xs: Float64Array.from(xs), ys: Float64Array.from(ys), run }; } /** Index of the segment `distance` along the loop falls on. */ function segmentAt(run: Float64Array, distance: number) { let lo = 0; let hi = run.length - 2; while (lo < hi) { const mid = (lo + hi + 1) >> 1; if (run[mid] <= distance) lo = mid; else hi = mid - 1; } return lo; } const wrap = (fraction: number) => fraction - Math.floor(fraction); export type TrackPoint = { x: number; y: number; angle: number }; export type Track = { /** viewBox size: the outline fills the width, height follows its shape. */ width: number; height: number; /** SVG path data for the outline. */ d: string; /** Where a car `fraction` of the way round sits, and its heading in degrees. */ at: (fraction: number) => TrackPoint; }; /** * Lays a circuit out for drawing: turned by its `rotation`, flipped to * screen space and scaled to `width`, with `padding` left round it for cars. */ export function createTrack( circuit: Circuit, { width = 400, padding = 18 }: { width?: number; padding?: number } = {}, ): Track { const { points, rotation = 0 } = circuit; const turn = (rotation * Math.PI) / 180; const cos = Math.cos(turn); const sin = Math.sin(turn); const xs: number[] = []; const ys: number[] = []; for (let i = 0; i < points.length - 1; i += 2) { const x = points[i]; const y = -points[i + 1]; xs.push(x * cos - y * sin); ys.push(x * sin + y * cos); } const minX = Math.min(...xs); const minY = Math.min(...ys); const scale = (width - padding * 2) / (Math.max(...xs) - minX); for (let i = 0; i < xs.length; i++) { xs[i] = (xs[i] - minX) * scale + padding; ys[i] = (ys[i] - minY) * scale + padding; } const height = Math.max(...ys) + padding; const view = loop(xs, ys); const lap = view.run[view.run.length - 1]; const n = xs.length; return { width, height: Math.ceil(height), d: xs .map((x, i) => `${i ? "L" : "M"}${x.toFixed(1)} ${ys[i].toFixed(1)}`) .join("") + "Z", at(fraction) { const distance = wrap(fraction) * lap; const i = segmentAt(view.run, distance); const j = (i + 1) % n; const span = view.run[i + 1] - view.run[i]; const t = span ? (distance - view.run[i]) / span : 0; const dx = view.xs[j] - view.xs[i]; const dy = view.ys[j] - view.ys[i]; return { x: view.xs[i] + dx * t, y: view.ys[i] + dy * t, angle: (Math.atan2(dy, dx) * 180) / Math.PI, }; }, }; } const raw = new WeakMap(); function rawLoop(circuit: Circuit) { let cached = raw.get(circuit); if (!cached) { const xs: number[] = []; const ys: number[] = []; for (let i = 0; i < circuit.points.length - 1; i += 2) { xs.push(circuit.points[i]); ys.push(circuit.points[i + 1]); } cached = loop(xs, ys); raw.set(circuit, cached); } return cached; } export type Located = { /** How far round the lap, from 0 at the line towards 1. */ progress: number; /** Distance from the outline, in location units. */ offset: number; }; /** * Finds a location on the lap. Pass the car's last `progress` as `near` and * the search looks just behind and ahead of it first, so a figure of eight or * two close straights cannot swap it across. */ export function locate( circuit: Circuit, x: number, y: number, near?: number, ): Located { const { xs, ys, run } = rawLoop(circuit); const n = xs.length; const lap = run[n]; let best = Infinity; let found = 0; const search = (from: number, to: number) => { for (let k = from; k < to; k++) { const i = ((k % n) + n) % n; const j = (i + 1) % n; const ax = xs[i]; const ay = ys[i]; const dx = xs[j] - ax; const dy = ys[j] - ay; const length = dx * dx + dy * dy; const t = length ? Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / length)) : 0; const gap = Math.hypot(x - (ax + dx * t), y - (ay + dy * t)); if (gap < best) { best = gap; found = run[i] + (run[i + 1] - run[i]) * t; } } }; if (near !== undefined) { const i = segmentAt(run, wrap(near) * lap); search(i - Math.ceil(n * 0.05), i + Math.ceil(n * 0.3)); // 30m off the line means the pit lane or a gap in the feed: look everywhere. if (best < 300) return { progress: found / lap, offset: best }; best = Infinity; } search(0, n); return { progress: found / lap, offset: best }; } export type CircuitFromLocationsOptions = { name: string; key?: number; rotation?: number; /** Spacing of the traced points, in location units. */ spacing?: number; /** How far a straight line may stray from the trace before it bends. */ tolerance?: number; }; /** * Traces a circuit from one clean lap of location samples, e.g. OpenF1 * `/location` for one car between two `/laps` `date_start`s. Smooths the * samples, spaces them evenly and drops the points a straight line covers. */ export function circuitFromLocations( samples: readonly { x: number; y: number }[], { name, key, rotation, spacing = 40, tolerance = 6, }: CircuitFromLocationsOptions, ): Circuit { const pts = samples.filter( (p, i) => !(p.x === 0 && p.y === 0) && (i === 0 || p.x !== samples[i - 1].x || p.y !== samples[i - 1].y), ); const n = pts.length; if (n < 4) throw new Error("A circuit needs at least four distinct samples."); // Catmull-Rom through the samples, dense, then evenly spaced by distance. const dense: [number, number][] = []; for (let i = 0; i < n; i++) { const p0 = pts[(i - 1 + n) % n]; const p1 = pts[i]; const p2 = pts[(i + 1) % n]; const p3 = pts[(i + 2) % n]; const steps = Math.max( 2, Math.ceil(Math.hypot(p2.x - p1.x, p2.y - p1.y) / (spacing / 4)), ); for (let s = 0; s < steps; s++) { const t = s / steps; const t2 = t * t; const t3 = t2 * t; const c = (a: number, b: number, c: number, d: number) => 0.5 * (2 * b + (c - a) * t + (2 * a - 5 * b + 4 * c - d) * t2 + (3 * b - a - 3 * c + d) * t3); dense.push([c(p0.x, p1.x, p2.x, p3.x), c(p0.y, p1.y, p2.y, p3.y)]); } } const smooth = loop( dense.map((p) => p[0]), dense.map((p) => p[1]), ); const lap = smooth.run[dense.length]; const count = Math.max(8, Math.round(lap / spacing)); const even: [number, number][] = []; for (let k = 0; k < count; k++) { const distance = (lap * k) / count; const i = segmentAt(smooth.run, distance); const j = (i + 1) % dense.length; const span = smooth.run[i + 1] - smooth.run[i]; const t = span ? (distance - smooth.run[i]) / span : 0; even.push([ dense[i][0] + (dense[j][0] - dense[i][0]) * t, dense[i][1] + (dense[j][1] - dense[i][1]) * t, ]); } // Douglas-Peucker on the closed loop, keeping the first point: the line. even.push(even[0]); const keep = new Set([0, even.length - 1]); const simplify = (lo: number, hi: number) => { const [ax, ay] = even[lo]; const [bx, by] = even[hi]; const length = Math.hypot(bx - ax, by - ay); let far = -1; let at = -1; for (let i = lo + 1; i < hi; i++) { const [px, py] = even[i]; const d = length ? Math.abs((bx - ax) * (ay - py) - (ax - px) * (by - ay)) / length : Math.hypot(px - ax, py - ay); if (d > far) { far = d; at = i; } } if (far > tolerance) { keep.add(at); simplify(lo, at); simplify(at, hi); } }; const half = even.length >> 1; keep.add(half); simplify(0, half); simplify(half, even.length - 1); return { key, name, rotation, points: [...keep] .sort((a, b) => a - b) .slice(0, -1) .flatMap((i) => [Math.round(even[i][0]), Math.round(even[i][1])]), }; }

Code