352 lines
21 KiB
JavaScript
352 lines
21 KiB
JavaScript
/* ============================================================
|
|
svgVector.js — clean vector renderer for print.
|
|
Same scene model as the photographic renderer, emitted as
|
|
resolution-independent SVG. Soft bubbles are approximated
|
|
with radial-gradient fills; 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 (Inkscape convention),
|
|
and coloured through the shared palette abstraction — track
|
|
ink can vary per-trail (charge, β, …); a gradient is emitted
|
|
per distinct ink colour.
|
|
============================================================ */
|
|
import { makeRng, cyrb53 } from '../rng.js';
|
|
import { sampleBubbles, trackInkWeight, depthFactors } from '../scene/bubbles.js';
|
|
import { resolvePalette, paperTone, rgbHex, rgbKey, bubbleStops, hslToRgb, mix } from './palette.js';
|
|
|
|
const MARGIN = 0.02;
|
|
|
|
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;
|
|
// base ink (mono), toned paper (independent of ink palette), then resolve feel
|
|
const baseInk = inv ? [28, 24, 20] : [233, 228, 214];
|
|
const pt = paperTone(params, inv);
|
|
const pal = resolvePalette(params.palette, {
|
|
inv, sat: params.saturation ?? 1, hue: (params.hueShift ?? 0) * 360, cycles: params.hueCycles ?? 3,
|
|
traceHue: params.traceHue ?? 0, diskHue: params.diskHue ?? 0.06, diskSat: params.diskSat ?? 0.82,
|
|
baseInk, basePaper: { flat: pt.flat, glowIn: pt.glowIn, glowOut: pt.glowOut }, baseVign: pt.vign,
|
|
});
|
|
const paperRGB = pal.paper(); // {flat,glowIn,glowOut} rgb arrays
|
|
const paperC = { flat: rgbHex(paperRGB.flat), glowIn: rgbHex(paperRGB.glowIn), glowOut: rgbHex(paperRGB.glowOut) };
|
|
const ink = rgbHex(pal.feature()); // non-particle marks (optics, disk, damage, header)
|
|
// diskPressure: a darker, denser core (compressed gas = higher pressure)
|
|
const press = Math.max(0, Math.min(1, params.diskPressure ?? 0));
|
|
const coreInk = rgbHex(mix(pal.feature(), [0, 0, 0], press * 0.7));
|
|
const featKey = rgbKey(pal.feature());
|
|
const colorMap = new Map([[featKey, pal.feature()]]); // distinct bubble colours → gradients
|
|
|
|
const attr = (t) => String(t).replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"');
|
|
const layer = (id, label, content, extra = '') =>
|
|
content ? `<g id="${id}" inkscape:groupmode="layer" inkscape:label="${attr(label)}" style="display:inline"${extra ? ' ' + extra : ''}>\n${content}\n</g>\n` : '';
|
|
|
|
/* ---------- Background ---------- */
|
|
// transparentPaper: omit paper + vignette so the event can float as an object
|
|
// over another layer (e.g. the QFT carpet) without a paper rectangle.
|
|
const bg = params.transparentPaper ? '' : `<rect width="${w}" height="${h}" fill="${paperC.flat}"/>\n<rect width="${w}" height="${h}" fill="url(#paper)"/>`;
|
|
|
|
/* ---------- Chamber optics ---------- */
|
|
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 (feature ink) ---------- */
|
|
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-${featKey})" 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 {
|
|
// optionally iridescent: hue across the sunburst (per-element stroke colour)
|
|
const spec = params.diskSpectrum || 0;
|
|
const featRGB = pal.feature();
|
|
const TWO_PI = Math.PI * 2;
|
|
const sCol = (frac) => spec <= 0 ? ink
|
|
: rgbHex(mix(featRGB, hslToRgb((((frac + (params.hueShift || 0)) % 1) + 1) % 1, 0.85 * (params.saturation ?? 1), 0.52), spec));
|
|
let g = `<g 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="${sCol(st.a / TWO_PI)}" 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="${sCol(ring.rr / sh.r)}" 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="${sCol(seg.a0 / TWO_PI)}" stroke-opacity="${seg.opacity.toFixed(3)}" stroke-width="${(seg.width * u).toFixed(2)}"/>`;
|
|
}
|
|
for (const k of sh.core) {
|
|
const ca = Math.atan2(k.y1 - sh.y, k.x1 - sh.x);
|
|
g += `<line x1="${tx(k.x1)}" y1="${ty(k.y1)}" x2="${tx(k.x2)}" y2="${ty(k.y2)}" stroke="${sCol(ca / TWO_PI)}" stroke-opacity="${k.opacity.toFixed(3)}" stroke-width="${(k.width * u).toFixed(2)}"/>`;
|
|
}
|
|
shock += g + `</g>\n`;
|
|
}
|
|
for (const st of (sh.stains || [])) {
|
|
const sr = (st.r * scale).toFixed(1);
|
|
shock += `<circle cx="${tx(st.x)}" cy="${ty(st.y)}" r="${sr}" fill="url(#${st.dark ? 'shockstain' : 'shockclean'})" fill-opacity="${st.opacity.toFixed(3)}"/>`;
|
|
}
|
|
}
|
|
|
|
/* ---------- Tracks (per-trail colour via palette; 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 (per-path stroke colour)
|
|
const buckets = new Map(); // layerId -> Map(colorKey|alpha -> {key, alpha, arr})
|
|
const ensure = (id) => { if (!under.has(id)) { under.set(id, ''); buckets.set(id, new Map()); } };
|
|
|
|
const bubbleRng = makeRng(params.seed, 'bubbles'); // 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);
|
|
const df = depthFactors(track, params);
|
|
const repCol = pal.ink(track); // representative ink (under-stroke)
|
|
// 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="${rgbHex(repCol)}" stroke-opacity="${(0.14 * df.tone).toFixed(3)}" stroke-width="${lw.toFixed(2)}"/>`);
|
|
}
|
|
// bubbles — opacity from depth/age tone, colour per-bubble from palette
|
|
const alpha = Math.round(Math.min(1, 0.36 + df.tone * 0.58) * 20) / 20;
|
|
const m = buckets.get(id);
|
|
for (const b of sampleBubbles({ ...track, sizeScale: df.sizeScale }, params, bubbleRng)) {
|
|
const bcol = pal.bubbleInk(track, b.life, b.beta), bkc = rgbKey(bcol);
|
|
if (!colorMap.has(bkc)) colorMap.set(bkc, bcol);
|
|
const bkey = bkc + '|' + alpha;
|
|
if (!m.has(bkey)) m.set(bkey, { key: bkc, alpha, arr: [] });
|
|
m.get(bkey).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-linecap="round" stroke-linejoin="round">${us}</g>\n`;
|
|
for (const { key, alpha, arr } of buckets.get(L.id).values()) {
|
|
if (arr.length) content += `<g fill="url(#bub-${key})" fill-opacity="${alpha}">${arr.join('')}</g>\n`;
|
|
}
|
|
return layer(L.id, L.label, content);
|
|
}).join('');
|
|
|
|
/* ---------- Plate damage (feature ink) ---------- */
|
|
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 && !params.transparentPaper) ? `<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 === '<' ? '<' : '&'));
|
|
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>`;
|
|
}
|
|
|
|
/* ---------- Media & hand (réseau, splice, film furniture, grease pencil) ---------- */
|
|
let media = '';
|
|
if (scene.media) {
|
|
const M = scene.media;
|
|
const nx = (x) => (cx + x * scale), ny = (y) => (cy + y * scale);
|
|
const esc = (t) => String(t).replace(/[<&]/g, c => (c === '<' ? '<' : '&'));
|
|
if (M.reseau) {
|
|
let g = `<g stroke="${ink}" stroke-opacity="${M.reseau.opacity.toFixed(3)}" stroke-width="${1 * u}">`;
|
|
const ss = M.reseau.size * scale;
|
|
for (const m of M.reseau.marks) {
|
|
const x = nx(m.x), y = ny(m.y);
|
|
g += `<line x1="${(x - ss).toFixed(1)}" y1="${y.toFixed(1)}" x2="${(x + ss).toFixed(1)}" y2="${y.toFixed(1)}"/><line x1="${x.toFixed(1)}" y1="${(y - ss).toFixed(1)}" x2="${x.toFixed(1)}" y2="${(y + ss).toFixed(1)}"/>`;
|
|
}
|
|
media += g + `</g>`;
|
|
}
|
|
if (M.splice) {
|
|
const yc = ny(M.splice.y), hh = M.splice.h * scale, deg = M.splice.tilt * 57.3;
|
|
media += `<g transform="rotate(${deg.toFixed(2)} ${(w / 2).toFixed(1)} ${yc.toFixed(1)})">`
|
|
+ `<rect x="0" y="${(yc - hh).toFixed(1)}" width="${w}" height="${(hh * 2).toFixed(1)}" fill="${ink}" fill-opacity="${M.splice.opacity.toFixed(3)}"/>`
|
|
+ `<line x1="0" y1="${(yc - hh).toFixed(1)}" x2="${w}" y2="${(yc - hh).toFixed(1)}" stroke="${ink}" stroke-opacity="${Math.min(0.6, M.splice.opacity * 2).toFixed(3)}" stroke-width="${u}"/>`
|
|
+ `<line x1="0" y1="${(yc + hh).toFixed(1)}" x2="${w}" y2="${(yc + hh).toFixed(1)}" stroke="${ink}" stroke-opacity="${Math.min(0.6, M.splice.opacity * 2).toFixed(3)}" stroke-width="${u}"/></g>`;
|
|
}
|
|
if (M.film) {
|
|
const f = M.film, m = 0.965;
|
|
media += `<rect x="${nx(-m).toFixed(1)}" y="${ny(-m).toFixed(1)}" width="${((nx(m) - nx(-m))).toFixed(1)}" height="${((ny(m) - ny(-m))).toFixed(1)}" fill="none" stroke="${ink}" stroke-opacity="0.5" stroke-width="${2 * u}"/>`;
|
|
const sw = 0.028 * scale, sh = 0.05 * scale, rx = 4 * u, holeFill = inv ? '#faf8f0' : '#12100d';
|
|
let g = '';
|
|
for (const y of f.sprockets) for (const sx of [nx(-0.985), nx(0.985)]) {
|
|
g += `<rect x="${(sx - sw / 2).toFixed(1)}" y="${(ny(y) - sh / 2).toFixed(1)}" width="${sw.toFixed(1)}" height="${sh.toFixed(1)}" rx="${rx.toFixed(1)}" fill="${holeFill}" fill-opacity="0.7" stroke="${ink}" stroke-opacity="0.4" stroke-width="${u}"/>`;
|
|
}
|
|
media += g;
|
|
media += `<g fill="${ink}" font-family="'JetBrains Mono', monospace">`
|
|
+ `<text x="${nx(-0.935).toFixed(1)}" y="${ny(0).toFixed(1)}" font-size="${(7 * u).toFixed(0)}" fill-opacity="0.45" text-anchor="middle" transform="rotate(-90 ${nx(-0.935).toFixed(1)} ${ny(0).toFixed(1)})">${esc(f.edgeText)}</text>`;
|
|
f.dataBox.forEach((line, i) => { media += `<text x="${nx(-0.9).toFixed(1)}" y="${(ny(0.8) + i * 12 * u).toFixed(1)}" font-size="${(9 * u).toFixed(0)}" fill-opacity="0.5">${esc(line)}</text>`; });
|
|
media += `</g>`;
|
|
}
|
|
if (M.grease && M.grease.length) {
|
|
// annotateInk overrides the chinagraph colour (e.g. white pencil)
|
|
const ch = params.annotateInk || (inv ? '#9c1e1e' : '#f0e296');
|
|
let g = `<g stroke="${ch}" fill="${ch}" stroke-linecap="round" stroke-linejoin="round">`;
|
|
for (const gm of M.grease) {
|
|
if (gm.kind === 'ring' || gm.kind === 'arrow') {
|
|
const pts = gm.pts || gm.shaft;
|
|
let d = `M ${nx(pts[0].x).toFixed(1)} ${ny(pts[0].y).toFixed(1)}`;
|
|
for (let i = 1; i < pts.length; i++) d += ` L ${nx(pts[i].x).toFixed(1)} ${ny(pts[i].y).toFixed(1)}`;
|
|
g += `<path d="${d}" fill="none" stroke-opacity="0.85" stroke-width="${(gm.width * u).toFixed(2)}"/>`;
|
|
if (gm.kind === 'arrow') {
|
|
const { x, y, ang } = gm.tip, hl = 0.03 * scale;
|
|
g += `<path d="M ${nx(x).toFixed(1)} ${ny(y).toFixed(1)} L ${(nx(x) - Math.cos(ang - 0.4) * hl).toFixed(1)} ${(ny(y) - Math.sin(ang - 0.4) * hl).toFixed(1)} M ${nx(x).toFixed(1)} ${ny(y).toFixed(1)} L ${(nx(x) - Math.cos(ang + 0.4) * hl).toFixed(1)} ${(ny(y) - Math.sin(ang + 0.4) * hl).toFixed(1)}" fill="none" stroke-opacity="0.85" stroke-width="${(gm.width * u).toFixed(2)}"/>`;
|
|
}
|
|
} else if (gm.kind === 'arc') {
|
|
const x0 = nx(gm.x) + Math.cos(gm.a0) * gm.r * scale, y0 = ny(gm.y) + Math.sin(gm.a0) * gm.r * scale;
|
|
const x1 = nx(gm.x) + Math.cos(gm.a1) * gm.r * scale, y1 = ny(gm.y) + Math.sin(gm.a1) * gm.r * scale;
|
|
g += `<path d="M ${x0.toFixed(1)} ${y0.toFixed(1)} A ${(gm.r * scale).toFixed(1)} ${(gm.r * scale).toFixed(1)} 0 0 1 ${x1.toFixed(1)} ${y1.toFixed(1)}" fill="none" stroke-opacity="0.85" stroke-width="${(gm.width * u).toFixed(2)}"/>`;
|
|
} else if (gm.kind === 'tick') {
|
|
g += `<line x1="${nx(gm.x1).toFixed(1)}" y1="${ny(gm.y1).toFixed(1)}" x2="${nx(gm.x2).toFixed(1)}" y2="${ny(gm.y2).toFixed(1)}" stroke-opacity="0.85" stroke-width="${(gm.width * u).toFixed(2)}"/>`;
|
|
} else if (gm.kind === 'text') {
|
|
g += `<text x="${nx(gm.x).toFixed(1)}" y="${ny(gm.y).toFixed(1)}" font-size="${(gm.size * scale).toFixed(0)}" font-family="'Bradley Hand','Segoe Script','Comic Sans MS',cursive" fill-opacity="0.9" transform="rotate(${((gm.rot || 0) * 57.3).toFixed(1)} ${nx(gm.x).toFixed(1)} ${ny(gm.y).toFixed(1)})">${esc(gm.text)}</text>`;
|
|
}
|
|
}
|
|
media += g + `</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)} · palette=${params.palette || 'mono'}</metadata>\n`;
|
|
s += defs({ paperC, ink, coreInk, press, baseVign: pal.vign(), params, u, colorMap });
|
|
s += layer('background', 'Background', bg);
|
|
s += layer('optics', 'Chamber optics', optics);
|
|
s += layer('shock', 'Shock disk', shock, params.diskSoften > 0 ? 'filter="url(#soften)"' : '');
|
|
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 += layer('media', 'Media & hand', media);
|
|
s += `</svg>\n`;
|
|
return s;
|
|
}
|
|
|
|
function defs({ paperC, ink, coreInk, press = 0, baseVign, params, u, colorMap }) {
|
|
const soften = params.diskSoften > 0
|
|
? `<filter id="soften" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="${(params.diskSoften * u).toFixed(2)}"/></filter>`
|
|
: '';
|
|
// one soft-bubble gradient per distinct ink colour used (edge profile shared
|
|
// with the raster sprite via bubbleStops)
|
|
const stops = bubbleStops(params.bubbleSoft ?? 0.3);
|
|
let bubGrads = '';
|
|
for (const [key, col] of colorMap) {
|
|
const c = rgbHex(col);
|
|
let st = '';
|
|
for (const [off, a] of stops) st += `<stop offset="${(off * 100).toFixed(0)}%" stop-color="${c}" stop-opacity="${a.toFixed(3)}"/>`;
|
|
bubGrads += `<radialGradient id="bub-${key}" cx="50%" cy="50%" r="50%">${st}</radialGradient>`;
|
|
}
|
|
const vignHex = rgbHex(baseVign);
|
|
return `<defs>
|
|
${soften}
|
|
<radialGradient id="paper" cx="50%" cy="42%" r="72%">
|
|
<stop offset="0%" stop-color="${paperC.glowIn}"/><stop offset="100%" stop-color="${paperC.glowOut}"/>
|
|
</radialGradient>
|
|
${bubGrads}
|
|
<radialGradient id="shockcore" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="${coreInk || ink}" stop-opacity="${(0.5 + press * 0.45).toFixed(2)}"/>
|
|
<stop offset="28%" stop-color="${coreInk || ink}" stop-opacity="${(0.32 + press * 0.32).toFixed(2)}"/>
|
|
<stop offset="62%" 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="${paperC.flat}" stop-opacity="0.9"/>
|
|
<stop offset="100%" stop-color="${paperC.flat}" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<radialGradient id="vign" cx="50%" cy="50%" r="72%">
|
|
<stop offset="30%" stop-color="${vignHex}" stop-opacity="0"/>
|
|
<stop offset="100%" stop-color="${vignHex}" stop-opacity="${(params.invert ? 0.5 : 0.85) * params.vign}"/>
|
|
</radialGradient>
|
|
</defs>\n`;
|
|
}
|