Wijzigen voor document Tekenveld

Laatst gewijzigd door Jeeves de Butler op 23-10-2026 02:42

Manage
- Kopiëren
Actions
- Export
- Afdrukvoorbeeld
Viewers
- Bekijk Bron
- Zusjes
- Inhoud
- Opmerkingen
- Bijlagen
- Historie
- Informatie
- Likes

From 8.1 to 7.1

Van versie 7.1

gewijzigd door Jeeves de Butler
op 19-10-2026 01:22

Opmerking bij wijziging: Er is geen opmerking bij deze versie

Naar versie 1.1

gewijzigd door Jeeves de Butler
op 16-10-2026 12:29

Opmerking bij wijziging: Er is geen opmerking bij deze versie

Raw
Rendered

Samenvatting

Objecten (0 gewijzigd, 0 toegevoegd, 5 verwijderd)

Details

XWiki.JavaScriptExtension[0]

cache

...	...	@@ -1,1 +1,0 @@
1		-long

code

@@ -1,1391 +1,0 @@
--/* Tekenveld voor de Kennisbank. Gemaakt met maak-tekenveld.js uit de skill xwiki-wardenburg-admin.
--   Engine: Ember src/lib/glyphField.js, commit 83ea536. Niet hier wijzigen: pas de bron aan en maak opnieuw. */
--(function () {
--"use strict";
--// /src/lib/glyphField.js
--
--/* Het tekenveld (Home, het Dashboard, de lijstpagina's, inloggen en de foutpagina's; welke pagina's
--   het krijgen staat bij de route, zie src/components/RouteBackground.jsx): een raster van willekeurige letters en cijfers in een monospace
--   letter, bijna onzichtbaar, met langzaam drijvende dichtere wolken. Waar de muis langs
--   gaat, worden de tekens donkerder, kleuren ze naar het merkrood en wisselen ze snel; dat
--   spoor dooft in een paar seconden weer uit. Daaronder klopt een rustige hartslag: twee
--   hartvormige ringen die vanuit de muis uitdijen en uitdoven. Af en toe schiet er een rode
--   hartmonitorlijn over het scherm, en een klik op de achtergrond laat een smiley opspringen.
--
--   Bewust zonder React: de engine tekent op een canvas en leest het thema uit de CSS-tokens
--   (--text en --brand-red), zodat hij licht en donker vanzelf volgt.
--
--   Zuinig met CPU en GPU, want het veld staat open zolang de pagina openstaat:
--   - de tekens staan eenmalig in een atlas en worden per cel gekopieerd (drawImage) in
--     plaats van steeds opnieuw gezet (fillText);
--   - het rustende veld staat op een eigen laag die maar vier keer per seconde opnieuw wordt
--     getekend; per frame gaat die laag in één keer over het canvas;
--   - per frame worden alleen de cellen onder het spoor en de hartslag bijgewerkt, binnen de
--     kleinste rechthoek waarin nog iets ligt;
--   - op een verborgen tabblad tekent het veld niet, en bij prefers-reduced-motion staat er
--     één stilstaand beeld zonder spoor. */
--
--const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
--
--/* Het thema bepaalt welke tekens het veld gebruikt. Nu alleen de standaardset; een seizoensset
--   (sneeuwvlokken rond kerst, paaseitjes rond Pasen) komt hier later bij als eigen thema, zonder dat
--   een pagina iets hoeft te weten. Elk teken krijgt één cel; hooguit 256 tekens (Uint8Array). */
--const GLYPH_THEMES = Object.freeze({
--  standaard: Object.freeze({ label: "Standaard", glyphs: Object.freeze(Array.from(GLYPHS)) }),
--});
--
--const DEFAULT_GLYPH_THEME = "standaard";
--
--/* Intensiteit per pagina. "vol" is het veld van Home zoals het is; "lijst" heeft in rust minder
--   tekens (de wolken liggen hoger, zodat er minder cellen boven de drempel komen), maar elk teken is
--   even duidelijk en het muisspoor, de hartslag, de hartslaglijn, de smileys en de explosie blijven
--   precies gelijk. Gemeten: in rust staan er op "lijst" ongeveer 70% van de tekens van "vol". */
--const GLYPH_INTENSITIES = Object.freeze({
--  vol: Object.freeze({}),
--  lijst: Object.freeze({ ambientLift: -0.05 }),
--});
--
--const DEFAULT_GLYPH_INTENSITY = "vol";
--
--/* De opties voor createGlyphField bij een intensiteit en een thema. Een onbekende naam is een
--   programmeerfout; die wordt gemeld en valt terug op de standaard, zodat de pagina niet stukgaat. */
--function glyphFieldSettings({ intensity = DEFAULT_GLYPH_INTENSITY, theme = DEFAULT_GLYPH_THEME } = {}) {
--  let intensityOptions = GLYPH_INTENSITIES[intensity];
--  if (!intensityOptions) {
--    console.error(`tekenveld: onbekende intensiteit "${intensity}"; ${DEFAULT_GLYPH_INTENSITY} gebruikt`);
--    intensityOptions = GLYPH_INTENSITIES[DEFAULT_GLYPH_INTENSITY];
--  }
--  let themeOptions = GLYPH_THEMES[theme];
--  if (!themeOptions) {
--    console.error(`tekenveld: onbekend thema "${theme}"; ${DEFAULT_GLYPH_THEME} gebruikt`);
--    themeOptions = GLYPH_THEMES[DEFAULT_GLYPH_THEME];
--  }
--  return { ...intensityOptions, glyphs: themeOptions.glyphs };
--}
--
--const DEFAULTS = {
--  // De tekens van het veld; zie GLYPH_THEMES.
--  glyphs: GLYPH_THEMES.standaard.glyphs,
--  fontSize: 12,
--  lineHeight: 15,
--  fontFamily: 'ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace',
--  // Zichtbaarheid van de wolken in het rustende veld; donker oogt sneller sterker.
--  ambientMax: { light: 0.1, dark: 0.075 },
--  // Hoe hoog de wolken liggen: lager betekent minder tekens in rust (zie GLYPH_INTENSITIES).
--  ambientLift: 0.05,
--  // Zichtbaarheid onder het spoor van de muis.
--  trailNeutral: { light: 0.38, dark: 0.3 },
--  trailAccent: { light: 0.4, dark: 0.45 },
--  brushRadius: 70,
--  trailSeconds: 2.2,
--  ambientIntervalMs: 250,
--  maxFps: 30,
--  // Bepaalt of een klik op de achtergrond viel (en dus een smiley geeft); zonder deze
--  // functie telt elke klik.
--  isBackground: null,
--  // Geeft de rechthoeken (getBoundingClientRect) van de inhoud; de hartslaglijn kiest bij
--  // voorkeur een strook waar die niet staan.
--  obstacles: null,
--  // Hartslag: elke slag twee hartvormige ringen vlak na elkaar (lub-dub) die vanaf de muis
--  // uitdijen en onderweg uitdoven. In rust een slag per heartPeriod; tijdens bewegen een
--  // slag per heartSpacing pixels, maar niet vaker dan per heartMinGap seconden.
--  heartPeriod: 4,
--  heartDubDelay: 0.2,
--  // De tweede slag (dub) is een zachte naklank van de eerste, geen tweede volle ring.
--  heartDubWeight: 0.3,
--  heartSpacing: 420,
--  heartMinGap: 1.4,
--  heartMaxRings: 12,
--  // Hartslaglijn: af en toe trekt er op een willekeurige hoogte een rode lijn in de vorm van
--  // een hartmonitor van links naar rechts over het scherm; het spoor dooft vanzelf uit.
--  ecgEverySeconds: [10, 24],
--  ecgFirstSeconds: [3, 7],
--  ecgCrossSeconds: 0.7,
--  ecgBeatWidth: 165,
--  ecgAmplitude: 105,
--  ecgRadius: 10,
--  // De hartslaglijn en de smileys hebben een eigen, kort spoor; ze moeten flitsen, niet
--  // blijven hangen zoals het spoor van de muis.
--  streakSeconds: 0.3,
--  streakNeutral: { light: 0.1, dark: 0.08 },
--  streakAccent: { light: 1, dark: 1 },
--  // Smileys: een klik op de achtergrond laat er een opspringen; spammen mag.
--  smileyRadius: 145,
--  smileySeconds: 1.5,
--  smileyMax: 40,
--  // Variatie in de hartslaglijn; een op de zes lijnen is wild.
--  ecgWildChance: 0.17,
--  // Vijf snelle klikken: een atoomexplosie. De letters vallen van het scherm; na 15 s mogen
--  // de smileys weer, na 30 s komt de hartslaglijn terug, na 45 s de hartslag en het
--  // muisspoor, na 60 s het hele veld.
--  nukeClicks: 5,
--  nukeClickWindow: 1.6,
--  nukeFallAfter: 2.4,
--  nukeSmileyAfter: 15,
--  nukeEcgAfter: 30,
--  nukeHeartAfter: 45,
--  nukeNormalAfter: 60,
--  ecgStrength: 1,
--  heartDuration: 1.9,
--  heartReach: 0.42,
--  heartThickness: 40,
--  heartStrength: 0.6,
--  heartSeconds: 0.15,
--  // Hoe rood een verse ring is ten opzichte van het muisspoor.
--  heartRed: 1.3,
--};
--
--const MIN_ALPHA = 0.01;
--
--/* Straal van een hart per hoek, vanuit het midden van het hart en met de punt naar
--   beneden; de grootste straal is 1. Gemaakt uit de bekende parametrische hartkromme. */
--const HEART_BINS = 360;
--const HEART_RADIUS = (() => {
--  const points = [];
--  for (let i = 0; i < 2000; i += 1) {
--    const t = (i / 2000) * Math.PI * 2;
--    const x = 16 * Math.sin(t) ** 3;
--    const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
--    points.push([x, y]);
--  }
--  const ys = points.map((p) => p[1]);
--  const midY = (Math.min(...ys) + Math.max(...ys)) / 2;
--  const table = new Float32Array(HEART_BINS);
--  for (const [x, y] of points) {
--    const angle = Math.atan2(y - midY, x);
--    const bin = Math.floor(((angle + Math.PI) / (Math.PI * 2)) * HEART_BINS) % HEART_BINS;
--    table[bin] = Math.max(table[bin], Math.hypot(x, y - midY));
--  }
--  for (let i = 0; i < HEART_BINS; i += 1) {
--    if (!table[i]) table[i] = table[(i + HEART_BINS - 1) % HEART_BINS];
--  }
--  const max = Math.max(...table);
--  for (let i = 0; i < HEART_BINS; i += 1) table[i] /= max;
--  return table;
--})();
--const HEART_MIN = Math.min(...HEART_RADIUS);
--
--function randomBetween([min, max]) {
--  return min + Math.random() * (max - min);
--}
--
--function bump(u, center, width, height) {
--  const d = (u - center) / width;
--  return height * Math.exp(-d * d);
--}
--
--/* Een slag van een hartmonitor over een fase u van 0 tot 1: ronde P-golf, de scherpe QRS-piek
--   met een diepe S, een licht oplopend ST-stuk, een brede T-golf en een kleine U-golf. Omhoog
--   is positief. */
--function ecgShape(u) {
--  return (
--    bump(u, 0.18, 0.05, 0.16) +
--    bump(u, 0.36, 0.012, -0.14) +
--    bump(u, 0.4, 0.013, 1) +
--    bump(u, 0.44, 0.014, -0.34) +
--    bump(u, 0.5, 0.05, 0.04) +
--    bump(u, 0.66, 0.075, 0.32) +
--    bump(u, 0.82, 0.035, 0.05)
--  );
--}
--
--/* Smileys in genormaliseerde coördinaten: het midden is (0, 0), de rand van het gezicht
--   ligt op straal 1 en y loopt naar beneden. Elke vorm geeft per punt 1 (teken) of 0. */
--function inDot(x, y, cx, cy, radius) {
--  return Math.hypot(x - cx, y - cy) < radius;
--}
--
--function inSmile(x, y) {
--  return y > 0.12 && Math.abs(Math.hypot(x, y + 0.05) - 0.56) < 0.09;
--}
--
--function inHeartEye(x, y, cx, cy) {
--  const dx = (x - cx) / 0.2;
--  const dy = (y - cy) / 0.2;
--  return Math.hypot(dx, dy) < heartRadius(dx, dy);
--}
--
--const SMILEYS = [
--  // blij
--  (x, y) => inDot(x, y, -0.33, -0.28, 0.13) || inDot(x, y, 0.33, -0.28, 0.13) || inSmile(x, y),
--  // grote lach
--  (x, y) =>
--    inDot(x, y, -0.33, -0.3, 0.13) ||
--    inDot(x, y, 0.33, -0.3, 0.13) ||
--    // open mond: de rand van een D, met een gat erin
--    (y > 0.06 && Math.hypot(x, y - 0.05) < 0.62 && !(y > 0.2 && Math.hypot(x, y - 0.05) < 0.44)),
--  // knipoog
--  (x, y) =>
--    (Math.abs(y + 0.28) < 0.09 && Math.abs(x + 0.33) < 0.17) || inDot(x, y, 0.33, -0.28, 0.13) || inSmile(x, y),
--  // tong uit
--  (x, y) =>
--    inDot(x, y, -0.33, -0.28, 0.13) ||
--    inDot(x, y, 0.33, -0.28, 0.13) ||
--    (Math.abs(y - 0.28) < 0.08 && Math.abs(x) < 0.42) ||
--    (y > 0.28 && inDot(x, y, 0.14, 0.46, 0.21)),
--  // verliefd
--  (x, y) => inHeartEye(x, y, -0.33, -0.26) || inHeartEye(x, y, 0.33, -0.26) || inSmile(x, y),
--  // verbaasd
--  (x, y) =>
--    inDot(x, y, -0.33, -0.3, 0.13) ||
--    inDot(x, y, 0.33, -0.3, 0.13) ||
--    Math.abs(Math.hypot(x, y - 0.4) - 0.19) < 0.08,
--];
--
--function smileyAt(kind, x, y) {
--  const r = Math.hypot(x, y);
--  // De rand is minstens één rasterregel dik, anders valt hij onderaan tussen de regels door.
--  if (Math.abs(r - 0.9) < 0.12) return true;
--  if (r > 0.78) return false;
--  return SMILEYS[kind](x, y);
--}
--function hash(value) {
--  const x = Math.sin(value * 12.9898) * 43758.5453;
--  return x - Math.floor(x);
--}
--
--function heartRadius(dx, dy) {
--  const bin = Math.floor(((Math.atan2(dy, dx) + Math.PI) / (Math.PI * 2)) * HEART_BINS) % HEART_BINS;
--  return HEART_RADIUS[bin];
--}
--
--function clamp01(value) {
--  return value < 0 ? 0 : value > 1 ? 1 : value;
--}
--
--function readTheme() {
--  const root = document.documentElement;
--  const styles = getComputedStyle(root);
--  const text = styles.getPropertyValue("--text").trim() || "#111827";
--  const accent = styles.getPropertyValue("--brand-red").trim() || "#e62b27";
--  // Een eigen kleur voor de hartslaglijn (ECG); zonder --glyph-line is dat het accent, zoals in Ember.
--  const line = styles.getPropertyValue("--glyph-line").trim() || accent;
--  // :root zonder attribuut is in Ember donker; zie layout.css.
--  const mode = root.getAttribute("data-appearance") === "light" ? "light" : "dark";
--  return { text, accent, line, mode };
--}
--
--/* De tekens van een thema: een niet-lege lijst van hooguit 256 tekens (de index staat in een Uint8Array). */
--function checkGlyphs(glyphs) {
--  const list = Array.from(glyphs || []);
--  if (!list.length || list.length > 256) throw new Error("tekenveld: een thema heeft 1 tot 256 tekens");
--  return list;
--}
--
--/* Wat geen achtergrond is, staat met data-glyph-block op het element: een blok, een tegel, een kop.
--   Een klik daarop geeft geen smiley, en de hartslaglijn loopt bij voorkeur waar die niet staan. De
--   pagina markeert zelf; het veld kent geen vaste selectors van een pagina. */
--const GLYPH_BLOCK_SELECTOR = "[data-glyph-block]";
--
--/* De rechthoeken van alle gemarkeerde blokken die zichtbaar zijn; voor de optie obstacles. */
--function glyphBlockRects(root = document) {
--  return Array.from(root.querySelectorAll(GLYPH_BLOCK_SELECTOR), (element) => element.getBoundingClientRect())
--    .filter((rect) => rect.width > 0 && rect.height > 0);
--}
--
--/* Start het veld op een canvas. Geeft { destroy, configure } terug: configure past de intensiteit of
--   het thema aan terwijl het veld doorloopt (een andere pagina met hetzelfde veld), zonder opnieuw te
--   beginnen. */
--function createGlyphField(canvas, overrides = {}) {
--  const options = { ...DEFAULTS, ...overrides };
--  let glyphSet = checkGlyphs(options.glyphs);
--  const randomGlyph = () => (Math.random() * glyphSet.length) | 0;
--  const ctx = canvas.getContext("2d");
--  const layer = document.createElement("canvas");
--  const layerCtx = layer.getContext("2d");
--  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
--
--  let dpr = 1;
--  let cellW = 7;
--  let cellH = options.lineHeight;
--  let tileW = 7;
--  let tileH = 15;
--  let cols = 0;
--  let rows = 0;
--  let glyphs = new Uint8Array(0);
--  let ambient = new Float32Array(0);
--  let trail = new Float32Array(0);
--  let pulse = new Float32Array(0);
--  let streak = new Float32Array(0);
--  // Het spoor van de hartslaglijn apart van dat van de smileys, zodat de lijn een eigen kleur kan hebben.
--  let lineTrail = new Float32Array(0);
--  let quiet = new Float32Array(0);
--  let neutralAtlas = null;
--  let accentAtlas = null;
--  let lineAtlas = null;
--  let yellowAtlas = null;
--  let orangeAtlas = null;
--  let smokeAtlas = null;
--  let theme = readTheme();
--
--  // Rechthoek (in cellen) waarbinnen nog spoor ligt; leeg als minC > maxC.
--  let minC = 1;
--  let maxC = 0;
--  let minR = 1;
--  let maxR = 0;
--
--  let pointer = null;
--  let lastPointer = null;
--  let heartHome = null;
--  let rings = [];
--  let lastBeatAt = -Infinity;
--  let lastBeatSpot = null;
--  let ecg = null;
--  let smileys = [];
--  let calm = 1;
--  let nuke = null;
--  let clickTimes = [];
--  let fallers = null;
--  let nextEcgAt = performance.now() + randomBetween(options.ecgFirstSeconds) * 1000;
--  let frameId = 0;
--  let lastFrame = 0;
--  let lastAmbient = -Infinity;
--  let running = false;
--  let destroyed = false;
--
--  function buildAtlas(color) {
--    const atlas = document.createElement("canvas");
--    atlas.width = tileW * glyphSet.length;
--    atlas.height = tileH;
--    const a = atlas.getContext("2d");
--    a.font = `${options.fontSize * dpr}px ${options.fontFamily}`;
--    a.textBaseline = "middle";
--    a.textAlign = "center";
--    a.fillStyle = color;
--    for (let i = 0; i < glyphSet.length; i += 1) {
--      a.fillText(glyphSet[i], i * tileW + tileW / 2, tileH / 2 + dpr * 0.5);
--    }
--    return atlas;
--  }
--
--  function buildAtlases() {
--    neutralAtlas = buildAtlas(theme.text);
--    accentAtlas = buildAtlas(theme.accent);
--    lineAtlas = theme.line === theme.accent ? accentAtlas : buildAtlas(theme.line);
--    // Vuurkleuren voor de explosie.
--    yellowAtlas = buildAtlas(theme.mode === "light" ? "#eab308" : "#facc15");
--    orangeAtlas = buildAtlas("#f97316");
--    // Rook: zwart op licht; op donker donkergrijs, anders zie je hem niet.
--    smokeAtlas = buildAtlas(theme.mode === "light" ? "#0b0b0f" : "#52525b");
--  }
--
--  function resize() {
--    dpr = Math.min(window.devicePixelRatio || 1, 2);
--    const width = window.innerWidth;
--    const height = window.innerHeight;
--
--    canvas.width = layer.width = Math.round(width * dpr);
--    canvas.height = layer.height = Math.round(height * dpr);
--    canvas.style.width = `${width}px`;
--    canvas.style.height = `${height}px`;
--
--    ctx.font = `${options.fontSize}px ${options.fontFamily}`;
--    cellW = Math.max(6, Math.round(ctx.measureText("M").width * 10) / 10);
--    cellH = options.lineHeight;
--    tileW = Math.ceil(cellW * dpr);
--    tileH = Math.ceil(cellH * dpr);
--
--    cols = Math.ceil(width / cellW) + 1;
--    rows = Math.ceil(height / cellH) + 1;
--    glyphs = new Uint8Array(cols * rows);
--    for (let i = 0; i < glyphs.length; i += 1) glyphs[i] = randomGlyph();
--    ambient = new Float32Array(cols * rows);
--    trail = new Float32Array(cols * rows);
--    pulse = new Float32Array(cols * rows);
--    streak = new Float32Array(cols * rows);
--    lineTrail = new Float32Array(cols * rows);
--    quiet = new Float32Array(cols * rows);
--    minC = minR = 1;
--    maxC = maxR = 0;
--
--    buildAtlases();
--    lastAmbient = -Infinity;
--    render(performance.now(), 0);
--  }
--
--  function applyTheme() {
--    const next = readTheme();
--    if (next.text === theme.text && next.accent === theme.accent && next.line === theme.line && next.mode === theme.mode) return;
--    theme = next;
--    buildAtlases();
--    lastAmbient = -Infinity;
--    render(performance.now(), 0);
--  }
--
--  function cellX(c) {
--    return Math.round(c * cellW * dpr);
--  }
--
--  function cellY(r) {
--    return Math.round(r * cellH * dpr);
--  }
--
--  // Het rustende veld: twee trage golven per as en een diagonale band. Alleen de toppen
--  // worden zichtbaar, zodat er losse wolken ontstaan en geen egaal behang.
--  function drawAmbient(time, elapsed) {
--    const t = time / 1000;
--    const max = options.ambientMax[theme.mode];
--    const colWave = new Float32Array(cols);
--    const rowWave = new Float32Array(rows);
--    for (let c = 0; c < cols; c += 1) {
--      colWave[c] = Math.sin(c * 0.045 + t * 0.21) + 0.6 * Math.sin(c * 0.013 - t * 0.09);
--    }
--    for (let r = 0; r < rows; r += 1) {
--      rowWave[r] = Math.sin(r * 0.11 - t * 0.17) + 0.6 * Math.sin(r * 0.031 + t * 0.07);
--    }
--
--    // Tekens wisselen ook in rust, heel af en toe.
--    const rerollChance = elapsed > 0 ? Math.min(0.05 * elapsed, 0.2) : 0;
--
--    layerCtx.setTransform(1, 0, 0, 1, 0, 0);
--    layerCtx.clearRect(0, 0, layer.width, layer.height);
--    let currentAlpha = -1;
--
--    for (let r = 0; r < rows; r += 1) {
--      const y = cellY(r);
--      const rw = rowWave[r];
--      for (let c = 0; c < cols; c += 1) {
--        const index = r * cols + c;
--        const wave = (colWave[c] * rw + Math.sin((c + r * 2.2) * 0.035 + t * 0.12)) / 3.2;
--        const cloud = clamp01((wave + options.ambientLift) * 2.2);
--        const alpha = Math.round(max * cloud * cloud * 128) / 128;
--        ambient[index] = alpha;
--        if (rerollChance && Math.random() < rerollChance) glyphs[index] = randomGlyph();
--        if (alpha < MIN_ALPHA) continue;
--        if (alpha !== currentAlpha) {
--          layerCtx.globalAlpha = alpha;
--          currentAlpha = alpha;
--        }
--        layerCtx.drawImage(neutralAtlas, glyphs[index] * tileW, 0, tileW, tileH, cellX(c), y, tileW, tileH);
--      }
--    }
--    layerCtx.globalAlpha = 1;
--  }
--
--  // Een zachte kwast op de plek van de muis; het spoor neemt het hoogste van oud en nieuw.
--  // flat: een harde kern zonder zachte rand, voor een scherpe lijn in plaats van een vlek.
--  function stamp(px, py, radius = options.brushRadius, strength = 1, flat = false, target = trail) {
--    const c0 = Math.max(0, Math.floor((px - radius) / cellW));
--    const c1 = Math.min(cols - 1, Math.ceil((px + radius) / cellW));
--    const r0 = Math.max(0, Math.floor((py - radius) / cellH));
--    const r1 = Math.min(rows - 1, Math.ceil((py + radius) / cellH));
--    if (c0 > c1 || r0 > r1) return;
--    const inv = 1 / (radius * radius);
--
--    for (let r = r0; r <= r1; r += 1) {
--      const dy = r * cellH + cellH / 2 - py;
--      for (let c = c0; c <= c1; c += 1) {
--        const dx = c * cellW + cellW / 2 - px;
--        const d = (dx * dx + dy * dy) * inv;
--        if (d >= 1) continue;
--        // Rafelige rand: niet elke cel aan de buitenkant doet even hard mee.
--        const edge = flat ? (d < 0.6 ? 1 : (1 - d) / 0.4) : (1 - d) * (1 - d) * (0.75 + Math.random() * 0.25);
--        const value = edge * strength;
--        const index = r * cols + c;
--        if (value > target[index]) target[index] = value;
--      }
--    }
--
--    extendBox(c0, c1, r0, r1);
--  }
--
--  function extendBox(c0, c1, r0, r1) {
--    if (minC > maxC) {
--      minC = c0;
--      maxC = c1;
--      minR = r0;
--      maxR = r1;
--    } else {
--      minC = Math.min(minC, c0);
--      maxC = Math.max(maxC, c1);
--      minR = Math.min(minR, r0);
--      maxR = Math.max(maxR, r1);
--    }
--  }
--
--  // Een hartvormige ring met de grootste straal `size` rond (cx, cy). Per rij worden alleen
--  // de kolommen bekeken die tussen de kleinste en grootste straal van de ring vallen.
--  function stampRing(cx, cy, size, strength) {
--    const half = options.heartThickness / 2;
--    const outer = size + half;
--    const inner = Math.max(0, size * HEART_MIN - half);
--    const r0 = Math.max(0, Math.floor((cy - outer) / cellH));
--    const r1 = Math.min(rows - 1, Math.ceil((cy + outer) / cellH));
--    let touched = false;
--
--    for (let r = r0; r <= r1; r += 1) {
--      const dy = r * cellH + cellH / 2 - cy;
--      const outerSpan = outer * outer - dy * dy;
--      if (outerSpan <= 0) continue;
--      const reach = Math.sqrt(outerSpan);
--      const innerSpan = inner * inner - dy * dy;
--      const gap = innerSpan > 0 ? Math.sqrt(innerSpan) : 0;
--      const c0 = Math.max(0, Math.floor((cx - reach) / cellW));
--      const c1 = Math.min(cols - 1, Math.ceil((cx + reach) / cellW));
--
--      for (let c = c0; c <= c1; c += 1) {
--        const dx = c * cellW + cellW / 2 - cx;
--        if (dx > -gap && dx < gap) {
--          c = Math.max(c, Math.floor((cx + gap) / cellW) - 1);
--          continue;
--        }
--        const distance = Math.sqrt(dx * dx + dy * dy);
--        const offset = Math.abs(distance - size * heartRadius(dx, dy)) / half;
--        if (offset >= 1) continue;
--        const value = (1 - offset * offset) * strength;
--        const index = r * cols + c;
--        if (value > pulse[index]) pulse[index] = value;
--        touched = true;
--      }
--    }
--
--    if (touched) {
--      extendBox(
--        Math.max(0, Math.floor((cx - outer) / cellW)),
--        Math.min(cols - 1, Math.ceil((cx + outer) / cellW)),
--        r0,
--        r1
--      );
--    }
--  }
--
--  // Een slag: twee ringen vanaf dezelfde plek, de tweede iets later en veel zwakker (lub-dub).
--  function spawnBeat(now, x, y) {
--    rings.push({ x, y, start: now, weight: 1 });
--    rings.push({ x, y, start: now + options.heartDubDelay * 1000, weight: options.heartDubWeight });
--    if (rings.length > options.heartMaxRings) rings.splice(0, rings.length - options.heartMaxRings);
--    lastBeatAt = now;
--    lastBeatSpot = { x, y };
--  }
--
--  /* De hartslag komt uit de muis. Staat de muis stil, dan klopt hij in een rustig ritme op
--     die plek; beweegt hij, dan komt er een slag bij zodra hij een stuk verder is, zodat er
--     hartjes langs het pad liggen. Buiten het venster klopt er niets. */
--  /* De hartslaglijn loopt los van de muis. De baan wordt per 2 px gevolgd, anders valt de
--     smalle piek tussen twee frames door; een stempel volgt zodra de lijn een stukje verder
--     is. */
--  /* Hoogte voor de hartslaglijn. Een lichte voorkeur voor stroken waar weinig inhoud staat:
--     uit vijf willekeurige hoogtes wint meestal de vrijste, maar een op de vier keer gewoon
--     een willekeurige, zodat de lijn overal kan verschijnen. */
--  function pickLineY(height) {
--    const candidates = [];
--    for (let i = 0; i < 5; i += 1) candidates.push(height * (0.15 + Math.random() * 0.75));
--    const rects = options.obstacles ? options.obstacles() : [];
--    if (!rects.length || Math.random() < 0.25) return candidates[0];
--
--    const width = window.innerWidth;
--    const top = options.ecgAmplitude;
--    const bottom = options.ecgAmplitude * 0.4;
--    let best = candidates[0];
--    let bestCover = Infinity;
--    for (const y of candidates) {
--      let cover = 0;
--      for (const rect of rects) {
--        if (rect.bottom < y - top || rect.top > y + bottom) continue;
--        cover += Math.max(0, Math.min(rect.right, width) - Math.max(rect.left, 0));
--      }
--      if (cover < bestCover) {
--        bestCover = cover;
--        best = y;
--      }
--    }
--    return best;
--  }
--
--  // Elke slag een eigen grootte, vast per slag zodat hij niet trilt tussen frames.
--  function beatScale(line, beat) {
--    const roll = hash(line.seed + beat * 7.31);
--    let scale = 0.82 + roll * 0.36;
--    if (line.wild && hash(line.seed - beat * 3.17) > 0.62) scale *= 1.6 + roll * 0.5;
--    return scale;
--  }
--
--  function heartLine(now) {
--    if (nuke && now - nuke.start < options.nukeEcgAfter * 1000) return;
--    if (!ecg) {
--      if (now < nextEcgAt) return;
--      const height = window.innerHeight;
--      ecg = {
--        start: now,
--        baseY: pickLineY(height),
--        lastX: -options.ecgRadius,
--        stampX: -Infinity,
--        stampY: 0,
--        offset: Math.random(),
--        seed: Math.random() * 1000,
--        // Elke lijn een eigen hoogte en tempo; zo nu en dan een wilde met uitschieters.
--        amplitude: options.ecgAmplitude * (0.8 + Math.random() * 0.4),
--        beatWidth: options.ecgBeatWidth * (0.8 + Math.random() * 0.45),
--        wild: Math.random() < options.ecgWildChance,
--      };
--    }
--
--    const width = window.innerWidth;
--    const travel = width + options.ecgRadius * 2;
--    const progress = (now - ecg.start) / (options.ecgCrossSeconds * 1000);
--    const targetX = -options.ecgRadius + travel * Math.min(progress, 1);
--
--    for (let x = ecg.lastX; x <= targetX; x += 2) {
--      // Een echte lijn ligt nooit stil: de basislijn deint zacht mee (ademhaling).
--      const sway = ecg.wild ? 2 : 1;
--      const wander = (Math.sin(x * 0.006 + ecg.offset * 6) * 0.1 + Math.sin(x * 0.017 + ecg.offset * 3) * 0.04) * sway;
--      const phase = x / ecg.beatWidth + ecg.offset;
--      const y = ecg.baseY - (ecgShape(phase % 1) * beatScale(ecg, Math.floor(phase)) + wander) * ecg.amplitude;
--      if (Math.hypot(x - ecg.stampX, y - ecg.stampY) >= options.ecgRadius * 0.3) {
--        stamp(x, y, options.ecgRadius, options.ecgStrength, true, lineTrail);
--        ecg.stampX = x;
--        ecg.stampY = y;
--      }
--      ecg.lastX = x + 2;
--    }
--
--    if (progress >= 1) {
--      ecg = null;
--      nextEcgAt = now + randomBetween(options.ecgEverySeconds) * 1000;
--    }
--  }
--
--  function spawnSmiley(x, y) {
--    let kind = (Math.random() * SMILEYS.length) | 0;
--    // Niet twee keer achter elkaar dezelfde.
--    if (smileys.length && smileys[smileys.length - 1].kind === kind) kind = (kind + 1) % SMILEYS.length;
--    smileys.push({ x, y, kind, start: performance.now(), tilt: (Math.random() - 0.5) * 0.5 });
--    if (smileys.length > options.smileyMax) smileys.splice(0, smileys.length - options.smileyMax);
--  }
--
--
--  /* Een smiley springt op (even groter dan zijn eindmaat), zweeft een stukje omhoog en
--     dooft uit. Hij wordt elk frame opnieuw in het korte spoor gezet; als hij weg is, flitst
--     hij in een paar tienden van een seconde uit. */
--  function drawSmileys(now) {
--    let keep = 0;
--    for (const smiley of smileys) {
--      const age = (now - smiley.start) / 1000;
--      if (age >= options.smileySeconds) continue;
--      smileys[keep] = smiley;
--      keep += 1;
--
--      const pop = Math.min(age / 0.22, 1);
--      const scale = pop < 1 ? 0.3 + 0.9 * Math.sin((pop * Math.PI) / 2) + 0.1 * Math.sin(pop * Math.PI) : 1;
--      const fade = Math.min(1, (options.smileySeconds - age) / 0.45);
--      const radius = options.smileyRadius * scale;
--      const cx = smiley.x;
--      const cy = smiley.y - age * 40;
--      const cos = Math.cos(smiley.tilt);
--      const sin = Math.sin(smiley.tilt);
--      // Stille cirkel: binnen 1,1 keer de straal helemaal stil, tot 1,5 keer zacht aflopend.
--      const reach = radius * 1.5;
--
--      const c0 = Math.max(0, Math.floor((cx - reach) / cellW));
--      const c1 = Math.min(cols - 1, Math.ceil((cx + reach) / cellW));
--      const r0 = Math.max(0, Math.floor((cy - reach) / cellH));
--      const r1 = Math.min(rows - 1, Math.ceil((cy + reach) / cellH));
--      if (c0 > c1 || r0 > r1) continue;
--
--      for (let r = r0; r <= r1; r += 1) {
--        const py = (r * cellH + cellH / 2 - cy) / radius;
--        for (let c = c0; c <= c1; c += 1) {
--          const px = (c * cellW + cellW / 2 - cx) / radius;
--          const x = px * cos + py * sin;
--          const y = -px * sin + py * cos;
--          const index = r * cols + c;
--          const d2 = x * x + y * y;
--          if (d2 < 2.25) {
--            const still = fade * (d2 < 1.21 ? 1 : (2.25 - d2) / 1.04);
--            if (still > quiet[index]) quiet[index] = still;
--          }
--          if (!smileyAt(smiley.kind, x, y)) continue;
--          if (fade > streak[index]) streak[index] = fade;
--        }
--      }
--      extendBox(c0, c1, r0, r1);
--    }
--    smileys.length = keep;
--  }
--
--  function onPointerDown(event) {
--    if (reducedMotion.matches || event.button !== 0) return;
--    if (options.isBackground && !options.isBackground(event)) return;
--    if (nuke) {
--      // In de nasleep geen nieuwe explosie; na nukeSmileyAfter mogen de smileys wel weer.
--      if (nukeAge(performance.now()) >= options.nukeSmileyAfter) spawnSmiley(event.clientX, event.clientY);
--      return;
--    }
--
--    const now = performance.now();
--    clickTimes = clickTimes.filter((time) => now - time < options.nukeClickWindow * 1000);
--    clickTimes.push(now);
--    if (clickTimes.length >= options.nukeClicks) {
--      clickTimes = [];
--      startNuke(now, event.clientX, event.clientY);
--      return;
--    }
--    spawnSmiley(event.clientX, event.clientY);
--  }
--
--  function startNuke(now, x, y) {
--    nuke = { start: now, x, y, puffs: [], puffClock: 0 };
--    smileys = [];
--    rings = [];
--    ecg = null;
--    pointer = null;
--    lastPointer = null;
--    trail.fill(0);
--    pulse.fill(0);
--    nextEcgAt = now + options.nukeEcgAfter * 1000;
--  }
--
--  // Hoe ver de nasleep is, in seconden; Infinity als er geen explosie is geweest.
--  function nukeAge(now) {
--    return nuke ? (now - nuke.start) / 1000 : Infinity;
--  }
--
--  function heartbeat(now) {
--    if (nukeAge(now) < options.nukeHeartAfter) return;
--    if (heartHome) {
--      const sinceBeat = now - lastBeatAt;
--      const moved = lastBeatSpot
--        ? Math.hypot(heartHome.x - lastBeatSpot.x, heartHome.y - lastBeatSpot.y)
--        : Infinity;
--      if (
--        sinceBeat >= options.heartPeriod * 1000 ||
--        (moved >= options.heartSpacing && sinceBeat >= options.heartMinGap * 1000)
--      ) {
--        spawnBeat(now, heartHome.x, heartHome.y);
--      }
--    }
--
--    const reach = Math.max(window.innerWidth, window.innerHeight) * options.heartReach;
--    let keep = 0;
--    for (const ring of rings) {
--      const age = (now - ring.start) / 1000;
--      if (age >= options.heartDuration) continue;
--      rings[keep] = ring;
--      keep += 1;
--      if (age < 0) continue;
--      const progress = age / options.heartDuration;
--      const size = reach * (1 - (1 - progress) * (1 - progress));
--      const strength = options.heartStrength * ring.weight * (1 - progress) ** 1.3;
--      // Een bijna uitgedoofde ring is groot en kost veel cellen voor weinig beeld.
--      if (size > 4 && strength > 0.06) stampRing(ring.x, ring.y, size, strength);
--    }
--    rings.length = keep;
--  }
--
--  function paintPointer() {
--    const from = lastPointer || pointer;
--    const dx = pointer.x - from.x;
--    const dy = pointer.y - from.y;
--    const step = options.brushRadius * 0.35;
--    const steps = Math.max(1, Math.ceil(Math.hypot(dx, dy) / step));
--    for (let s = 1; s <= steps; s += 1) {
--      stamp(from.x + (dx * s) / steps, from.y + (dy * s) / steps);
--    }
--    lastPointer = pointer;
--    pointer = null;
--  }
--
--  // Het spoor: alleen de cellen binnen de rechthoek met spoor. De cel wordt eerst leeg
--  // gemaakt, zodat het teken uit de rustlaag er niet dubbel onder staat.
--  function drawTrail(dt) {
--    if (minC > maxC) return;
--    const decay = dt > 0 ? Math.exp(-dt / options.trailSeconds) : 1;
--    const pulseDecay = dt > 0 ? Math.exp(-dt / options.heartSeconds) : 1;
--    const streakDecay = dt > 0 ? Math.exp(-dt / options.streakSeconds) : 1;
--    const neutralMax = options.trailNeutral[theme.mode];
--    const accentMax = options.trailAccent[theme.mode];
--    const streakNeutral = options.streakNeutral[theme.mode];
--    const streakAccent = options.streakAccent[theme.mode];
--    let nextMinC = cols;
--    let nextMaxC = -1;
--    let nextMinR = rows;
--    let nextMaxR = -1;
--
--    for (let r = minR; r <= maxR; r += 1) {
--      const y = cellY(r);
--      for (let c = minC; c <= maxC; c += 1) {
--        const index = r * cols + c;
--        let heat = trail[index];
--        let beat = pulse[index];
--        let flash = streak[index];
--        let pulseLine = lineTrail[index];
--        let hush = quiet[index];
--        if (heat <= 0 && beat <= 0 && flash <= 0 && pulseLine <= 0 && hush <= 0) continue;
--
--        if (heat > 0) {
--          heat *= decay;
--          if (heat < 0.01) heat = 0;
--          trail[index] = heat;
--        }
--        if (beat > 0) {
--          beat *= pulseDecay;
--          if (beat < 0.04) beat = 0;
--          pulse[index] = beat;
--        }
--        if (flash > 0) {
--          flash *= streakDecay;
--          if (flash < 0.03) flash = 0;
--          streak[index] = flash;
--        }
--        if (pulseLine > 0) {
--          pulseLine *= streakDecay;
--          if (pulseLine < 0.03) pulseLine = 0;
--          lineTrail[index] = pulseLine;
--        }
--        if (hush > 0) {
--          hush *= streakDecay;
--          if (hush < 0.03) hush = 0;
--          quiet[index] = hush;
--        }
--        if (heat === 0 && beat === 0 && flash === 0 && pulseLine === 0 && hush === 0) continue;
--
--        if (c < nextMinC) nextMinC = c;
--        if (c > nextMaxC) nextMaxC = c;
--        if (r < nextMinR) nextMinR = r;
--        if (r > nextMaxR) nextMaxR = r;
--
--        // Onder het spoor en de hartslag wisselen de tekens snel.
--        if (dt > 0 && Math.random() < (heat * 9 + beat * 5 + (flash + pulseLine) * 6) * dt) glyphs[index] = randomGlyph();
--
--        // Een verse ring is roder dan het spoor; verder weg is hij al zwakker en daarmee
--        // vanzelf grijzer.
--        // In de stille cirkel van een smiley (hush) en tijdens de nasleep van een explosie
--        // (calm) wijken het spoor en de ringen; de smiley en de hartslaglijn blijven.
--        heat *= calm * (1 - hush);
--        beat *= calm * (1 - hush);
--        const lift = heat > beat ? heat : beat;
--        const ring = Math.min(1, beat * options.heartRed);
--        const glow = heat > ring ? heat : ring;
--        const x = cellX(c);
--        const sx = glyphs[index] * tileW;
--        // Achter een smiley wordt het rustende veld stilgezet (hush), zodat het gezicht
--        // niet in de wolken verdwijnt. De smileys (flash) en de hartslaglijn (pulseLine) zijn vooral rood; de lijn in --glyph-line.
--        const neutral = ambient[index] * calm * (1 - lift) * (1 - hush) + neutralMax * lift + streakNeutral * Math.max(flash, pulseLine);
--        const red = Math.max(glow * glow * accentMax, flash * streakAccent);
--        const lineRed = pulseLine * streakAccent;
--        ctx.clearRect(x, y, tileW, tileH);
--        if (neutral >= MIN_ALPHA) {
--          ctx.globalAlpha = neutral;
--          ctx.drawImage(neutralAtlas, sx, 0, tileW, tileH, x, y, tileW, tileH);
--        }
--        if (red > 0.01) {
--          ctx.globalAlpha = Math.min(1, red);
--          ctx.drawImage(accentAtlas, sx, 0, tileW, tileH, x, y, tileW, tileH);
--        }
--        if (lineRed > 0.01) {
--          ctx.globalAlpha = Math.min(1, lineRed);
--          ctx.drawImage(lineAtlas, sx, 0, tileW, tileH, x, y, tileW, tileH);
--        }
--      }
--    }
--
--    ctx.globalAlpha = 1;
--    minC = nextMinC;
--    maxC = nextMaxC;
--    minR = nextMinR;
--    maxR = nextMaxR;
--  }
--
--  /* Zwarte rook die uit de kop van de paddenstoel spuwt en naar de bovenkant van het scherm
--     klimt. Losse wolkjes die opstijgen, opzwellen en onderweg dunner worden. */
--  function drawSmoke(t, dt) {
--    const size = Math.min(1.7, Math.max(0.7, Math.min(window.innerWidth, window.innerHeight) / 650));
--    const capY = nuke.y - 300 * size * easeOut(t / 2.2);
--    const capRx = (50 + 190 * easeOut(t / 1.4)) * size;
--
--    // Spuwen tussen 0,5 en 3,2 seconden, zo'n vijfentwintig wolkjes per seconde. Alle rook is
--    // weg rond 5,5 seconden, als de letters gevallen zijn.
--    if (dt > 0 && t > 0.5 && t < 3.2) {
--      nuke.puffClock += dt * 25;
--      while (nuke.puffClock >= 1) {
--        nuke.puffClock -= 1;
--        const startY = capY - Math.random() * 40 * size;
--        nuke.puffs.push({
--          x: nuke.x + (Math.random() - 0.5) * capRx * 0.9,
--          y: startY,
--          // Snel genoeg om in een paar seconden de bovenkant te halen.
--          vy: -(startY + 120) / (1.1 + Math.random() * 0.8),
--          vx: (Math.random() - 0.5) * 50 * size,
--          radius: (14 + Math.random() * 18) * size,
--          born: t,
--          seed: Math.random() * 10,
--        });
--      }
--    }
--
--    const life = 2.4;
--    const allFade = t < 4.2 ? 1 : Math.max(0, 1 - (t - 4.2) / 1.3);
--    let keep = 0;
--    for (const puff of nuke.puffs) {
--      const age = t - puff.born;
--      if (age >= life) continue;
--      nuke.puffs[keep] = puff;
--      keep += 1;
--
--      const px = puff.x + puff.vx * age;
--      const py = puff.y + puff.vy * age * (1 - age / (life * 2.4));
--      const radius = puff.radius * (1 + age * 0.85);
--      const strength = 0.75 * (1 - age / life) * Math.min(1, age / 0.15) * allFade;
--      if (py + radius < 0 || strength <= 0.01) continue;
--
--      const c0 = Math.max(0, Math.floor((px - radius) / cellW));
--      const c1 = Math.min(cols - 1, Math.ceil((px + radius) / cellW));
--      const r0 = Math.max(0, Math.floor((py - radius) / cellH));
--      const r1 = Math.min(rows - 1, Math.ceil((py + radius) / cellH));
--      for (let r = r0; r <= r1; r += 1) {
--        const dy = r * cellH + cellH / 2 - py;
--        for (let c = c0; c <= c1; c += 1) {
--          const dx = c * cellW + cellW / 2 - px;
--          const angle = Math.atan2(dy, dx);
--          const edge = 1 + 0.18 * Math.sin(angle * 5 + puff.seed + t * 2);
--          const d = Math.sqrt(dx * dx + dy * dy) / (radius * edge);
--          if (d >= 1) continue;
--          ctx.globalAlpha = strength * (1 - d * d);
--          ctx.drawImage(smokeAtlas, randomGlyph() * tileW, 0, tileW, tileH, cellX(c), cellY(r), tileW, tileH);
--        }
--      }
--    }
--    nuke.puffs.length = keep;
--  }
--
--  // 1 als het veld er gewoon staat; 0 tijdens de nasleep van een explosie.
--  function fieldPresence(now) {
--    const age = nukeAge(now);
--    if (age < options.nukeFallAfter) return 1;
--    if (age < options.nukeNormalAfter) return 0;
--    return Math.min(1, (age - options.nukeNormalAfter) / 2);
--  }
--
--  function easeOut(value) {
--    const v = Math.min(1, Math.max(0, value));
--    return 1 - (1 - v) ** 3;
--  }
--
--  /* De explosie, rechtstreeks op het canvas: een rode flits over het hele veld, een
--     schokgolf die over het scherm rolt, een paddenstoelwolk van kokende letters, het veld
--     dat schudt, en daarna vallen alle letters van het scherm. */
--  function drawNuke(now, dt) {
--    const t = nukeAge(now);
--    const accentAlpha = theme.mode === "light" ? 0.85 : 0.95;
--
--    // Schudden: alleen het canvas, de inhoud van de pagina blijft staan.
--    if (t < 1.3) {
--      const shake = 12 * (1 - t / 1.3) ** 2;
--      canvas.style.transform = `translate(${(Math.random() - 0.5) * 2 * shake}px, ${(Math.random() - 0.5) * 2 * shake}px)`;
--    } else if (canvas.style.transform) {
--      canvas.style.transform = "";
--    }
--
--    // Flits: het hele veld licht even rood op.
--    if (t < 0.7) {
--      const flashAtlas = t < 0.2 ? yellowAtlas : t < 0.42 ? orangeAtlas : accentAtlas;
--      ctx.globalAlpha = 0.6 * (1 - t / 0.7) ** 2;
--      for (let r = 0; r < rows; r += 1) {
--        const y = cellY(r);
--        for (let c = 0; c < cols; c += 1) {
--          ctx.drawImage(flashAtlas, glyphs[r * cols + c] * tileW, 0, tileW, tileH, cellX(c), y, tileW, tileH);
--        }
--      }
--    }
--
--    // Schokgolf: een ring die in anderhalve seconde voorbij de randen van het scherm rolt.
--    if (t < 1.8) {
--      const progress = t / 1.8;
--      const reach = Math.hypot(window.innerWidth, window.innerHeight);
--      const radius = reach * easeOut(progress);
--      const band = 30 + 90 * (1 - progress);
--      const strength = 0.95 * (1 - progress);
--      const r0 = Math.max(0, Math.floor((nuke.y - radius - band) / cellH));
--      const r1 = Math.min(rows - 1, Math.ceil((nuke.y + radius + band) / cellH));
--      for (let r = r0; r <= r1; r += 1) {
--        const dy = r * cellH + cellH / 2 - nuke.y;
--        const outer = (radius + band) ** 2 - dy * dy;
--        if (outer <= 0) continue;
--        const reachX = Math.sqrt(outer);
--        const c0 = Math.max(0, Math.floor((nuke.x - reachX) / cellW));
--        const c1 = Math.min(cols - 1, Math.ceil((nuke.x + reachX) / cellW));
--        for (let c = c0; c <= c1; c += 1) {
--          const dx = c * cellW + cellW / 2 - nuke.x;
--          const off = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius) / band;
--          if (off >= 1) continue;
--          const front = Math.sqrt(dx * dx + dy * dy) - radius;
--          const waveAtlas = front > band * 0.3 ? yellowAtlas : front > -band * 0.3 ? orangeAtlas : accentAtlas;
--          ctx.globalAlpha = strength * (1 - off);
--          ctx.drawImage(waveAtlas, randomGlyph() * tileW, 0, tileW, tileH, cellX(c), cellY(r), tileW, tileH);
--        }
--      }
--    }
--
--    // Paddenstoelwolk: een kokende kop die opstijgt, een steel en een wolk over de grond.
--    if (t < 4.2) {
--      const grow = easeOut(t / 1.4);
--      const fade = t < 2.8 ? 1 : Math.max(0, 1 - (t - 2.8) / 1.4);
--      // Groot op een groot scherm, passend op een klein scherm.
--      const size = Math.min(1.7, Math.max(0.7, Math.min(window.innerWidth, window.innerHeight) / 650));
--      const rise = 300 * size * easeOut(t / 2.2);
--      const capY = nuke.y - rise;
--      const capRx = (50 + 190 * grow) * size;
--      const capRy = (35 + 85 * grow) * size;
--      const baseRx = (70 + 230 * grow) * size;
--      const baseRy = (22 + 34 * grow) * size;
--      const spanX = Math.max(capRx * 1.25, baseRx);
--      const c0 = Math.max(0, Math.floor((nuke.x - spanX) / cellW));
--      const c1 = Math.min(cols - 1, Math.ceil((nuke.x + spanX) / cellW));
--      const r0 = Math.max(0, Math.floor((capY - capRy * 1.25) / cellH));
--      const r1 = Math.min(rows - 1, Math.ceil((nuke.y + baseRy) / cellH));
--
--      for (let r = r0; r <= r1; r += 1) {
--        const py = r * cellH + cellH / 2;
--        for (let c = c0; c <= c1; c += 1) {
--          const dx = c * cellW + cellW / 2 - nuke.x;
--          let core = 0;
--
--          const capDy = py - capY;
--          const angle = Math.atan2(capDy, dx);
--          const edge = 1 + 0.14 * Math.sin(angle * 7 + t * 2.5) + 0.08 * Math.sin(angle * 13 - t * 4);
--          const capD = Math.sqrt((dx / capRx) ** 2 + (capDy / capRy) ** 2) / edge;
--          if (capD < 1) core = Math.max(core, 1 - capD * 0.6);
--
--          if (py > capY && py < nuke.y) {
--            const along = (py - capY) / Math.max(rise, 1);
--            const half = (18 + 14 * grow + 30 * grow * along * along) * size;
--            if (Math.abs(dx) < half) core = Math.max(core, 0.75);
--          }
--
--          const baseD = Math.sqrt((dx / baseRx) ** 2 + ((py - nuke.y) / baseRy) ** 2);
--          if (baseD < 1 + 0.12 * Math.sin(dx * 0.05 + t * 3)) core = Math.max(core, 0.85 - baseD * 0.4);
--
--          if (core <= 0) continue;
--          const x = cellX(c);
--          const y = cellY(r);
--          const glyph = randomGlyph() * tileW;
--          // Heet in de kern; naarmate de wolk afkoelt schuift alles richting rood.
--          const heatLevel = core - Math.max(0, t - 1.2) * 0.12 + (Math.random() - 0.5) * 0.12;
--          const fireAtlas = heatLevel > 0.8 ? yellowAtlas : heatLevel > 0.58 ? orangeAtlas : accentAtlas;
--          ctx.globalAlpha = Math.min(1, accentAlpha * core * fade);
--          ctx.drawImage(fireAtlas, glyph, 0, tileW, tileH, x, y, tileW, tileH);
--          ctx.globalAlpha = 0.35 * core * core * fade;
--          ctx.drawImage(neutralAtlas, glyph, 0, tileW, tileH, x, y, tileW, tileH);
--        }
--      }
--    }
--
--    drawSmoke(t, dt);
--
--    // De letters vallen: elk teken uit het rustende veld krijgt een eigen moment en valt
--    // dan met zwaartekracht van het scherm.
--    if (t >= options.nukeFallAfter && !fallers) {
--      const list = [];
--      for (let i = 0; i < ambient.length; i += 1) if (ambient[i] >= 0.012) list.push(i);
--      fallers = {
--        index: Int32Array.from(list),
--        y: new Float32Array(list.length),
--        vy: new Float32Array(list.length),
--        delay: Float32Array.from(list, () => Math.random() * 1.8),
--      };
--    }
--    if (fallers && t < options.nukeNormalAfter) {
--      const since = t - options.nukeFallAfter;
--      const floor = canvas.height;
--      for (let i = 0; i < fallers.index.length; i += 1) {
--        const index = fallers.index[i];
--        if (since > fallers.delay[i] && dt > 0) {
--          fallers.vy[i] += 1600 * dpr * dt;
--          fallers.y[i] += fallers.vy[i] * dt;
--        }
--        const r = (index / cols) | 0;
--        const y = cellY(r) + fallers.y[i];
--        if (y > floor) continue;
--        // Tijdens het vallen iets duidelijker, anders zie je ze bijna niet gaan.
--        const boost = since > fallers.delay[i] ? 3.5 : 1;
--        ctx.globalAlpha = Math.min(0.5, ambient[index] * boost);
--        ctx.drawImage(neutralAtlas, glyphs[index] * tileW, 0, tileW, tileH, cellX(index % cols), y, tileW, tileH);
--      }
--    }
--
--    ctx.globalAlpha = 1;
--    if (t >= options.nukeNormalAfter + 2) {
--      nuke = null;
--      fallers = null;
--      canvas.style.transform = "";
--    }
--  }
--
--  function render(now, dt) {
--    // Een venster zonder afmeting (geminimaliseerd of verborgen bij het laden): niets tekenen.
--    // drawImage van een leeg canvas gooit een fout, en die fout brak hier createGlyphField af.
--    // Bij de eerste resize gaat het vanzelf verder.
--    if (!neutralAtlas || !cols || !canvas.width || !canvas.height) return;
--    const hadTrail = minC <= maxC;
--    const ambientDue = now - lastAmbient >= options.ambientIntervalMs;
--
--    // Los aangeroepen (thema, formaat) terwijl er niets veranderd is: niets tekenen.
--    if (!hadTrail && !ambientDue && dt === 0) return;
--
--    if (ambientDue) {
--      const elapsed = Number.isFinite(lastAmbient) ? (now - lastAmbient) / 1000 : 0;
--      drawAmbient(now, elapsed);
--      lastAmbient = now;
--    }
--
--    ctx.setTransform(1, 0, 0, 1, 0, 0);
--    ctx.clearRect(0, 0, canvas.width, canvas.height);
--    // Na een explosie ligt het veld stil tot nukeNormalAfter en komt het daarna terug. Een
--    // smiley maakt alleen een cirkel om zichzelf stil (quiet), niet het hele veld.
--    calm = fieldPresence(now);
--    if (calm > 0.01) {
--      ctx.globalAlpha = calm;
--      ctx.drawImage(layer, 0, 0);
--      ctx.globalAlpha = 1;
--    }
--    if (dt > 0) {
--      heartbeat(now);
--      heartLine(now);
--      drawSmileys(now);
--    }
--    drawTrail(dt);
--    if (nuke) drawNuke(now, dt);
--  }
--
--  function loop(now) {
--    if (!running) return;
--    frameId = requestAnimationFrame(loop);
--    if (pointer && nukeAge(now) >= options.nukeHeartAfter) paintPointer();
--    else if (nukeAge(now) < options.nukeHeartAfter) pointer = null;
--    // Dertig beelden per seconde is genoeg voor wisselende tekens; dat halveert het werk
--    // op een 60 Hz-scherm en meer op een sneller scherm.
--    if (lastFrame && now - lastFrame < 1000 / options.maxFps - 2) return;
--    const dt = lastFrame ? Math.min((now - lastFrame) / 1000, 0.25) : 0;
--    lastFrame = now;
--    render(now, dt);
--  }
--
--  function start() {
--    if (running || destroyed || reducedMotion.matches || document.hidden) return;
--    running = true;
--    lastFrame = 0;
--    frameId = requestAnimationFrame(loop);
--  }
--
--  function stop() {
--    running = false;
--    cancelAnimationFrame(frameId);
--  }
--
--  function onPointerMove(event) {
--    if (reducedMotion.matches) return;
--    const next = { x: event.clientX, y: event.clientY };
--    // Na het verlaten van het venster geen streep trekken vanaf de oude plek.
--    if (!lastPointer) lastPointer = next;
--    pointer = next;
--    heartHome = next;
--  }
--
--  function onPointerLeave() {
--    lastPointer = null;
--    pointer = null;
--    heartHome = null;
--    lastBeatSpot = null;
--  }
--
--  function onVisibility() {
--    if (document.hidden) stop();
--    else start();
--  }
--
--  function onMotionChange() {
--    if (reducedMotion.matches) {
--      stop();
--      trail.fill(0);
--      pulse.fill(0);
--      rings = [];
--      smileys = [];
--      nuke = null;
--      fallers = null;
--      canvas.style.transform = "";
--      streak.fill(0);
--      lineTrail.fill(0);
--      quiet.fill(0);
--      minC = minR = 1;
--      maxC = maxR = 0;
--      lastAmbient = -Infinity;
--      render(performance.now(), 0);
--    } else {
--      start();
--    }
--  }
--
--  let resizeTimer = 0;
--  function onResize() {
--    window.clearTimeout(resizeTimer);
--    resizeTimer = window.setTimeout(resize, 120);
--  }
--
--  // Het thema wisselt via data-appearance op <html>; zie layout.css.
--  const themeObserver = new MutationObserver(applyTheme);
--  themeObserver.observe(document.documentElement, {
--    attributes: true,
--    attributeFilter: ["data-appearance", "class", "style"],
--  });
--
--  window.addEventListener("pointermove", onPointerMove, { passive: true });
--  window.addEventListener("pointerdown", onPointerDown, { passive: true });
--  document.documentElement.addEventListener("pointerleave", onPointerLeave);
--  window.addEventListener("blur", onPointerLeave);
--  window.addEventListener("resize", onResize);
--  document.addEventListener("visibilitychange", onVisibility);
--  reducedMotion.addEventListener("change", onMotionChange);
--
--  /* Andere intensiteit of ander thema zonder het veld opnieuw te starten. Een nieuw thema zet nieuwe
--     tekens in elke cel; een andere intensiteit tekent alleen de rustlaag opnieuw. */
--  function configure(next = {}) {
--    if (destroyed) return;
--    Object.assign(options, next);
--    if (next.glyphs) {
--      const nextSet = checkGlyphs(next.glyphs);
--      const changed = nextSet.length !== glyphSet.length || nextSet.some((glyph, index) => glyph !== glyphSet[index]);
--      if (changed) {
--        glyphSet = nextSet;
--        for (let i = 0; i < glyphs.length; i += 1) glyphs[i] = randomGlyph();
--        buildAtlases();
--      }
--    }
--    lastAmbient = -Infinity;
--    render(performance.now(), 0);
--  }
--
--  resize();
--  start();
--
--  return { destroy, configure };
--
--  function destroy() {
--    destroyed = true;
--    stop();
--    window.clearTimeout(resizeTimer);
--    themeObserver.disconnect();
--    window.removeEventListener("pointermove", onPointerMove);
--    window.removeEventListener("pointerdown", onPointerDown);
--    document.documentElement.removeEventListener("pointerleave", onPointerLeave);
--    window.removeEventListener("blur", onPointerLeave);
--    window.removeEventListener("resize", onResize);
--    document.removeEventListener("visibilitychange", onVisibility);
--    reducedMotion.removeEventListener("change", onMotionChange);
--  }
--}
--
--// Opstart van het tekenveld op de startpagina van de Kennisbank (Wardenburg.Code.Tekenveld).
--// maak-tekenveld.js zet dit achter de engine van Ember; samen vormen ze de JavaScriptExtension.
--// De engine zelf (createGlyphField, glyphFieldSettings) komt ongewijzigd uit Ember.
--
--// Waar een klik iets doet of waar inhoud staat: geen achtergrond, dus geen smiley.
--const KB_NIET_ACHTERGROND = [
--  "a",
--  "button",
--  "input",
--  "select",
--  "textarea",
--  "label",
--  "form",
--  "summary",
--  "[role='button']",
--  "[role='dialog']",
--  ".navbar",
--  "#leftPanels",
--  "#rightPanels",
--  ".document-header",
--  ".wb-zoek > *",
--  ".wb-tegels li",
--  ".wb-home-onder",
--].join(",");
--
--// De blokken van de startpagina; de hartslaglijn loopt bij voorkeur waar die niet staan.
--const KB_BLOKKEN = ".wb-zoek > *, .wb-tegels li, .wb-home-onder, .navbar";
--
--// Na zoveel tijd zonder muis of aanraking ligt het veld stil (scheelt rekenwerk en
--// beeldverkeer op de terminalserver); bij de eerste beweging loopt het weer.
--const KB_STILSTAND_MS = 60000;
--
--// De explosie van de engine: vijf klikken op de lege achtergrond binnen 1,6 seconde, met een
--// nasleep van een minuut. Dezelfde getallen als de standaard van de engine; hier alleen om
--// tijdens de explosie het vervagen naar het midden weg te halen en het veld wakker te houden.
--const KB_BOEM_KLIKKEN = 5;
--const KB_BOEM_VENSTER_MS = 1600;
--const KB_BOEM_DUUR_MS = 62000;
--
--function kbTekenveld() {
--  // Alleen op de startpagina; de extensie wordt ook alleen daar geladen.
--  if (!document.querySelector(".wb-home")) return;
--
--  // De Kennisbank heeft alleen een lichte stand; de engine leest die van <html>.
--  document.documentElement.setAttribute("data-appearance", "light");
--
--  const canvas = document.createElement("canvas");
--  canvas.className = "kb-tekenveld";
--  canvas.setAttribute("aria-hidden", "true");
--  document.body.prepend(canvas);
--
--  const isAchtergrond = (event) => event.target instanceof Element && !event.target.closest(KB_NIET_ACHTERGROND);
--  const opties = {
--    ...glyphFieldSettings({ intensity: "lijst" }),
--    isBackground: isAchtergrond,
--    obstacles: () => Array.from(document.querySelectorAll(KB_BLOKKEN), (element) => element.getBoundingClientRect()),
--  };
--
--  let veld = null;
--  let rustTimer = 0;
--  let klikken = [];
--  let boemTot = 0;
--
--  function slaap() {
--    // Tijdens een explosie niet: de nasleep duurt een minuut, ook zonder muis.
--    if (Date.now() < boemTot) {
--      rustTimer = window.setTimeout(slaap, boemTot - Date.now());
--      return;
--    }
--    // Het laatste beeld blijft staan; alleen de animatie stopt.
--    veld.destroy();
--    veld = null;
--  }
--
--  // De klik die een slapend veld wekt, ziet de engine zelf niet (hij luistert pas daarna);
--  // die telt hier dus ook niet mee, anders lopen de twee tellers uiteen.
--  let wekklik = null;
--
--  function wakker(event) {
--    if (!veld) {
--      veld = createGlyphField(canvas, opties);
--      wekklik = event || null;
--    }
--    window.clearTimeout(rustTimer);
--    rustTimer = window.setTimeout(slaap, KB_STILSTAND_MS);
--  }
--
--  function telKlik(event) {
--    const nu = Date.now();
--    if (event === wekklik || event.button !== 0 || nu < boemTot || !isAchtergrond(event)) return;
--    klikken = klikken.filter((tijd) => nu - tijd < KB_BOEM_VENSTER_MS);
--    klikken.push(nu);
--    if (klikken.length < KB_BOEM_KLIKKEN) return;
--    klikken = [];
--    boemTot = nu + KB_BOEM_DUUR_MS;
--    // Tijdens de explosie het hele scherm, niet alleen de randen.
--    canvas.classList.add("kb-tekenveld--boem");
--    window.setTimeout(() => canvas.classList.remove("kb-tekenveld--boem"), KB_BOEM_DUUR_MS);
--  }
--
--  window.addEventListener("pointermove", wakker, { passive: true });
--  // Eerst wakker maken, zodat de engine de klik ook krijgt als het veld sliep.
--  window.addEventListener("pointerdown", wakker, { passive: true });
--  window.addEventListener("pointerdown", telKlik, { passive: true });
--  wakker();
--}
--
--if (document.readyState === "loading") {
--  document.addEventListener("DOMContentLoaded", kbTekenveld);
--} else {
--  kbTekenveld();
--}
--
--})();
--

