@jjlmoya/utils-science 1.32.0 → 1.34.0

package/src/tool/three-body-problem/app.ts

@@ -0,0 +1,274 @@
+import { ThreeBodyEngine, THREE_BODY_PRESETS, type BodyState } from './logic/ThreeBodyEngine';
+
+export function initThreeBodyProblem() {
+  const root = document.getElementById('three-body-root');
+  if (root) {
+    const canvas = document.getElementById('three-body-canvas') as HTMLCanvasElement;
+    const controls = document.getElementById('three-body-controls');
+    const toggleButton = document.getElementById('three-body-toggle');
+    const resetButton = document.getElementById('three-body-reset');
+    const speedInput = document.getElementById('three-body-speed') as HTMLInputElement;
+    const trailInput = document.getElementById('three-body-trail') as HTMLInputElement;
+    const energyValue = document.getElementById('three-body-energy');
+    const separationValue = document.getElementById('three-body-separation');
+    const centerValue = document.getElementById('three-body-center');
+    const presetButtons = Array.from(document.querySelectorAll('.three-body-preset'));
+    const tabButtons = Array.from(document.querySelectorAll('.three-body-tab'));
+    const engine = new ThreeBodyEngine();
+    let activePreset = THREE_BODY_PRESETS[0];
+    let bodies = engine.cloneBodies(activePreset.bodies);
+    let trails = bodies.map(() => [] as Array<{ x: number; y: number }>);
+    let isRunning = true;
+    let animationFrame = 0;
+    let zoom = activePreset.zoom;
+    let activeBodyIndex = 0;
+    const labels = {
+      pause: root.dataset.pauseLabel ?? 'Pause',
+      play: root.dataset.playLabel ?? 'Play',
+    };
+
+    function setPreset(presetId: string) {
+      const selectedPreset = THREE_BODY_PRESETS.find((preset) => preset.id === presetId) ?? THREE_BODY_PRESETS[0];
+      activePreset = selectedPreset;
+      bodies = engine.cloneBodies(selectedPreset.bodies);
+      trails = bodies.map(() => []);
+      zoom = selectedPreset.zoom;
+      trailInput.value = selectedPreset.trailLength.toString();
+      renderControls();
+      updatePresetButtons(presetId);
+    }
+    function updatePresetButtons(presetId: string) {
+      presetButtons.forEach((button) => {
+        button.classList.toggle('is-active', button.getAttribute('data-preset') === presetId);
+      });
+    }
+    function renderControls() {
+      if (!controls) return;
+      controls.innerHTML = '';
+      bodies.forEach((body, index) => {
+        controls.appendChild(createBodyPanel(body, index));
+      });
+      bindBodyInputs(controls.querySelectorAll('input'));
+      bindScrubbableInputs(controls.querySelectorAll('.three-body-scrub-input'));
+    }
+    function createBodyPanel(body: BodyState, index: number) {
+      const panel = document.createElement('article');
+      panel.className = 'three-body-panel';
+      panel.classList.toggle('is-active', index === activeBodyIndex);
+      panel.style.setProperty('--body-color', body.color);
+      panel.dataset.bodyLabel = body.label;
+      panel.dataset.bodyIndex = index.toString();
+      panel.innerHTML = `
+        <div class="three-body-panel-title">
+          <strong style="color: ${body.color}">${body.label}</strong>
+        </div>
+        ${renderScrubInput({ index, field: 'mass', label: 'm', min: 0.2, max: 4, value: body.mass, step: 0.05, color: body.color })}
+        ${renderScrubInput({ index, field: 'vx', label: 'v_x', min: -1.6, max: 1.6, value: body.vx, step: 0.01, color: body.color })}
+        ${renderScrubInput({ index, field: 'vy', label: 'v_y', min: -1.6, max: 1.6, value: body.vy, step: 0.01, color: body.color })}
+      `;
+      return panel;
+    }
+    function bindBodyInputs(inputs: NodeListOf<Element>) {
+      inputs.forEach((input) => {
+        input.addEventListener('input', () => {
+          const slider = input as HTMLInputElement;
+          const bodyIndex = Number(slider.dataset.bodyIndex);
+          const field = slider.dataset.field as keyof BodyState;
+          const value = clampToInput(slider, Number(slider.value));
+          if (Number.isFinite(bodyIndex) && field) {
+            bodies[bodyIndex] = { ...bodies[bodyIndex], [field]: value };
+            trails[bodyIndex] = [];
+            slider.value = formatInputValue(value, slider);
+          }
+        });
+      });
+    }
+    function setActiveBody(index: number) {
+      activeBodyIndex = index;
+      tabButtons.forEach((button) => {
+        button.classList.toggle('is-active', Number((button as HTMLElement).dataset.bodyTab) === index);
+      });
+      controls?.querySelectorAll('.three-body-panel').forEach((panel) => {
+        panel.classList.toggle('is-active', Number((panel as HTMLElement).dataset.bodyIndex) === index);
+      });
+    }
+    interface ScrubInputConfig {
+      index: number;
+      field: string;
+      label: string;
+      min: number;
+      max: number;
+      value: number;
+      step: number;
+      color: string;
+    }
+    function renderScrubInput(config: ScrubInputConfig) {
+      const value = formatInputValue(config.value, { dataset: { step: config.step.toString() } } as HTMLInputElement);
+      return `
+        <label class="three-body-scrub-row">
+          <span>${config.label}</span>
+          <input class="three-body-scrub-input" style="color: ${config.color}" data-body-index="${config.index}" data-field="${config.field}" data-min="${config.min}" data-max="${config.max}" data-step="${config.step}" inputmode="decimal" value="${value}" />
+        </label>
+      `;
+    }
+    function formatInputValue(value: number, input: HTMLInputElement) {
+      const step = Number(input.dataset.step) || 0.01;
+      const decimals = step >= 1 ? 0 : Math.max(0, step.toString().split('.')[1]?.length ?? 2);
+      return value.toFixed(decimals);
+    }
+    function clampToInput(input: HTMLInputElement, value: number) {
+      const min = Number(input.dataset.min);
+      const max = Number(input.dataset.max);
+      if (!Number.isFinite(value)) return Number(input.value) || 0;
+      return Math.min(max, Math.max(min, value));
+    }
+    function bindScrubbableInputs(inputs: NodeListOf<Element>) {
+      inputs.forEach((inputElement) => {
+        const input = inputElement as HTMLInputElement;
+        let startX = 0;
+        let startValue = 0;
+        let dragged = false;
+
+        input.addEventListener('pointerdown', (event) => {
+          startX = event.clientX;
+          startValue = Number(input.value) || 0;
+          dragged = false;
+          input.setPointerCapture(event.pointerId);
+        });
+        input.addEventListener('pointermove', (event) => {
+          if (!input.hasPointerCapture(event.pointerId)) return;
+          const delta = event.clientX - startX;
+          if (Math.abs(delta) < 2) return;
+          dragged = true;
+          const step = Number(input.dataset.step) || 0.01;
+          const nextValue = clampToInput(input, startValue + delta * step);
+          input.value = formatInputValue(nextValue, input);
+          input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        input.addEventListener('pointerup', (event) => {
+          if (input.hasPointerCapture(event.pointerId)) input.releasePointerCapture(event.pointerId);
+          if (dragged) input.blur();
+        });
+      });
+    }
+    function draw() {
+      const context = canvas.getContext('2d');
+      if (!context) return;
+
+      const dpr = window.devicePixelRatio || 1;
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      context.scale(dpr, dpr);
+      context.clearRect(0, 0, width, height);
+
+      const originX = width / 2;
+      const originY = height / 2;
+      const origin = { x: originX, y: originY };
+      drawGrid(context, width, height, origin);
+      bodies.forEach((body, index) => drawBody(context, body, trails[index], origin));
+    }
+    function drawBody(context: CanvasRenderingContext2D, body: BodyState, trail: Array<{ x: number; y: number }>, origin: { x: number; y: number }) {
+      drawTrail(context, body, trail, origin);
+      drawBodyGlow(context, body, origin);
+    }
+    function drawTrail(context: CanvasRenderingContext2D, body: BodyState, trail: Array<{ x: number; y: number }>, origin: { x: number; y: number }) {
+      context.beginPath();
+      trail.forEach((point, pointIndex) => {
+        const screenX = origin.x + point.x * zoom;
+        const screenY = origin.y + point.y * zoom;
+        if (pointIndex === 0) context.moveTo(screenX, screenY);
+        else context.lineTo(screenX, screenY);
+      });
+      context.strokeStyle = body.color;
+      context.globalAlpha = 0.82;
+      context.lineWidth = 1.85;
+      context.shadowColor = body.color;
+      context.shadowBlur = 2.5;
+      context.stroke();
+      context.shadowBlur = 0;
+      context.globalAlpha = 1;
+    }
+    function drawBodyGlow(context: CanvasRenderingContext2D, body: BodyState, origin: { x: number; y: number }) {
+      const x = origin.x + body.x * zoom;
+      const y = origin.y + body.y * zoom;
+      const radius = Math.max(4, Math.sqrt(body.mass) * 5);
+      const glow = context.createRadialGradient(x, y, 2, x, y, radius * 3);
+      glow.addColorStop(0, body.color);
+      glow.addColorStop(1, 'rgba(255,255,255,0)');
+      context.fillStyle = glow;
+      context.beginPath();
+      context.arc(x, y, radius * 3, 0, Math.PI * 2);
+      context.fill();
+      context.fillStyle = body.color;
+      context.beginPath();
+      context.arc(x, y, radius, 0, Math.PI * 2);
+      context.fill();
+    }
+    function drawGrid(context: CanvasRenderingContext2D, width: number, height: number, origin: { x: number; y: number }) {
+      const isDark = document.documentElement.classList.contains('theme-dark') || document.body.classList.contains('theme-dark');
+      context.strokeStyle = isDark ? 'rgba(255,255,255,0.09)' : 'rgba(67, 56, 43, 0.12)';
+      context.lineWidth = 1;
+      for (let x = origin.x % 48; x < width; x += 48) {
+        context.beginPath();
+        context.moveTo(x, 0);
+        context.lineTo(x, height);
+        context.stroke();
+      }
+      for (let y = origin.y % 48; y < height; y += 48) {
+        context.beginPath();
+        context.moveTo(0, y);
+        context.lineTo(width, y);
+        context.stroke();
+      }
+    }
+    function updateReadout() {
+      const metrics = engine.calculateMetrics(bodies);
+      if (energyValue) energyValue.textContent = metrics.totalEnergy.toFixed(3);
+      if (separationValue) separationValue.textContent = `${metrics.minSeparation.toFixed(2)} - ${metrics.maxSeparation.toFixed(2)}`;
+      if (centerValue) centerValue.textContent = `${metrics.centerOfMassX.toFixed(2)}, ${metrics.centerOfMassY.toFixed(2)}`;
+    }
+    function tick() {
+      if (isRunning) {
+        const speed = Number(speedInput.value) || 1;
+        for (let i = 0; i < 3; i += 1) {
+          const snapshot = engine.step(bodies, activePreset.timeStep * speed);
+          bodies = snapshot.bodies;
+        }
+        const trailLimit = Number(trailInput.value) || activePreset.trailLength;
+        trails.forEach((trail, index) => {
+          trail.push({ x: bodies[index].x, y: bodies[index].y });
+          if (trail.length > trailLimit) trail.shift();
+        });
+      }
+      updateReadout();
+      draw();
+      animationFrame = window.requestAnimationFrame(tick);
+    }
+    presetButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        setPreset(button.getAttribute('data-preset') ?? 'figureEight');
+      });
+    });
+    tabButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        setActiveBody(Number((button as HTMLElement).dataset.bodyTab) || 0);
+      });
+    });
+    toggleButton?.addEventListener('click', () => {
+      isRunning = !isRunning;
+      toggleButton.textContent = isRunning ? labels.pause : labels.play;
+    });
+
+    resetButton?.addEventListener('click', () => {
+      setPreset(activePreset.id);
+    });
+    bindScrubbableInputs(document.querySelectorAll('.three-body-global-controls .three-body-scrub-input'));
+    setPreset('figureEight');
+    tick();
+    document.addEventListener('astro:before-swap', () => {
+      window.cancelAnimationFrame(animationFrame);
+    }, { once: true });
+  }
+}

