bubblechambersimart/src/render/svgVector.js

/* ============================================================
   svgVector.js — clean vector renderer for print.
   Same scene model as the photographic renderer, emitted as
   resolution-independent SVG. Soft bubbles are approximated
   with a shared radial-gradient fill; tracks get a faint
   continuity under-stroke. Grain/mottle are intentionally
   omitted (raster-only effects); this is the graphic version.

   Output is organised into named LAYERS using the Inkscape
   convention (inkscape:groupmode="layer" + inkscape:label), so
   the file opens as toggleable layers in Inkscape / Affinity and
   as named groups in Illustrator — for easy post manipulation.
   ============================================================ */
import { makeRng, cyrb53 } from '../rng.js';
import { sampleBubbles, trackInkWeight } from '../scene/bubbles.js';

const MARGIN = 0.02;

// which named track layer each particle kind belongs to (z-order: later = on top)
const TRACK_LAYERS = [
  { id: 'tracks-primary', label: 'Tracks · primary', kinds: ['primary'] },
  { id: 'tracks-cosmic', label: 'Tracks · cosmic & sweepers', kinds: ['cosmic', 'sweep'] },
  { id: 'tracks-vdecay', label: 'Tracks · V-decays', kinds: ['vdecay'] },
  { id: 'tracks-delta', label: 'Tracks · δ-rays (curls)', kinds: ['delta'] },
];

