feat(gray-scott): add reaction-diffusion demo

Add a Gray-Scott page with a shader ping-pong on float textures,
five presets and pointer painting.
Tick the Gray-Scott item in ROADMAP.md.

src/assets/i18n/de.json

@@ -788,6 +788,44 @@
       "ITEM_5": "Ohne WebGPU laufen dieselben drei Schritte in TypeScript auf Float32Arrays. Die Karte wird jedes Bild als 8-Bit-Textur hochgeladen und von einem WebGL-Shader angezeigt."
     }
   },
+  "GRAY_SCOTT": {
+    "TITLE": "Reaktions-Diffusion (Gray-Scott)",
+    "RESET": "Zurücksetzen",
+    "PRESET": "Voreinstellung",
+    "PRESET_CORAL": "Koralle",
+    "PRESET_BUBBLES": "Blasen",
+    "PRESET_SPOTS": "Punkte",
+    "PRESET_WORMS": "Würmer",
+    "PRESET_MAZE": "Labyrinth",
+    "FEED": "Zufuhr",
+    "KILL": "Abbau",
+    "DIFFUSE_U": "Diffusion U",
+    "DIFFUSE_V": "Diffusion V",
+    "STEPS_PER_FRAME": "Schritte pro Bild",
+    "PAINT_HINT": "Halte die Maus oder einen Finger auf der Zeichenfläche gedrückt, um Chemikalie V zu malen. Unter dem Zeiger startet neues Wachstum.",
+    "NO_FLOAT_TEXTURES": "Diese GPU kann nicht in Float-Texturen rendern. Die Simulation läuft hier nicht.",
+    "EXPLANATION": {
+      "TITLE": "Muster aus zwei Chemikalien",
+      "RD_TITLE": "Reaktions-Diffusion",
+      "RD": "In einem Reaktions-Diffusions-System breiten sich Stoffe aus (Diffusion) und wandeln sich ineinander um (Reaktion). Alan Turing zeigte 1952, dass so aus einem fast gleichmäßigen Start stabile Muster wie Punkte und Streifen entstehen. Ähnliche Muster gibt es auf Tierfellen und Muscheln.",
+      "MODEL_TITLE": "Gray-Scott-Modell",
+      "MODEL": "Zwei Chemikalien leben auf einem Raster. Chemikalie U kommt mit der Zufuhrrate neu hinzu. Chemikalie V frisst U (U + 2V → 3V) und wird mit der Rate Zufuhr + Abbau entfernt. U breitet sich schneller aus als V. Nur die zwei Zahlen Zufuhr und Abbau entscheiden, ob Punkte, Würmer, Koralle oder ein Labyrinth entstehen.",
+      "GPU_TITLE": "GPU-Ping-Pong",
+      "GPU": "Das Raster ist eine Float-Textur mit U im roten und V im grünen Kanal. Ein Fragment-Shader berechnet einen Schritt für alle Zellen gleichzeitig. Er liest die alte Textur und schreibt eine zweite. Dann tauschen beide Texturen die Rollen.",
+      "DISCLAIMER": "Vereinfachungen in dieser Demo:",
+      "DISCLAIMER_1": "Explizites Euler-Verfahren mit Zeitschritt 1. Die Diffusionsregler enden bei 1, damit die Schritte stabil bleiben.",
+      "DISCLAIMER_2": "Das Raster läuft an den Rändern um (Torus): Muster, die auf einer Seite hinausgehen, kommen auf der anderen zurück.",
+      "DISCLAIMER_3": "Hat die GPU keine float32-Render-Texturen, wird float16 benutzt. Die Muster sind dann gröber."
+    },
+    "HOW_IT_WORKS": {
+      "INTRO": "Das Raster hat 512 × 512 Zellen. Jedes Bild führt die gewählte Zahl von Schritten aus. Jeder Schritt ist ein Vollbild-Durchlauf eines Fragment-Shaders.",
+      "ITEM_1": "Start: Überall U = 1 und V = 0, im mittleren Bereich zufällige kleine Blöcke mit U = 0,5 und V = 0,25. Zurücksetzen zeichnet diesen Start neu.",
+      "ITEM_2": "Diffusion: Der Laplace-Wert einer Zelle ist die gewichtete Summe der 3×3-Nachbarn minus die Zelle selbst. Die Gewichte sind 0,2 für die vier Seitennachbarn und 0,05 für die vier Ecken.",
+      "ITEM_3": "Reaktion: dU = Du · lapU − U·V² + Zufuhr · (1 − U) und dV = Dv · lapV + U·V² − (Zufuhr + Abbau) · V. Beide Werte werden auf 0..1 begrenzt.",
+      "ITEM_4": "Malen: Solange du auf die Zeichenfläche drückst, wird V nahe dem Zeiger auf mindestens 0,5 angehoben. So startet überall neues Wachstum, wo du malst.",
+      "ITEM_5": "Anzeige: Die Farbe kommt nur aus V, von Dunkelblau bis Hellcyan. Die zwei Texturen tauschen nach jedem Schritt, damit keine Zelle einen Wert liest, der im selben Schritt schon aktualisiert wurde."
+    }
+  },
   "GPU": {
     "WEBGL_FALLBACK": "WebGPU ist nicht verfügbar. WebGL wird als Fallback verwendet. Die Leistung kann eingeschränkt sein.",
     "NOT_SUPPORTED": "Weder WebGPU noch WebGL konnten initialisiert werden. GPU-Visualisierungen sind nicht verfügbar."
@@ -842,6 +880,10 @@
       "TITLE": "Physarum (Schleimpilz)",
       "DESCRIPTION": "Transportnetze eines Schleimpilzes aus einfachen Agenten und einer Spurkarte, berechnet auf der GPU (WebGPU, Fallback WebGL + CPU)."
     },
+    "GRAY_SCOTT": {
+      "TITLE": "Reaktions-Diffusion (Gray-Scott)",
+      "DESCRIPTION": "Punkte, Würmer und Korallen aus zwei reagierenden Chemikalien, berechnet auf der GPU mit Float-Texturen (WebGPU und WebGL)."
+    },
     "NOTE": "HINWEIS",
     "GRID_HEIGHT": "Höhe",
     "GRID_WIDTH": "Breite",
@@ -995,6 +1037,8 @@
     "SUBSTEPS": "Substeps pro Frame",
     "AGENTS": "Agenten",
     "PAIR_CHECKS": "Paarprüfungen pro Bild",
-    "TRAIL_MAP": "Spurkarte"
+    "TRAIL_MAP": "Spurkarte",
+    "GRID": "Gitter",
+    "STEPS_PER_SECOND": "Schritte/s"
   }
 }