package/src/tool/three-body-problem/bibliography.astro

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

package/src/tool/three-body-problem/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'A remarkable periodic solution of the three-body problem in the case of equal masses',
+    url: 'https://arxiv.org/abs/math/0011268',
+  },
+  {
+    name: 'Three-body problem',
+    url: 'https://en.wikipedia.org/wiki/Three-body_problem',
+  },
+  {
+    name: 'Solar System Dynamics',
+    url: 'https://www.solarsystemdynamics.info/',
+  },
+];

package/src/tool/three-body-problem/component.astro

@@ -0,0 +1,70 @@
+---
+import './three-body-problem-simulator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div
+  class="three-body-root"
+  id="three-body-root"
+  data-pause-label={ui.pauseButton}
+  data-play-label={ui.playButton}
+><section class="three-body-stage" aria-label={ui.canvasLabel}>
+    <div class="three-body-sky">
+      <canvas id="three-body-canvas"></canvas>
+      <div class="three-body-reticle" aria-hidden="true"></div>
+    </div>
+    <div class="three-body-readout">
+      <div>
+        <span>E</span>
+        <strong id="three-body-energy">0.00</strong>
+      </div>
+      <div>
+        <span>R</span>
+        <strong id="three-body-separation">0.00</strong>
+      </div>
+      <div>
+        <span>COM</span>
+        <strong id="three-body-center">0.00, 0.00</strong>
+      </div>
+    </div></section>
+  <section class="three-body-console">
+    <div class="three-body-global-controls">
+      <label class="three-body-scrub-row">
+        <span>dt</span>
+        <input id="three-body-speed" class="three-body-scrub-input" inputmode="decimal" data-min="0.25" data-max="2.5" data-step="0.05" value="1.00" />
+      </label>
+      <label class="three-body-scrub-row">
+        <span>trail</span>
+        <input id="three-body-trail" class="three-body-scrub-input" inputmode="numeric" data-min="120" data-max="900" data-step="20" value="720" />
+      </label>
+    </div>
+    <div class="three-body-body-tabs" aria-label="Body selector">
+      <button class="three-body-tab is-active" type="button" data-body-tab="0">A</button>
+      <button class="three-body-tab" type="button" data-body-tab="1">B</button>
+      <button class="three-body-tab" type="button" data-body-tab="2">C</button>
+    </div>
+    <div class="three-body-body-controls" id="three-body-controls"></div>
+  </section>
+  <div class="three-body-instrument-bar">
+    <div class="three-body-presets" aria-label={ui.presetsLabel}>
+      <button class="three-body-preset is-active" type="button" data-preset="figureEight"><span class="full">{ui.figureEightPreset}</span><span class="short">Fig 8</span></button>
+      <button class="three-body-preset" type="button" data-preset="lagrange"><span class="full">{ui.lagrangePreset}</span><span class="short">Lagrange</span></button>
+      <button class="three-body-preset" type="button" data-preset="slingshot"><span class="full">{ui.slingshotPreset}</span><span class="short">Shot</span></button>
+    </div>
+    <div class="three-body-actions">
+      <button class="three-body-action" type="button" id="three-body-toggle">{ui.pauseButton}</button>
+      <button class="three-body-action" type="button" id="three-body-reset">{ui.resetButton}</button>
+    </div></div></div>
+
+<script>
+  import { initThreeBodyProblem } from './app';
+
+  initThreeBodyProblem();
+</script>
+
+