name

...	...	@@ -1,1 +1,0 @@
1		-Wardenburg tekenveld

parse

...	...	@@ -1,1 +1,0 @@
1		-Nee

use

...	...	@@ -1,1 +1,0 @@
1		-onDemand

XWiki.StyleSheetExtension[0]

Caching policy

...	...	@@ -1,1 +1,0 @@
1		-long

Code

@@ -1,45 +1,0 @@
--/* Tekenveld op de startpagina van de Kennisbank (Wardenburg.Code.Tekenveld); alleen geladen op
--   de startpagina. Het canvas ligt achter de inhoud; de vlakken eromheen worden doorzichtig. */
--
--/* Kleuren voor de engine: de tekstkleur en het donkere oranje (brand-warning) uit het kleurthema. */
--html {
--  --text: #202124;
--  --brand-red: #e8920c;
--  background: #ffffff;
--}
--
--body,
--#body,
--#contentcontainer,
--#contentcolumn,
--#mainContentArea,
--.main,
--#xwikicontent,
--.wb-home {
--  background: transparent !important;
--}
--
--canvas.kb-tekenveld {
--  position: fixed;
--  inset: 0;
--  z-index: -1;
--  pointer-events: none;
--  /* Naar het midden, waar het zoekveld en de tegels staan, vervaagt het veld. */
--  -webkit-mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, transparent 45%, #000 100%);
--  mask-image: radial-gradient(ellipse 48% 58% at 50% 55%, transparent 45%, #000 100%);
--}
--
--/* Leesbaarheid: een zachte witte gloed achter de kop, het zoekveld en elke tegel. */
--.wb-zoek > h1,
--.wb-zoek > p,
--.wb-zoek > form,
--.wb-tegels > li > a {
--  background: radial-gradient(closest-side, rgba(255, 255, 255, .97) 62%, rgba(255, 255, 255, 0) 100%);
--}
--
--.wb-home-onder {
--  background: #ffffff;
--  border-radius: 16px;
--  box-shadow: 0 0 36px 28px #ffffff;
--}
--

Content Type

...	...	@@ -1,1 +1,0 @@
1		-CSS

Naam

...	...	@@ -1,1 +1,0 @@
1		-Wardenburg tekenveld

Inhoud verwerken

...	...	@@ -1,1 +1,0 @@
1		-Nee

Gebruik deze uitbreiding

...	...	@@ -1,1 +1,0 @@
1		-onDemand

XWiki.XWikiRights[0]

allow

...	...	@@ -1,1 +1,0 @@
1		-Sta toe

levels

...	...	@@ -1,1 +1,0 @@
1		-view

users

...	...	@@ -1,1 +1,0 @@
1		-XWiki.XWikiGuest

XWiki.XWikiRights[1]

allow

...	...	@@ -1,1 +1,0 @@
1		-Sta toe

groups

...	...	@@ -1,1 +1,0 @@
1		-XWiki.XWikiAllGroup

levels

...	...	@@ -1,1 +1,0 @@
1		-view

XWiki.XWikiRights[2]

allow

...	...	@@ -1,1 +1,0 @@
1		-Sta toe

groups

...	...	@@ -1,1 +1,0 @@
1		-XWiki.XWikiAdminGroup

levels

...	...	@@ -1,1 +1,0 @@
1		-view,edit,comment,script