@jjlmoya/utils-science 1.30.0 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-science",
-    "version": "1.30.0",
+    "version": "1.32.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -12,10 +12,12 @@ import { radioactiveDecay } from '../tool/radioactive-decay/index';
 import { naturalSelectionDrift } from '../tool/natural-selection-drift/index';
 import { entropySecondLaw } from '../tool/entropy-second-law/index';
 import { phaseDiagramCriticalPoints } from '../tool/phase-diagram-critical-points/index';
+import { twinParadoxVisualizer } from '../tool/twin-paradox-visualizer/index';
+import { mandelbrotFractal } from '../tool/mandelbrot-fractal/index';
 
 export const scienceCategory: ScienceCategoryEntry = {
   icon: 'mdi:flask',
-  tools: [colonyCounter, asteroidImpact, microwaveDetector, simulationProbability, cellularRenewal, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints],
+  tools: [colonyCounter, asteroidImpact, microwaveDetector, simulationProbability, cellularRenewal, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -12,6 +12,8 @@ export { radioactiveDecay } from './tool/radioactive-decay/entry';
 export { naturalSelectionDrift } from './tool/natural-selection-drift/entry';
 export { entropySecondLaw } from './tool/entropy-second-law/entry';
 export { phaseDiagramCriticalPoints } from './tool/phase-diagram-critical-points/entry';
+export { twinParadoxVisualizer } from './tool/twin-paradox-visualizer/entry';
+export { mandelbrotFractal } from './tool/mandelbrot-fractal/entry';
 export { scienceCategory } from './category';
 import { asteroidImpact } from './tool/asteroid-impact/entry';
 import { cellularRenewal } from './tool/cellular-renewal/entry';
@@ -26,4 +28,6 @@ import { radioactiveDecay } from './tool/radioactive-decay/entry';
 import { naturalSelectionDrift } from './tool/natural-selection-drift/entry';
 import { entropySecondLaw } from './tool/entropy-second-law/entry';
 import { phaseDiagramCriticalPoints } from './tool/phase-diagram-critical-points/entry';
-export const ALL_ENTRIES = [asteroidImpact, cellularRenewal, colonyCounter, microwaveDetector, simulationProbability, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints];
+import { twinParadoxVisualizer } from './tool/twin-paradox-visualizer/entry';
+import { mandelbrotFractal } from './tool/mandelbrot-fractal/entry';
+export const ALL_ENTRIES = [asteroidImpact, cellularRenewal, colonyCounter, microwaveDetector, simulationProbability, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal];

package/src/index.ts

@@ -13,6 +13,8 @@ export { RADIOACTIVE_DECAY_TOOL } from './tool/radioactive-decay/index';
 export { NATURAL_SELECTION_DRIFT_TOOL } from './tool/natural-selection-drift/index';
 export { ENTROPY_SECOND_LAW_TOOL } from './tool/entropy-second-law/index';
 export { PHASE_DIAGRAM_CRITICAL_POINTS_TOOL } from './tool/phase-diagram-critical-points/index';
+export { TWIN_PARADOX_VISUALIZER_TOOL } from './tool/twin-paradox-visualizer/index';
+export { MANDELBROT_FRACTAL_TOOL } from './tool/mandelbrot-fractal/index';
 
 export type {
   KnownLocale,

package/src/tests/locale_completeness.test.ts

@@ -18,7 +18,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 13 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(13);
+  it('all 15 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(15);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { scienceCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 13 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(13);
+    it('should have 15 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(15);
     });
 
     it('scienceCategory should be defined', () => {

package/src/tool/mandelbrot-fractal/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { mandelbrotFractal } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await mandelbrotFractal.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/mandelbrot-fractal/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'The Fractal Geometry of Nature',
+    url: 'https://en.wikipedia.org/wiki/The_Fractal_Geometry_of_Nature',
+  },
+  {
+    name: 'Complex Dynamics and Renormalization',
+    url: 'https://abel.math.harvard.edu/~ctm/papers/home/text/papers/real/book.pdf',
+  },
+  {
+    name: 'The Science of Fractal Images',
+    url: 'https://www.scribd.com/document/679858135/Antologie-The-Science-of-Fractal-Images',
+  },
+];

package/src/tool/mandelbrot-fractal/component.astro

@@ -0,0 +1,242 @@
+---
+import './mandelbrot-fractal-calculator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="mandelbrot-root" id="mandelbrot-root">
+  <section class="mandelbrot-stage" aria-label={ui.canvasLabel}>
+    <canvas id="mandelbrot-canvas" class="mandelbrot-canvas"></canvas>
+    <div class="mandelbrot-reticle" aria-hidden="true"></div>
+    <div class="mandelbrot-coordinate-strip">
+      <span>{ui.centerPoint}</span>
+      <strong id="mandelbrot-center">-0.500000 + 0.000000i</strong>
+    </div>
+  </section>
+
+  <section class="mandelbrot-panel">
+    <div class="mandelbrot-presets" aria-label={ui.presetsLabel}>
+      <button class="mandelbrot-preset active" data-x="-0.5" data-y="0" data-scale="1">{ui.presetFull}</button>
+      <button class="mandelbrot-preset" data-x="-0.743643887" data-y="0.131825904" data-scale="550">{ui.presetSeahorse}</button>
+      <button class="mandelbrot-preset" data-x="-0.101096" data-y="0.956286" data-scale="190">{ui.presetSpiral}</button>
+    </div>
+
+    <button id="mandelbrot-reset" class="mandelbrot-reset-button">{ui.reset}</button>
+
+    <div class="mandelbrot-readouts">
+      <div class="mandelbrot-readout mandelbrot-readout-hero">
+        <span>{ui.magnification}</span>
+        <strong id="mandelbrot-zoom">1x</strong>
+      </div>
+      <div class="mandelbrot-readout">
+        <span>{ui.visibleWindow}</span>
+        <strong id="mandelbrot-window">3.500 x 2.000</strong>
+      </div>
+      <div class="mandelbrot-readout">
+        <span>{ui.renderBudget}</span>
+        <strong id="mandelbrot-budget">180</strong>
+      </div>
+    </div>
+
+    <div class="mandelbrot-controls">
+      <label class="mandelbrot-control">
+        <span>{ui.iterationsLabel}</span>
+        <input id="mandelbrot-iterations" type="range" min="60" max="900" value="180" step="20" />
+      </label>
+      <label class="mandelbrot-control">
+        <span>{ui.contrastLabel}</span>
+        <input id="mandelbrot-contrast" type="range" min="0.55" max="2.4" value="1.15" step="0.05" />
+      </label>
+      <label class="mandelbrot-control">
+        <span>{ui.colorLabel}</span>
+        <select id="mandelbrot-palette">
+          <option value="ember">{ui.paletteEmber}</option>
+          <option value="lagoon">{ui.paletteLagoon}</option>
+          <option value="ink">{ui.paletteInk}</option>
+        </select>
+      </label>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { MandelbrotEngine } from './logic/MandelbrotEngine';
+
+  const root = document.getElementById('mandelbrot-root');
+
+  if (root) {
+    const canvas = document.getElementById('mandelbrot-canvas') as HTMLCanvasElement;
+    const iterationsInput = document.getElementById('mandelbrot-iterations') as HTMLInputElement;
+    const contrastInput = document.getElementById('mandelbrot-contrast') as HTMLInputElement;
+    const paletteInput = document.getElementById('mandelbrot-palette') as HTMLSelectElement;
+    const centerOutput = document.getElementById('mandelbrot-center');
+    const zoomOutput = document.getElementById('mandelbrot-zoom');
+    const windowOutput = document.getElementById('mandelbrot-window');
+    const budgetOutput = document.getElementById('mandelbrot-budget');
+    const presets = document.querySelectorAll<HTMLButtonElement>('.mandelbrot-preset');
+    const resetButton = document.getElementById('mandelbrot-reset');
+    const engine = new MandelbrotEngine();
+    const storageKey = 'mandelbrot-fractal-calculator-state';
+
+    const state = {
+      centerX: -0.5,
+      centerY: 0,
+      scale: 1,
+      width: 0,
+      height: 0,
+    };
+
+    function restoreNumber(value: unknown, fallback: number, min = -Infinity): number {
+      return Number.isFinite(value) && Number(value) >= min ? Number(value) : fallback;
+    }
+
+    function restoreInput(input: HTMLInputElement | HTMLSelectElement, value: unknown) {
+      if (typeof value === 'string') input.value = value;
+    }
+
+    function loadState() {
+      try {
+        const saved = window.localStorage.getItem(storageKey);
+        if (!saved) return;
+
+        const parsed = JSON.parse(saved);
+        state.centerX = restoreNumber(parsed.centerX, state.centerX);
+        state.centerY = restoreNumber(parsed.centerY, state.centerY);
+        state.scale = restoreNumber(parsed.scale, state.scale, 1);
+        restoreInput(iterationsInput, parsed.iterations);
+        restoreInput(contrastInput, parsed.contrast);
+        restoreInput(paletteInput, parsed.palette);
+        presets.forEach((preset) => preset.classList.remove('active'));
+      } catch {
+        window.localStorage.removeItem(storageKey);
+      }
+    }
+
+    function saveState() {
+      const payload = {
+        centerX: state.centerX,
+        centerY: state.centerY,
+        scale: state.scale,
+        iterations: iterationsInput.value,
+        contrast: contrastInput.value,
+        palette: paletteInput.value,
+      };
+      window.localStorage.setItem(storageKey, JSON.stringify(payload));
+    }
+
+    function channel(t: number, phase: number, palette: string): number {
+      const wave = Math.sin((t + phase) * Math.PI * 2) * 0.5 + 0.5;
+      if (palette === 'lagoon') return Math.round(32 + wave * 196);
+      if (palette === 'ink') return Math.round(18 + Math.pow(wave, 2.2) * 230);
+      return Math.round(42 + wave * 210);
+    }
+
+    function colorFor(sample: ReturnType<MandelbrotEngine['sample']>, max: number, contrast: number, palette: string): [number, number, number] {
+      if (!sample.escaped) return palette === 'ink' ? [4, 8, 18] : [8, 10, 14];
+      const t = Math.pow(sample.smooth / max, contrast);
+      if (palette === 'lagoon') return [channel(t, 0.52, palette), channel(t, 0.1, palette), channel(t, 0.82, palette)];
+      if (palette === 'ink') return [channel(t, 0.78, palette), channel(t, 0.55, palette), channel(t, 0.18, palette)];
+      return [channel(t, 0.02, palette), channel(t, 0.72, palette), channel(t, 0.42, palette)];
+    }
+
+    function resizeCanvas() {
+      const rect = canvas.getBoundingClientRect();
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      state.width = Math.max(320, Math.floor(rect.width));
+      state.height = Math.max(260, Math.floor(rect.height));
+      canvas.width = Math.floor(state.width * dpr);
+      canvas.height = Math.floor(state.height * dpr);
+    }
+
+    function render() {
+      resizeCanvas();
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      const maxIterations = parseInt(iterationsInput.value, 10);
+      const contrast = parseFloat(contrastInput.value);
+      const palette = paletteInput.value;
+      const image = ctx.createImageData(canvas.width, canvas.height);
+      const dpr = canvas.width / state.width;
+
+      for (let py = 0; py < canvas.height; py += 1) {
+        for (let px = 0; px < canvas.width; px += 1) {
+          const complex = engine.pixelToComplex(px / dpr, py / dpr, state);
+          const sample = engine.sample(complex.real, complex.imaginary, maxIterations);
+          const color = colorFor(sample, maxIterations, contrast, palette);
+          const index = (py * canvas.width + px) * 4;
+          image.data[index] = color[0];
+          image.data[index + 1] = color[1];
+          image.data[index + 2] = color[2];
+          image.data[index + 3] = 255;
+        }
+      }
+
+      ctx.putImageData(image, 0, 0);
+      updateStats(maxIterations);
+      saveState();
+    }
+
+    function updateStats(maxIterations: number) {
+      const stats = engine.getStats(state);
+      if (centerOutput) centerOutput.textContent = stats.centerLabel;
+      if (zoomOutput) zoomOutput.textContent = `${stats.magnification.toLocaleString(undefined, { maximumFractionDigits: 1 })}x`;
+      if (windowOutput) windowOutput.textContent = `${formatSpan(stats.visibleWidth)} x ${formatSpan(stats.visibleHeight)}`;
+      if (budgetOutput) budgetOutput.textContent = maxIterations.toString();
+    }
+
+    function formatSpan(value: number): string {
+      if (value < 0.001) return value.toExponential(3);
+      if (value < 0.1) return value.toFixed(6);
+      return value.toFixed(4);
+    }
+
+    function setViewport(centerX: number, centerY: number, scale: number) {
+      state.centerX = centerX;
+      state.centerY = centerY;
+      state.scale = scale;
+      render();
+    }
+
+    function resetState() {
+      window.localStorage.removeItem(storageKey);
+      iterationsInput.value = '180';
+      contrastInput.value = '1.15';
+      paletteInput.value = 'ember';
+      presets.forEach((preset) => preset.classList.remove('active'));
+      presets[0]?.classList.add('active');
+      setViewport(-0.5, 0, 1);
+    }
+
+    presets.forEach((button) => {
+      button.addEventListener('click', () => {
+        presets.forEach((preset) => preset.classList.remove('active'));
+        button.classList.add('active');
+        setViewport(
+          parseFloat(button.dataset.x || '-0.5'),
+          parseFloat(button.dataset.y || '0'),
+          parseFloat(button.dataset.scale || '1'),
+        );
+      });
+    });
+
+    canvas.addEventListener('click', (event) => {
+      const rect = canvas.getBoundingClientRect();
+      const complex = engine.pixelToComplex(event.clientX - rect.left, event.clientY - rect.top, state);
+      presets.forEach((preset) => preset.classList.remove('active'));
+      setViewport(complex.real, complex.imaginary, state.scale * 2.25);
+    });
+
+    iterationsInput.addEventListener('input', render);
+    contrastInput.addEventListener('input', render);
+    paletteInput.addEventListener('change', render);
+    resetButton?.addEventListener('click', resetState);
+    window.addEventListener('resize', render);
+    loadState();
+    render();
+  }
+</script>

package/src/tool/mandelbrot-fractal/entry.ts

@@ -0,0 +1,26 @@
+import type { ScienceToolEntry } from '../../types';
+
+export const mandelbrotFractal: ScienceToolEntry = {
+  id: 'mandelbrot-fractal-calculator',
+  icons: {
+    bg: 'mdi:blur-radial',
+    fg: 'mdi:chart-scatter-plot',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/mandelbrot-fractal/i18n/de.ts

@@ -0,0 +1,159 @@
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent } from '../../../types';
+
+const slug = 'mandelbrot-fraktal-rechner';
+const title = 'Mandelbrot Fraktal Rechner und Selbstahnlichkeits Explorer';
+const description = 'Erkunden Sie die Mandelbrot Menge, zoomen Sie in selbstahnliche Fraktalgrenzen hinein und vergleichen Sie Iterationstiefe, Farbkontrast und Koordinaten der komplexen Ebene.';
+
+const howTo = [
+  {
+    name: 'Wahlen Sie eine Region der Mandelbrot Menge',
+    text: 'Beginnen Sie mit der gesamten Menge oder springen Sie direkt zu einer detailreichen Region wie dem Seepferdchental oder einem spiralfoermigen Minibrot.',
+  },
+  {
+    name: 'Zoomen Sie durch Klicken auf das Bild',
+    text: 'Klicken Sie auf einen beliebigen Punkt auf der Leinwand, um die komplexe Ebene neu zu zentrieren und den Fraktal um diesen Punkt zu vergroessern.',
+  },
+  {
+    name: 'Passen Sie Iterationstiefe und Farbkontrast an',
+    text: 'Erhoehen Sie das Iterationsbudget, um feinere Grenzstrukturen sichtbar zu machen, und passen Sie dann Kontrast und Farbpalette an, um die Fluchtzeitbaender besser lesbar zu machen.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Was zeigt der Mandelbrot Mengen Rechner?',
+    answer: 'Er zeigt, welche komplexen Zahlen c die Rekursion z(n+1) = z(n)^2 + c beschraenkt halten, wenn man bei z = 0 beginnt. Punkte, die innerhalb des gewaehlten Iterationsbudgets nie entkommen, werden als Elemente der Menge eingefaerbt, waehrend aeussere Punkte danach gefaerbt werden, wie schnell ihre Umlaufbahn entkommt.',
+  },
+  {
+    question: 'Warum enthaelt der Mandelbrot Rand so viele Details?',
+    answer: 'Der Rand trennt stabile und entkommende Umlaufbahnen. Schon winzige Koordinatenaenderungen in der Naehe dieses Randes koennen das Langzeitverhalten vollstaendig veraendern. Diese Empfindlichkeit erzeugt ineinander verschachtelte Knoten, Spiralen, Filamente und miniaturisierte Kopien, die auf vielen Vergroesserungsstufen erscheinen.',
+  },
+  {
+    question: 'Ist die Mandelbrot Menge wirklich selbstahnlich?',
+    answer: 'Sie ist nicht perfekt selbstahnlich im gleichen strengen Sinne wie ein Sierpinski Dreieck, aber sie ist reichhaltig quasi selbstahnlich. Kleine Kopien der gesamten Menge erscheinen ueberall in der Ebene, oft verzerrt und durch aufwaendige verzweigte Strukturen verbunden.',
+  },
+  {
+    question: 'Was steuert die Iterationsanzahl?',
+    answer: 'Die Iterationsanzahl bestimmt, wie lange der Rechner jeden Punkt testet, bevor er entscheidet, dass er wahrscheinlich zur Menge gehoert. Hoehere Werte legen tiefere Filamente und sauberere Minibrots frei, erfordern aber mehr Berechnung pro Pixel.',
+  },
+  {
+    question: 'Warum aendern sich die Farben ausserhalb des schwarzen Bereichs?',
+    answer: 'Die Farben aussen basieren auf der Fluchtzeit: Punkte, die schnell entkommen, erhalten andere Farben als Punkte, die viele Iterationen in der Naehe der Menge bleiben. Glaettende Farbgebung reduziert harte Baender und erleichtert die Untersuchung der Geometrie benachbarter Umlaufbahnen.',
+  },
+];
+
+export const content: ToolLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+    title: 'Mandelbrot Fraktal Rechner',
+    canvasLabel: 'Interaktive Mandelbrot Mengen Leinwand',
+    presetsLabel: 'Mandelbrot Region Voreinstellungen',
+    presetFull: 'Gesamte Menge',
+    presetSeahorse: 'Seepferdchental',
+    presetSpiral: 'Spiral Minibrot',
+    centerPoint: 'Zentrum',
+    magnification: 'Vergroesserung',
+    visibleWindow: 'Sichtbarer Ausschnitt',
+    renderBudget: 'Iterationen',
+    iterationsLabel: 'Iterationstiefe',
+    contrastLabel: 'Fluchtkontrast',
+    colorLabel: 'Farbfeld',
+    paletteEmber: 'Glutbaender',
+    paletteLagoon: 'Lagunen Plasma',
+    paletteInk: 'Tinten Spektrum',
+  },
+  seo: [
+    {
+      type: 'title',
+      text: 'Mandelbrot Mengen Rechner fur Fraktale, Fluchtzeit und Selbstahnlichkeit',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dieser Mandelbrot Fraktal Rechner rendert die klassische Menge der komplexen Ebene, definiert durch die Iteration <strong>z(n+1) = z(n)^2 + c</strong>. Er ist fur die Erkundung konzipiert, nicht fur die passive Betrachtung. Jeder Klick zentriert die Ebene neu, jeder Zoom legt eine kleinere mathematische Nachbarschaft frei, und der Iterationsschieberegler lasst Sie entscheiden, wie tief der Rechner die Grenze testen soll, bevor er einen Punkt als stabil oder entweichend farbt.',
+    },
+    {
+      type: 'title',
+      text: 'Wie man das Mandelbrot Bild liest',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Die dunkle zentrale Form markiert Punkte, deren Umlaufbahnen innerhalb des aktuellen Iterationsbudgets beschrankt bleiben. Die farbige Aussenseite ist eine Fluchtzeitkarte. Ein Punkt, der nahe der Menge gefarbt ist, kann hunderte von Iterationen uberstehen, bevor sein Betrag den Fluchtradius uberschreitet, wahrend ein weit entfernter Punkt fast sofort entkommt. Die wissenschaftlich interessanteste Geometrie befindet sich normalerweise nicht innerhalb der gefullten Form, sondern entlang der Grenze, wo beschranktes und unbeschranktes Verhalten ineinandergreifen.',
+    },
+    {
+      type: 'table',
+      headers: ['Steuerung', 'Was sie andert', 'Wann erhohen'],
+      rows: [
+        ['<strong>Iterationstiefe</strong>', 'Wie viele Rekursionsschritte fur jeden Pixel getestet werden.', 'Hoehere Werte nach dem Zoomen in dunne Filamente oder miniaturisierte Kopien verwenden.'],
+        ['<strong>Fluchtkontrast</strong>', 'Wie stark glatte Fluchtwerte in sichtbare Baender getrennt werden.', 'Erhohen, wenn das Bild flach aussieht; senken, wenn die Farben zu hart sind.'],
+        ['<strong>Palette</strong>', 'Die Farbzuordnung, die auf aeussere Punkte angewendet wird.', 'Paletten wechseln, um Strukturen sichtbar zu machen, die von einem Farbfeld verdeckt werden koennten.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Selbstahnlichkeit und Minibrots',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Ein Grund, warum die Mandelbrot Menge so beruhmt ist, ist ihre Quasi Selbstahnlichkeit. Wenn Sie in Antennen, Spiralen und Taeler zoomen, stossen Sie immer wieder auf kleine mandelbrotahnliche Inseln, die oft als Minibrots bezeichnet werden. Diese Kopien sind nicht nur dekorativ. Ihre Anordnung spiegelt die Dynamik quadratischer Abbildungen wider, einschliesslich periodischer Knoten, Bifurkationsmuster und Regionen, in denen Umlaufbahnen ueber lange Zeitraeume gefangen bleiben, bevor sie entkommen.',
+    },
+    {
+      type: 'title',
+      text: 'Warum hoehere Iterationen bei tiefem Zoom wichtig sind',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bei der Ansicht der gesamten Menge liefert eine moderate Iterationsgrenze ein erkennbares Bild. Bei staerkerer Vergroesserung brauchen viele Grenzpunkte jedoch viel laenger, um zu zeigen, ob sie entkommen. Wenn die Iterationsgrenze zu niedrig ist, koennen feine Strukturen faelschlich solide oder matschig aussehen. Die Erhoehung der Iterationsanzahl verbessert die Grenzklassifikation und ermoeglicht es dem Rechner, schmale Ranken, Spiralarme und Satellitenknoten mit mehr Sicherheit aufzuloesen.',
+    },
+    {
+      type: 'title',
+      text: 'Mathematische Bedeutung der komplexen Koordinaten',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Die Koordinatenanzeige zeigt das aktuelle Zentrum des Ansichtsfensters als komplexe Zahl c = a + bi. Die horizontale Achse ist der Realteil und die vertikale Achse der Imaginaerteil. Ein Klick auf die Leinwand waehlt eine neue komplexe Koordinate und vergroessert dann das sichtbare Fenster darum herum. Dies macht das Werkzeug nuetzlich, um zu lernen, wie visuelle Regionen des Fraktals mit genauen Positionen in der komplexen Ebene korrespondieren.',
+    },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      name: title,
+      description,
+      applicationCategory: 'ScientificApplication',
+      operatingSystem: 'Any',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: {
+          '@type': 'Answer',
+          text: item.answer,
+        },
+      })),
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      name: title,
+      step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+      })),
+    },
+  ],
+};