package/src/tool/three-body-problem/entry.ts

@@ -0,0 +1,26 @@
+import type { ScienceToolEntry } from '../../types';
+
+export const threeBodyProblem: ScienceToolEntry = {
+  id: 'three-body-problem-simulator',
+  icons: {
+    bg: 'mdi:orbit-variant',
+    fg: 'mdi:vector-polyline',
+  },
+  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/three-body-problem/i18n/de.ts

@@ -0,0 +1,162 @@
+import { bibliography } from '../bibliography';
+import type { ToolLocaleContent } from '../../../types';
+
+const slug = 'dreikoerperproblem-simulator';
+const title = 'Dreikörperproblem Simulator';
+const description = 'Simuliere drei Gravitationskörper in einer zweidimensionalen Ebene mit einstellbaren Massen, Geschwindigkeitsvektoren, Spuren und stabilen oder chaotischen Voreinstellungen.';
+
+const howTo = [
+  {
+    name: 'Wähle eine orbitale Voreinstellung',
+    text: 'Beginne mit der Achterbahn für einen stabilen Referenzfall, dem Lagrange-Dreieck für ein rotierendes Gleichgewicht oder der Schleudervoreinstellung für eine sichtbar chaotische Begegnung.',
+  },
+  {
+    name: 'Passe Massen und Geschwindigkeitsvektoren an',
+    text: 'Nutze die Schieberegler für jeden Körper, um Masse und anfängliche Geschwindigkeitskomponenten zu ändern. Kleine Änderungen können ein Muster bewahren, verformen oder vollständig zerstören.',
+  },
+  {
+    name: 'Lies die Diagnosewerte',
+    text: 'Beobachte die Gesamtenergie, die nächste und entfernteste Entfernung sowie den Massenschwerpunkt, um zu verstehen, ob die numerische Umlaufbahn gebunden bleibt oder auseinanderdriftet.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Was ist das Dreikörperproblem?',
+    answer: 'Das Dreikörperproblem fragt, wie sich drei Massen bewegen, wenn jeder Körper die beiden anderen gravitativ anzieht. Anders als beim Zweikörperproblem gibt es keine allgemeine geschlossene Gleichung, die jede mögliche Konfiguration löst, daher werden die meisten praktischen Fälle mit numerischer Integration untersucht.',
+  },
+  {
+    question: 'Warum sind Dreikörperumlaufbahnen instabil?',
+    answer: 'Viele Dreikörpersysteme sind empfindlich gegenüber Anfangsbedingungen. Eine winzige Änderung der Geschwindigkeit, Position oder Masse verändert den Zeitpunkt naher Begegnungen, und diese Begegnungen können dramatisch Energie austauschen. Das Ergebnis ist ein System, das eine Weile gebunden bleiben und dann plötzlich einen Körper ausstoßen kann.',
+  },
+  {
+    question: 'Was zeigt die Achterbahn-Voreinstellung?',
+    answer: 'Die Achterbahn-Voreinstellung ist eine berühmte periodische Lösung für drei gleiche Massen. Jeder Körper folgt derselben Bahn mit einem Phasenversatz und zeigt, dass das Dreikörperproblem elegante stabile Inseln innerhalb einer viel größeren chaotischen Landschaft enthalten kann.',
+  },
+  {
+    question: 'Ist dies ein physikalisch exakter Astronomie-Simulator?',
+    answer: 'Dieses Werkzeug verwendet ein abgeschwächtes newtonsches Modell und einen symplektischen Geschwindigkeits-Verlet-Schritt, damit die Bewegung für das Lernen treu und stabil wirkt. Es ist für die interaktive Erkundung konzipiert, nicht für die hochpräzise Ephemeridenvorhersage.',
+  },
+  {
+    question: 'Wie sollte ich die Gesamtenergie interpretieren?',
+    answer: 'Negative Gesamtenergie deutet normalerweise auf ein gebundenes System hin, während Energie nahe Null eine Flucht erleichtern kann. In einer numerischen Simulation warnt eine große Energiedrift auch davor, dass der Zeitschritt oder die Begegnungsgeometrie den Integrator überlastet.',
+  },
+];
+
+export const content: ToolLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+    title,
+    kicker: 'Gravitations-Chaos-Labor',
+    canvasLabel: 'Interaktive zweidimensionale Dreikörper-Orbit-Leinwand',
+    presetsLabel: 'Orbitale Voreinstellungen',
+    figureEightPreset: 'Achterbahn',
+    lagrangePreset: 'Lagrange-Dreieck',
+    slingshotPreset: 'Schleuder',
+    pauseButton: 'Pause',
+    playButton: 'Abspielen',
+    resetButton: 'Zurücksetzen',
+    speedLabel: 'Simulationsgeschwindigkeit',
+    trailLabel: 'Spurlänge',
+    massLabel: 'Masse',
+    velocityXLabel: 'Geschwindigkeit X',
+    velocityYLabel: 'Geschwindigkeit Y',
+    energyLabel: 'Gesamtenergie',
+    separationLabel: 'Entfernungsbereich',
+    centerMassLabel: 'Massenschwerpunkt',
+  },
+  seo: [
+    {
+      type: 'title',
+      text: 'Interaktiver Dreikörperproblem-Simulator für orbitales Chaos',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Das Dreikörperproblem ist eine der klarsten Demonstrationen dafür, dass einfache Gesetze komplizierte Bewegungen erzeugen können. Die newtonsche Gravitation liefert eine kompakte Kraftregel, aber sobald ein dritter massiver Körper zum System hinzukommt, formt jeder Orbit kontinuierlich die beiden anderen um. Dieser Simulator lässt dich direkt mit dieser Instabilität experimentieren: Wähle eine bekannte Konfiguration, passe Massen und Geschwindigkeitsvektoren an und beobachte, ob die Körper eine sich wiederholende Umlaufbahn, ein rotierendes Dreieck oder ein chaotisches Streuereignis bilden.',
+    },
+    {
+      type: 'title',
+      text: 'Was die Voreinstellungen zeigen',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Voreinstellung', 'Physikalische Idee', 'Worauf achten'],
+      rows: [
+        ['<strong>Achterbahn</strong>', 'Eine periodische Lösung mit gleichen Massen, bei der alle drei Körper dieselbe Schleife teilen.', 'Der Orbit bleibt nur organisiert, wenn Symmetrie und Geschwindigkeitsgleichgewicht sorgfältig erhalten bleiben.'],
+        ['<strong>Lagrange-Dreieck</strong>', 'Drei Körper besetzen ein gleichseitiges Dreieck, das sich um den Massenschwerpunkt dreht.', 'Massenbilanz und Tangentialgeschwindigkeit verhindern, dass das Dreieck nach innen kollabiert.'],
+        ['<strong>Schleuder</strong>', 'Eine nahe Begegnung überträgt Energie zwischen den Körpern.', 'Ein Körper kann an Geschwindigkeit gewinnen, während ein anderer stärker gebunden wird, was zeigt, warum chaotische Ausstöße auftreten.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Warum kleine Änderungen wichtig sind',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bei einem Zweikörper-Orbit bieten der Massenschwerpunkt und die Orbitalellipse ein stabiles geometrisches Bild. In einem Dreikörpersystem wirken nahe Vorbeiflüge wie gravitative Verhandlungen: Ein Körper kann orbitale Energie ausleihen, scharf die Richtung ändern oder eine geordnete Schleife in ein Streuereignis verwandeln. Diese Empfindlichkeit ist der Grund, warum reale astrophysikalische Systeme wie Dreifachsterne, Planeten-Mond-Begegnungen und frühe Sonnensystem-Planetesimale oft numerische Integration erfordern und nicht eine einzige einfache Formel.',
+    },
+    {
+      type: 'title',
+      text: 'Wie man die Diagnose verwendet',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Gesamtenergie</strong> hilft dir zu beurteilen, ob das System gebunden ist und ob die numerische Integration stabil bleibt.',
+        '<strong>Entfernungsbereich</strong> zeigt die nächsten und entferntesten Paarabstände, wodurch Beinahekollisionen und Ausstöße leicht zu erkennen sind.',
+        '<strong>Massenschwerpunkt</strong> sollte relativ stabil bleiben, wenn der anfängliche Impuls ausgeglichen ist; eine Drift deutet auf eine absichtlich asymmetrische Konfiguration oder einen geänderten Geschwindigkeitsvektor hin.',
+        '<strong>Spurlänge</strong> offenbart die langfristige Struktur: Kurze Spuren betonen die aktuelle Interaktion, während lange Spuren sich wiederholende Schleifen und langsame orbitale Präzession sichtbar machen.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Im Werkzeug verwendetes numerisches Modell',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Der Simulator verwendet die newtonsche invers-quadratische Anziehung mit einem kleinen Glättungsterm, der visuelle Explosionen bei extrem nahen Vorbeiflügen verhindert. Die Bewegung wird mit einem Geschwindigkeits-Verlet-Schritt vorangetrieben, einer gängigen Wahl für Orbit-Demonstrationen, da er das Energieverhalten besser handhabt als ein einfaches Euler-Update. Das Ergebnis ist ein reaktionsschnelles Bildungsmodell, das das qualitative Verhalten des Dreikörperproblems sichtbar macht, ohne professionelle Himmelsmechanik-Software ersetzen zu wollen.',
+    },
+  ],
+  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,
+      })),
+    },
+  ],
+};