import React, { useEffect, useMemo, useRef, useState } from "react"; // ───────────────────────────────────────────────────────────────────────────── // GILBREATH ⋈ MOD-m — 二階MOD規律觀測台 // 整數精確：三角全為整數，殘差全為整數，轉移計數全為整數。 // 小數點只在你按下「正規化」時出現。 // ───────────────────────────────────────────────────────────────────────────── const INK = "#0a0b0f"; const PANEL = "#11131a"; const LINE = "#22262f"; const PAPER = "#e9e3d3"; const MUTE = "#8a8d97"; const ONE = "#ffb454"; // 殘差 1 = Gilbreath 邊緣 const COOL = "#3aa6b9"; function sieve(n) { const s = new Uint8Array(n + 1); const ps = []; for (let i = 2; i <= n; i++) { if (!s[i]) { ps.push(i); for (let j = i * i; j <= n; j += i) s[j] = 1; } } return ps; } function buildTriangle(primes) { const tri = [Int32Array.from(primes)]; let cur = tri[0]; while (cur.length > 1) { const nxt = new Int32Array(cur.length - 1); for (let i = 1; i < cur.length; i++) nxt[i - 1] = Math.abs(cur[i] - cur[i - 1]); tri.push(nxt); cur = nxt; } return tri; } function resColor(r, m) { if (r === 1) return ONE; if (r === 0) return "#191f2b"; const t = (r - 1) / Math.max(1, m - 1); const hue = 195 - 30 * t; const light = 28 + 34 * t; return `hsl(${hue} 42% ${light}%)`; } export default function App() { const [bound, setBound] = useState(2000); const [m, setM] = useState(3); const [row, setRow] = useState(1); const [norm, setNorm] = useState(false); const [playing, setPlaying] = useState(false); const canvasRef = useRef(null); const primes = useMemo(() => sieve(bound), [bound]); const tri = useMemo(() => buildTriangle(primes), [primes]); const maxRow = tri.length - 1; useEffect(() => { if (row > maxRow) setRow(Math.max(1, maxRow)); }, [maxRow, row]); // ── auto-descend ── useEffect(() => { if (!playing) return; const id = setInterval(() => { setRow((r) => { if (r >= maxRow) { setPlaying(false); return r; } return r + 1; }); }, 90); return () => clearInterval(id); }, [playing, maxRow]); // ── draw residue triangle ── useEffect(() => { const cv = canvasRef.current; if (!cv) return; const N = tri[0].length; const cs = Math.max(1, Math.floor(560 / N)); const W = N * cs, H = tri.length * cs; cv.width = W; cv.height = H; const ctx = cv.getContext("2d"); ctx.fillStyle = INK; ctx.fillRect(0, 0, W, H); for (let r = 0; r < tri.length; r++) { const arr = tri[r]; for (let c = 0; c < arr.length; c++) { ctx.fillStyle = resColor(arr[c] % m, m); ctx.fillRect(c * cs, r * cs, cs, cs); } } // mark current row ctx.strokeStyle = "rgba(255,180,84,0.9)"; ctx.lineWidth = Math.max(1, cs); ctx.beginPath(); ctx.moveTo(0, row * cs + cs / 2); ctx.lineTo(tri[row].length * cs, row * cs + cs / 2); ctx.stroke(); }, [tri, m, row]); // ── transition matrix + histogram of selected row, mod m ── const { T, total, hist, ones, edge } = useMemo(() => { const arr = tri[row] || new Int32Array(); const T = Array.from({ length: m }, () => new Array(m).fill(0)); const hist = new Array(m).fill(0); for (let i = 0; i < arr.length; i++) hist[arr[i] % m]++; let tot = 0; for (let i = 1; i < arr.length; i++) { T[arr[i - 1] % m][arr[i] % m]++; tot++; } return { T, total: tot, hist, ones: hist[1] || 0, edge: arr.length ? arr[0] : "-" }; }, [tri, row, m]); const maxHist = Math.max(1, ...hist); const fmt = (x) => { if (!norm) return x; if (total === 0) return "0"; return ((100 * x) / total).toFixed(1) + "%"; }; const cellMax = Math.max(1, ...T.flat()); return (
{/* header */}

Gilbreath ⋈ mod-{m}

二階MOD規律觀測台

每個格子是質數絕對差三角的一項，依 殘差 mod {m} 著色。 琥珀色 = 殘差 1（Gilbreath 邊緣）。往下拉行游標，看 1 如何退成左邊一條孤線、主體塌進 {"{0,2}"} 的冷色塊。全程整數。

{/* controls */}
{[2, 3, 4, 5, 6, 7, 9].map((v) => ( setM(v)} style={{ padding: "3px 9px", fontSize: 13, borderRadius: 6, border: `1px solid ${m === v ? ONE : LINE}`, color: m === v ? INK : MUTE, background: m === v ? ONE : "transparent", fontWeight: 600 }}> {v} ))}
{[1000, 2000, 5000, 10000].map((v) => ( setBound(v)} style={{ padding: "3px 9px", fontSize: 13, borderRadius: 6, border: `1px solid ${bound === v ? COOL : LINE}`, color: bound === v ? INK : MUTE, background: bound === v ? COOL : "transparent", fontWeight: 600 }}> {v >= 1000 ? v / 1000 + "k" : v} ))}
{primes.length} 個質數 · {tri.length} 列
{/* triangle */}
殘差三角 (mod {m}) ← 邊緣恆 1
行游標 row {row} / {maxRow}
setPlaying((p) => !p)} style={{ padding: "4px 11px", fontSize: 12, borderRadius: 6, border: `1px solid ${LINE}`, color: playing ? INK : PAPER, background: playing ? ONE : "transparent", fontWeight: 600 }}> {playing ? "■ 停" : "▶ 下降"} { setPlaying(false); setRow(+e.target.value); }} style={{ flex: 1 }} />
{/* analytics */}
{/* stat strip */}
{/* transition matrix */}
轉移{norm ? "頻率" : "計數"}矩陣 T[from→to] setNorm((n) => !n)} style={{ padding: "2px 8px", fontSize: 11, borderRadius: 5, border: `1px solid ${norm ? ONE : LINE}`, color: norm ? ONE : MUTE }}> {norm ? "小數 ⏿" : "整數 ⏾"}
{Array.from({ length: m }).map((_, j) => (
{j}
))} {T.map((rw, i) => (
{i}
{rw.map((x, j) => { const isOne = i === 1 || j === 1; const a = x === 0 ? 0 : 0.12 + 0.6 * (x / cellMax); return (
{fmt(x)}
); })} ))}

琥珀框 = 牽涉殘差 1 的轉移。下降時這圈會空成零，只剩邊緣那一個 1 撐著。

{/* residue histogram */}
此列殘差分布
{hist.map((h, r) => (
{h}
{r}
))}

讀法。 第 1 列是質數間隙——二階MOD的指紋在這裡最濃（Lemke-Oliver 的反重複）。越往下，列被 Odlyzko 的 {"{0,2}"} 閉包吞沒， 轉移矩陣收斂成一個只支撐在 {"{0,2}"} 上的固定塊，殘差 1 退化為左邊緣那條孤線。 那是「二階MOD × Gilbreath」的核心現象：質數的個性只活在最上面幾列，深層是與質數無關的小字母動力學。

); } function Ctl({ label, children }) { return (
{label} {children}
); } function Stat({ k, v, hot }) { return (
{k}
{v}
); }