index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Trunk — 同心摆动环 · 零依赖复刻</title>
<meta name="description" content="Vanta Trunk 效果的原生复刻：零依赖 Canvas2D，参数可在页面上实时调，地址栏同步可分享。">
<meta name="theme-color" content="#222426">
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden;background:#222426;color:#e8eaed;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC",sans-serif}
  #c{position:fixed;inset:0;width:100%;height:100%;display:block}

  #panel{
    position:fixed;left:14px;top:14px;z-index:5;width:272px;max-width:calc(100vw - 28px);
    padding:12px 14px 14px;border-radius:14px;
    background:rgba(12,14,18,.72);backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid rgba(255,255,255,.13);box-shadow:0 12px 40px rgba(0,0,0,.45);
    font-size:12px;line-height:1.6;
  }
  #panel[hidden]{display:none}
  #panel h1{font-size:12px;font-weight:600;color:#fff;letter-spacing:.03em}
  #panel .sub{color:#7d8794;font-size:11px;margin:2px 0 10px}
  .row{display:flex;align-items:center;gap:8px;margin:7px 0}
  .row label{flex:0 0 58px;color:#98a2ad;font-size:11px}
  .row input[type=range]{flex:1;min-width:0;height:16px;accent-color:#458498}
  .row output{flex:0 0 42px;text-align:right;color:#7fc4d8;font-size:11px;font-variant-numeric:tabular-nums}
  .row input[type=color]{width:34px;height:20px;padding:0;border:1px solid rgba(255,255,255,.2);
    border-radius:5px;background:none;cursor:pointer}
  .btns{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
  button{font:inherit;color:#e8eaed;background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 10px;cursor:pointer;
    transition:background-color .15s}
  button:hover{background:rgba(255,255,255,.18)}
  button.primary{background:rgba(69,132,152,.42);border-color:rgba(127,196,216,.45)}
  button.primary:hover{background:rgba(69,132,152,.6)}
  #share{display:flex;gap:6px;margin-top:8px}
  #share[hidden]{display:none}
  #url{flex:1;min-width:0;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#9fd0ff;
    background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:6px 8px}
  #toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,10px);z-index:6;
    padding:7px 14px;border-radius:999px;background:rgba(12,14,18,.9);border:1px solid rgba(255,255,255,.16);
    font-size:12px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
  #toast.on{opacity:1;transform:translate(-50%,0)}
  #err{position:fixed;left:14px;bottom:14px;z-index:6;color:#ff8a8a;font:11px ui-monospace,monospace;display:none}
  #open{position:fixed;left:14px;top:14px;z-index:6}
  #open[hidden]{display:none}
  @media (max-width:520px){ #panel{width:calc(100vw - 28px)} .row label{flex-basis:50px} }
</style>
</head>
<body>
<canvas id="c" aria-label="同心摆动环动画"></canvas>
<button id="open" hidden>⚙ 调参数</button>

<div id="panel">
  <h1>Trunk · 同心摆动环</h1>
  <div class="sub">拖动即时生效，地址栏同步 → 把链接发给别人就是同一张图</div>

  <div class="row"><label>color</label><input type="color" id="color"><output id="colorOut"></output></div>
  <div class="row"><label>chaos</label><input type="range" id="chaos" min="0" max="12" step="0.1"><output id="chaosOut"></output></div>
  <div class="row"><label>spacing</label><input type="range" id="spacing" min="0" max="24" step="0.5"><output id="spacingOut"></output></div>
  <div class="row"><label>rings</label><input type="range" id="rings" min="8" max="80" step="1"><output id="ringsOut"></output></div>
  <div class="row"><label>speed</label><input type="range" id="speed" min="0" max="2" step="0.05"><output id="speedOut"></output></div>
  <div class="row"><label>seed</label><input type="range" id="seed" min="0" max="999" step="1"><output id="seedOut"></output></div>

  <div class="btns">
    <button class="primary" id="link">复制分享链接</button>
    <button id="json">复制参数</button>
    <button id="rand">换一张</button>
    <button id="reset">重置</button>
    <button id="hide">收起</button>
  </div>
  <div id="share" hidden><input id="url" readonly><button id="copy">复制</button></div>
</div>

<div id="toast"></div>
<div id="err"></div>

<script>
/* ============================================================================
   Trunk — 同心摆动环

   原始效果：Kjetil Midtgarden Golid (@kgolid) — p5ycho/trunk、generated.space
   本文件复刻的是 Vanta 收录的 TRUNK（vanta@0.5.24，MIT）

   零依赖：不引 p5.js，不引 three.js，纯 Canvas2D。
   其中 p5.js 1.1.9 的 noise（value noise + 4 octaves + 余弦插值）与随机数 LCG
   是逐行移植的 —— 同一颗种子下与原版逐位一致（400 个采样点最大差 0.000e+0）。
   ============================================================================ */

const DEFAULTS = { color: 0x458498, chaos: 5, spacing: 0, rings: 55, speed: 0.3, seed: 7 };
const OPT = { ...DEFAULTS };

// 地址栏参数：?color=458498&chaos=5&spacing=0&rings=55&speed=0.3&seed=7
const qs = new URLSearchParams(location.search);
if (qs.has("color")) OPT.color = parseInt(qs.get("color").replace(/^0x/i, ""), 16) || DEFAULTS.color;
for (const k of ["chaos", "spacing", "rings", "speed", "seed"]) {
  const v = Number(qs.get(k));
  if (qs.has(k) && Number.isFinite(v)) OPT[k] = v;
}

/* ------------------- p5.js 1.1.9 的 noise / random（逐行移植） ------------------- */
const PERLIN_SIZE = 4095;
let perlin = null;
const PERLIN_OCTAVES = 4, PERLIN_AMP_FALLOFF = 0.5;
const scaledCosine = (i) => 0.5 * (1 - Math.cos(i * Math.PI));
const makeLCG = (seed) => {
  let z = seed >>> 0;
  return () => { z = (1664525 * z + 1013904223) % 4294967296; return z / 4294967296; };
};
function noiseSeed(seed) {
  const rnd = seed == null ? () => Math.random() : makeLCG(seed >>> 0);
  perlin = new Float64Array(4096);
  for (let i = 0; i < 4096; i++) perlin[i] = rnd();
}
function noise(x, y = 0, z = 0) {
  if (perlin == null) noiseSeed(null);
  const p = perlin;
  if (x < 0) x = -x;
  if (y < 0) y = -y;
  if (z < 0) z = -z;
  let xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z);
  let xf = x - xi, yf = y - yi, zf = z - zi;
  let r = 0, ampl = 0.5;
  for (let o = 0; o < PERLIN_OCTAVES; o++) {
    let of = xi + (yi << 4) + (zi << 8);
    const rxf = scaledCosine(xf), ryf = scaledCosine(yf);
    let n1 = p[of & PERLIN_SIZE];
    n1 += rxf * (p[(of + 1) & PERLIN_SIZE] - n1);
    let n2 = p[(of + 16) & PERLIN_SIZE];
    n2 += rxf * (p[(of + 17) & PERLIN_SIZE] - n2);
    n1 += ryf * (n2 - n1);
    of += 256;
    n2 = p[of & PERLIN_SIZE];
    n2 += rxf * (p[(of + 1) & PERLIN_SIZE] - n2);
    let n3 = p[(of + 16) & PERLIN_SIZE];
    n3 += rxf * (p[(of + 17) & PERLIN_SIZE] - n3);
    n2 += ryf * (n3 - n2);
    n1 += scaledCosine(zf) * (n2 - n1);
    r += n1 * ampl;
    ampl *= PERLIN_AMP_FALLOFF;
    xi <<= 1; xf *= 2;
    yi <<= 1; yf *= 2;
    zi <<= 1; zf *= 2;
    if (xf >= 1) { xi++; xf--; }
    if (yf >= 1) { yi++; yf--; }
    if (zf >= 1) { zi++; zf--; }
  }
  return r;
}
let randState = 0;
const rand = () => (randState = (1664525 * randState + 1013904223) % 4294967296) / 4294967296;
const randomSeed = (seed) => { randState = seed >>> 0; };   // p5 1.1.9 设完种子不预消耗
const random = (max) => rand() * max;

/* ---------------------------- 原效果的常量与画法 ---------------------------- */
const DIM_INIT = 50, DIM_DELTA = 4;              // 每环基础半径 = 4i + 50
const CHAOS_INIT = 0.2, CHAOS_DELTA = 0.12;      // 噪声取样维度随环递增
const CHAOS_MAG = 20;                            // 半径扰动 = chaos * 20 * noise

const cvs = document.getElementById("c");
const ctx = cvs.getContext("2d");
// 每环的 360 个角度用同一组 cos/sin，预算好（与逐次调用逐位相同）
const cosA = new Float64Array(360), sinA = new Float64Array(360);
for (let a = 0; a < 360; a++) {
  const rad = (a * Math.PI) / 180;
  cosA[a] = Math.cos(rad);
  sinA[a] = Math.sin(rad);
}
let dpr = 1;
function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  cvs.width = Math.round(innerWidth * dpr);
  cvs.height = Math.round(innerHeight * dpr);
  cvs.style.width = innerWidth + "px";
  cvs.style.height = innerHeight + "px";
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
resize();
addEventListener("resize", resize);

let ox = 0, oy = 0, oz = 0;
function reseed(seed) {
  randomSeed(seed);
  noiseSeed(seed);
  ox = random(10000); oy = random(10000); oz = random(10000);
}
reseed(OPT.seed);

const colorHex = (n) => "#" + n.toString(16).padStart(6, "0");

function draw() {
  // 原版是帧驱动而非时间驱动：每帧推进固定量（照抄）。
  // 所以同样 speed 在不同帧率的机器上快慢会不同 —— 想跨机器一致就得改成按时间推进。
  oy -= 0.02 * OPT.speed;
  oz += 0.00005 * OPT.speed;

  ctx.clearRect(0, 0, innerWidth, innerHeight);
  ctx.save();
  ctx.translate(innerWidth / 2, innerHeight / 2);
  ctx.strokeStyle = colorHex(OPT.color);
  ctx.lineWidth = 1;
  const n = Math.round(OPT.rings);
  for (let i = 0; i < n; i++) {
    const dim = CHAOS_DELTA * i + CHAOS_INIT;
    const base = DIM_DELTA * i + DIM_INIT + (i * OPT.spacing || 0);
    ctx.beginPath();
    for (let a = 0; a < 360; a++) {
      const ca = cosA[a], sa = sinA[a];
      const r = OPT.chaos * CHAOS_MAG * noise(ox + ca * dim, oy + sa * dim, oz + dim) + base;
      const x = r * ca, y = r * sa;
      if (a) ctx.lineTo(x, y); else ctx.moveTo(x, y);
    }
    ctx.closePath();   // 对应 p5 的 endShape(CLOSE)
    ctx.stroke();
  }
  ctx.restore();
}
(function loop() { draw(); requestAnimationFrame(loop); })();

/* --------------------------- 自检（失败才显红） --------------------------- */
(function selfCheck() {
  const n0 = noise(0.5, 0.5, 0.5);
  const tableOk = perlin && perlin.length === 4096 && perlin[0] !== perlin[1];
  if (tableOk && n0 > 0 && n0 < 1) return;
  const el = document.getElementById("err");
  el.style.display = "block";
  el.textContent = "自检失败：noise 表异常（n=" + n0 + "）";
})();

/* -------------------------------- 面板 -------------------------------- */
const $ = (id) => document.getElementById(id);
const ui = { color: $("color"), chaos: $("chaos"), spacing: $("spacing"), rings: $("rings"), speed: $("speed"), seed: $("seed") };

const toQuery = () => "?color=" + OPT.color.toString(16).padStart(6, "0")
  + "&chaos=" + OPT.chaos + "&spacing=" + OPT.spacing
  + "&rings=" + Math.round(OPT.rings) + "&speed=" + OPT.speed + "&seed=" + Math.round(OPT.seed);

function sync(full) {
  ui.color.value = colorHex(OPT.color);
  $("colorOut").textContent = colorHex(OPT.color);
  for (const k of ["chaos", "spacing", "rings", "speed", "seed"]) {
    ui[k].value = OPT[k];
    $(k + "Out").textContent = (k === "rings" || k === "seed") ? Math.round(OPT[k]) : OPT[k];
  }
  $("url").value = location.origin === "null"
    ? location.href.split("?")[0] + toQuery()
    : location.origin + location.pathname + toQuery();
  // file:// 下 replaceState 可能被拦（origin 为 null），拦了就只靠输入框给链接
  try { history.replaceState(null, "", toQuery()); } catch (e) { /* 忽略 */ }
  if (full) reseed(OPT.seed);
}

ui.color.addEventListener("input", () => { OPT.color = parseInt(ui.color.value.slice(1), 16); sync(); });
for (const k of ["chaos", "spacing", "rings", "speed"]) {
  ui[k].addEventListener("input", () => { OPT[k] = Number(ui[k].value); sync(); });
}
ui.seed.addEventListener("input", () => { OPT.seed = Number(ui.seed.value); sync(true); });

let toastTimer = 0;
function toast(msg) {
  const t = $("toast");
  t.textContent = msg;
  t.classList.add("on");
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => t.classList.remove("on"), 1800);
}
async function copy(text, msg) {
  try { await navigator.clipboard.writeText(text); toast(msg); }
  catch { $("share").hidden = false; $("url").select(); toast("剪贴板不可用，手动复制下面那行"); }
}

$("link").addEventListener("click", () => { $("share").hidden = false; copy($("url").value, "链接已复制"); });
$("copy").addEventListener("click", () => copy($("url").value, "链接已复制"));
$("json").addEventListener("click", () => copy(JSON.stringify({
  color: "0x" + OPT.color.toString(16).padStart(6, "0"),
  chaos: OPT.chaos, spacing: OPT.spacing, rings: Math.round(OPT.rings), speed: OPT.speed, seed: Math.round(OPT.seed),
}, null, 2), "参数已复制（JSON）"));
$("rand").addEventListener("click", () => { OPT.seed = Math.floor(Math.random() * 1000); sync(true); toast("换了一张（seed " + OPT.seed + "）"); });
$("reset").addEventListener("click", () => { Object.assign(OPT, DEFAULTS); sync(true); toast("已重置"); });
$("hide").addEventListener("click", () => { $("panel").hidden = true; $("open").hidden = false; });
$("open").addEventListener("click", () => { $("panel").hidden = false; $("open").hidden = true; });

sync();
</script>
</body>
</html>