Chart Ridgeline Terrain

1"use client";
2 
3import { useEffect, useRef } from "react";
4 
5// ---------------------------------------------------------------------------
6// deterministic 2-octave value noise — no deps, stable across frames
7// ---------------------------------------------------------------------------
8function hash2(x: number, y: number) {
9  const n = Math.sin(x * 127.1 + y * 311.7) * 43758.5453123;
10  return n - Math.floor(n);
11}
12function vnoise(x: number, y: number) {
13  const xi = Math.floor(x);
14  const yi = Math.floor(y);
15  const xf = x - xi;
16  const yf = y - yi;
17  const u = xf * xf * (3 - 2 * xf);
18  const v = yf * yf * (3 - 2 * yf);
19  const a = hash2(xi, yi);
20  const b = hash2(xi + 1, yi);
21  const c = hash2(xi, yi + 1);
22  const d = hash2(xi + 1, yi + 1);
23  return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;
24}
25function noise2(x: number, y: number) {
26  return 0.65 * vnoise(x, y) + 0.35 * vnoise(x * 2.1 + 19.7, y * 2.1 + 7.3);
27}
28 
29// cubic-bezier(0.22, 1, 0.36, 1) solved via Newton–Raphson
30function makeBezier(p1x: number, p1y: number, p2x: number, p2y: number) {
31  const cx = 3 * p1x;
32  const bx = 3 * (p2x - p1x) - cx;
33  const ax = 1 - cx - bx;
34  const cy = 3 * p1y;
35  const by = 3 * (p2y - p1y) - cy;
36  const ay = 1 - cy - by;
37  const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t;
38  const sampleY = (t: number) => ((ay * t + by) * t + cy) * t;
39  const slopeX = (t: number) => (3 * ax * t + 2 * bx) * t + cx;
40  return (x: number) => {
41    if (x <= 0) return 0;
42    if (x >= 1) return 1;
43    let t = x;
44    for (let i = 0; i < 6; i++) {
45      const s = slopeX(t);
46      if (Math.abs(s) < 1e-6) break;
47      t -= (sampleX(t) - x) / s;
48    }
49    return sampleY(Math.min(1, Math.max(0, t)));
50  };
51}
52const glideEase = makeBezier(0.22, 1, 0.36, 1);
53 
54const EMPTY: number[] = [];
55 
56function parseColor(raw: string): { r: number; g: number; b: number } | null {
57  const v = raw.trim();
58  if (v.startsWith("#")) {
59    const hex = v.slice(1);
60    if (hex.length === 3) {
61      const r = parseInt(hex[0] + hex[0], 16);
62      const g = parseInt(hex[1] + hex[1], 16);
63      const b = parseInt(hex[2] + hex[2], 16);
64      if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null;
65      return { r, g, b };
66    }
67    if (hex.length >= 6) {
68      const r = parseInt(hex.slice(0, 2), 16);
69      const g = parseInt(hex.slice(2, 4), 16);
70      const b = parseInt(hex.slice(4, 6), 16);
71      if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null;
72// … truncated