export function renderSVG(scene, params, sizePx = 4800) {
  const w = sizePx, h = sizePx;
  const scale = (w / 2) * (1 - MARGIN);
  const cx = w / 2, cy = h / 2;
  const tx = (x) => (cx + x * scale).toFixed(2);
  const ty = (y) => (cy + y * scale).toFixed(2);
  const u = w / 1000;

  const inv = params.invert;
  const paper = inv ? '#cfc8b4' : '#0e0d0b';
  const glowIn = inv ? '#e2dbc7' : '#211e18';
  const glowOut = inv ? '#b3aa92' : '#070605';
  const ink = inv ? '#1c1814' : '#e9e4d6';

  // wrap content as a named, Inkscape/Affinity-compatible layer
  const layer = (id, label, content) =>
    content ? `<g id="${id}" inkscape:groupmode="layer" inkscape:label="${label}" style="display:inline">\n${content}\n</g>\n` : '';

  /* ---------- Background ---------- */
  const bg = `<rect width="${w}" height="${h}" fill="${paper}"/>\n<rect width="${w}" height="${h}" fill="url(#paper)"/>`;

  /* ---------- Chamber optics (boundary + structural geometry) ---------- */
  let optics = '';
  if (params.showBoundary) {
    const bcx = cx, bcy = cy + h * 0.35, br = w * 0.45;
    const a1 = Math.PI * 0.15, a2 = Math.PI - Math.PI * 0.15;
    const x1 = bcx + Math.cos(Math.PI + a1) * br, y1 = bcy + Math.sin(Math.PI + a1) * br;
    const x2 = bcx + Math.cos(Math.PI + a2) * br, y2 = bcy + Math.sin(Math.PI + a2) * br;
    optics += `<path d="M ${x1.toFixed(1)} ${y1.toFixed(1)} A ${br} ${br} 0 0 1 ${x2.toFixed(1)} ${y2.toFixed(1)}" fill="none" stroke="${ink}" stroke-opacity="0.4" stroke-width="${2 * u}"/>\n`;
  }
  if (scene.instrument) {
    const inst = scene.instrument;
    let g = `<g fill="none" stroke="${ink}" stroke-linecap="round">`;
    for (const l of inst.lines)
      g += `<line x1="${tx(l.x1)}" y1="${ty(l.y1)}" x2="${tx(l.x2)}" y2="${ty(l.y2)}" stroke-opacity="${l.opacity.toFixed(3)}" stroke-width="${(l.width * u).toFixed(2)}"/>`;
    for (const a of inst.arcs) {
      let d = `M ${tx(a.pts[0].x)} ${ty(a.pts[0].y)}`;
      for (let i = 1; i < a.pts.length; i++) d += ` L ${tx(a.pts[i].x)} ${ty(a.pts[i].y)}`;
      g += `<path d="${d}" stroke-opacity="${a.opacity.toFixed(3)}" stroke-width="${(a.width * u).toFixed(2)}"/>`;
    }
    optics += g + `</g>`;
  }

  /* ---------- Shock disk ---------- */
  let shock = '';
  if (scene.shock) {
    const sh = scene.shock;
    const px = +tx(sh.x), py = +ty(sh.y), R = sh.r * scale;
    const bodyOpacity = (params.diskBubbles !== false) ? 0.6 : 1;
    shock += `<circle cx="${px}" cy="${py}" r="${R.toFixed(1)}" fill="url(#shockcore)" fill-opacity="${bodyOpacity}"/>\n`;
    if (params.diskBubbles !== false && sh.bubbleStrokes) {
      const dRng = makeRng(params.seed, 'diskbubbles');
      const dbk = new Map();
      for (const stroke of sh.bubbleStrokes) {
        const key = Math.round(Math.min(1, 0.45 + stroke.weight * 0.5) * 20) / 20;
        if (!dbk.has(key)) dbk.set(key, []);
        dbk.get(key).push(...sampleBubbles(stroke, params, dRng));
      }
      for (const [alpha, bubs] of dbk) {
        shock += `<g fill="url(#bub)" fill-opacity="${alpha}">`;
        for (const b of bubs) shock += `<circle cx="${tx(b.x)}" cy="${ty(b.y)}" r="${Math.max(b.r * scale * 1.15, 0.5).toFixed(2)}"/>`;
        shock += `</g>\n`;
      }
    } else {
      let g = `<g stroke="${ink}" stroke-linecap="round" fill="none">`;
      for (const st of sh.striations) {
        const ix = px + Math.cos(st.a) * st.inner * scale, iy = py + Math.sin(st.a) * st.inner * scale;
        const ox = px + Math.cos(st.a) * st.outer * scale, oy = py + Math.sin(st.a) * st.outer * scale;
        g += `<line x1="${ix.toFixed(1)}" y1="${iy.toFixed(1)}" x2="${ox.toFixed(1)}" y2="${oy.toFixed(1)}" stroke-opacity="${st.opacity.toFixed(3)}" stroke-width="${(st.width * u).toFixed(2)}"/>`;
      }
      for (const ring of sh.rings)
        g += `<circle cx="${px}" cy="${py}" r="${(ring.rr * scale).toFixed(1)}" stroke-opacity="${ring.opacity.toFixed(3)}" stroke-width="${(ring.width * u).toFixed(2)}"/>`;
      for (const seg of (sh.rimSegs || [])) {
        const x0 = px + Math.cos(seg.a0) * R, y0 = py + Math.sin(seg.a0) * R;
        const x1a = px + Math.cos(seg.a1) * R, y1a = py + Math.sin(seg.a1) * R;
        g += `<path d="M ${x0.toFixed(1)} ${y0.toFixed(1)} A ${R.toFixed(1)} ${R.toFixed(1)} 0 0 1 ${x1a.toFixed(1)} ${y1a.toFixed(1)}" stroke-opacity="${seg.opacity.toFixed(3)}" stroke-width="${(seg.width * u).toFixed(2)}"/>`;
      }
      for (const k of sh.core)
        g += `<line x1="${tx(k.x1)}" y1="${ty(k.y1)}" x2="${tx(k.x2)}" y2="${ty(k.y2)}" stroke-opacity="${k.opacity.toFixed(3)}" stroke-width="${(k.width * u).toFixed(2)}"/>`;
      shock += g + `</g>\n`;
    }
    let st2 = '';
    for (const st of (sh.stains || [])) {
      const sr = (st.r * scale).toFixed(1);
      st2 += `<circle cx="${tx(st.x)}" cy="${ty(st.y)}" r="${sr}" fill="url(#${st.dark ? 'shockstain' : 'shockclean'})" fill-opacity="${st.opacity.toFixed(3)}"/>`;
    }
    shock += st2;
  }

  /* ---------- Tracks (split by particle kind, bubble positions unchanged) ---------- */
  const labelFor = {};
  for (const L of TRACK_LAYERS) for (const k of L.kinds) labelFor[k] = L.id;
  const under = new Map();    // layerId -> understroke string
  const buckets = new Map();  // layerId -> Map(alpha -> circles[])
  const ensure = (id) => { if (!under.has(id)) { under.set(id, ''); buckets.set(id, new Map()); } };

  const bubbleRng = makeRng(params.seed, 'bubbles');  // consumed in scene.tracks order → deterministic
  for (const track of scene.tracks) {
    if (track.pts.length < 2) continue;
    const id = labelFor[track.kind] || 'tracks-primary';
    ensure(id);
    // continuity under-stroke
    const iw = trackInkWeight(track);
    const lw = Math.min(2.6, 0.25 + Math.sqrt(iw) * 0.12) * u * params.size * track.weight;
    if (lw >= 0.2 * u) {
      let d = `M ${tx(track.pts[0].x)} ${ty(track.pts[0].y)}`;
      for (let i = 1; i < track.pts.length; i++) d += ` L ${tx(track.pts[i].x)} ${ty(track.pts[i].y)}`;
      under.set(id, under.get(id) + `<path d="${d}" stroke-opacity="${(0.14 * track.weight).toFixed(3)}" stroke-width="${lw.toFixed(2)}"/>`);
    }
    // bubbles
    const alpha = Math.round(Math.min(1, 0.45 + track.weight * 0.5) * 20) / 20;
    const m = buckets.get(id);
    if (!m.has(alpha)) m.set(alpha, []);
    const arr = m.get(alpha);
    for (const b of sampleBubbles(track, params, bubbleRng)) {
      arr.push(`<circle cx="${tx(b.x)}" cy="${ty(b.y)}" r="${Math.max(b.r * scale * 1.15, 0.5).toFixed(2)}"/>`);
    }
  }
  const trackLayers = TRACK_LAYERS.map(L => {
    if (!under.has(L.id)) return '';
    let content = '';
    const us = under.get(L.id);
    if (us) content += `<g fill="none" stroke="${ink}" stroke-linecap="round" stroke-linejoin="round">${us}</g>\n`;
    for (const [alpha, circles] of buckets.get(L.id)) {
      if (circles.length) content += `<g fill="url(#bub)" fill-opacity="${alpha}">${circles.join('')}</g>\n`;
    }
    return layer(L.id, L.label, content);
  }).join('');

  /* ---------- Plate damage ---------- */
  let damage = '';
  const A = scene.artifacts;
  if (A) {
    let g = `<g stroke="${ink}" fill="none" stroke-linecap="round">`;
    for (const ring of A.rings)
      g += `<circle cx="${tx(ring.x)}" cy="${ty(ring.y)}" r="${(ring.r * scale).toFixed(1)}" stroke-opacity="${ring.opacity.toFixed(3)}" stroke-width="${(ring.width * u).toFixed(2)}"/>`;
    for (const sc of A.scratches)
      g += `<line x1="${tx(sc.x1)}" y1="${ty(sc.y1)}" x2="${tx(sc.x2)}" y2="${ty(sc.y2)}" stroke-opacity="${sc.opacity.toFixed(3)}" stroke-width="${(sc.width * u).toFixed(2)}"/>`;
    for (const hair of A.hairs) {
      let d = `M ${tx(hair.pts[0].x)} ${ty(hair.pts[0].y)}`;
      for (let i = 1; i < hair.pts.length; i++) d += ` L ${tx(hair.pts[i].x)} ${ty(hair.pts[i].y)}`;
      g += `<path d="${d}" stroke-opacity="${hair.opacity.toFixed(3)}" stroke-width="${(hair.width * u).toFixed(2)}"/>`;
    }
    g += `</g><g fill="${ink}">`;
    for (const sp of A.specks)
      g += `<circle cx="${tx(sp.x)}" cy="${ty(sp.y)}" r="${Math.max(sp.r * scale, 0.5).toFixed(2)}" fill-opacity="${sp.opacity.toFixed(3)}"/>`;
    damage = g + `</g>`;
  }

  /* ---------- Fiducials ---------- */
  let fids = '';
  if (params.showFiducials) {
    let g = `<g stroke="${ink}" stroke-opacity="0.55" stroke-width="${1.2 * u}">`;
    const F = [[-0.85, -0.85], [0.85, -0.85], [-0.85, 0.85], [0.85, 0.85], [0, -0.85], [-0.85, 0], [0.85, 0]];
    const sz = 9 * u;
    for (const [fx, fy] of F) {
      const px = +tx(fx), py = +ty(fy);
      g += `<line x1="${px - sz}" y1="${py}" x2="${px + sz}" y2="${py}"/><line x1="${px}" y1="${py - sz}" x2="${px}" y2="${py + sz}"/>`;
    }
    fids = g + `</g>`;
  }

  /* ---------- Vignette ---------- */
  const vign = params.vign > 0 ? `<rect width="${w}" height="${h}" fill="url(#vign)"/>` : '';

  /* ---------- Header ---------- */
  let header = '';
  if (params.showHeader) {
    const pad = 26 * u;
    const esc = (t) => String(t).replace(/[<&]/g, c => (c === '<' ? '&lt;' : '&amp;'));
    header = `<g fill="${ink}" font-family="'JetBrains Mono', monospace">`
      + `<text x="${pad.toFixed(0)}" y="${(pad + 11 * u).toFixed(0)}" font-size="${(11 * u).toFixed(0)}" fill-opacity="0.62">${esc(scene.lab.toUpperCase())}</text>`
      + `<text x="${pad.toFixed(0)}" y="${(pad + 27 * u).toFixed(0)}" font-size="${(9 * u).toFixed(0)}" fill-opacity="0.5">SEED ${esc(params.seed)}</text>`
      + `<text x="${(w - pad).toFixed(0)}" y="${(h - pad - 13 * u).toFixed(0)}" font-size="${(10 * u).toFixed(0)}" text-anchor="end" fill-opacity="0.58">PLATE ${scene.plate}</text>`
      + `<text x="${(w - pad).toFixed(0)}" y="${(h - pad).toFixed(0)}" font-size="${(10 * u).toFixed(0)}" text-anchor="end" fill-opacity="0.58">EXPOSED ${scene.exposure}</text>`
      + `</g>`;
  }

  /* ---------- Assemble ---------- */
  let s = `<?xml version="1.0" encoding="UTF-8"?>\n`;
  s += `<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">\n`;
  s += `<metadata>Bubble Chamber · seed=${params.seed} · hash=${cyrb53(params.seed)}</metadata>\n`;
  s += defs(inv, paper, glowIn, glowOut, ink, params);
  s += layer('background', 'Background', bg);
  s += layer('optics', 'Chamber optics', optics);
  s += layer('shock', 'Shock disk', shock);
  s += trackLayers;
  s += layer('damage', 'Plate damage', damage);
  s += layer('fiducials', 'Fiducials', fids);
  s += layer('vignette', 'Vignette', vign);
  s += layer('header', 'Archival header', header);
  s += `</svg>\n`;
  return s;
}

function defs(inv, paper, glowIn, glowOut, ink, params) {
  return `<defs>
    <radialGradient id="paper" cx="50%" cy="42%" r="72%">
      <stop offset="0%" stop-color="${glowIn}"/><stop offset="100%" stop-color="${glowOut}"/>
    </radialGradient>
    <radialGradient id="bub" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="${ink}" stop-opacity="1"/>
      <stop offset="55%" stop-color="${ink}" stop-opacity="0.92"/>
      <stop offset="100%" stop-color="${ink}" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="shockcore" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="${ink}" stop-opacity="0.5"/>
      <stop offset="60%" stop-color="${ink}" stop-opacity="0.28"/>
      <stop offset="100%" stop-color="${ink}" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="shockstain" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="${ink}" stop-opacity="0.9"/>
      <stop offset="100%" stop-color="${ink}" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="shockclean" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="${paper}" stop-opacity="0.9"/>
      <stop offset="100%" stop-color="${paper}" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="vign" cx="50%" cy="50%" r="72%">
      <stop offset="30%" stop-color="${inv ? '#382e1e' : '#000'}" stop-opacity="0"/>
      <stop offset="100%" stop-color="${inv ? '#382e1e' : '#000'}" stop-opacity="${(inv ? 0.5 : 0.85) * params.vign}"/>
    </radialGradient>
  </defs>\n`;
}