2026-04-06 21:38:06 +02:00
|
|
|
# Sortier-Algorithmen Visualisierung
|
|
|
|
|
|
|
|
|
|
Interaktive Visualisierung von 20 Sortieralgorithmen mit Schritt-für-Schritt-Darstellung, Speicher-Ansicht und Keyboard-Steuerung.
|
|
|
|
|
|
|
|
|
|
**Datei:** `sorting_visualization.html` — Single-File, keine Abhängigkeiten, läuft direkt im Browser.
|
|
|
|
|
|
|
|
|
|
[Online ansehen](sorting_visualization.html) · [Tests bestehen: 198/198](test_algorithms.js)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Algorithmus-Übersicht
|
|
|
|
|
|
|
|
|
|
| Kategorie | Algorithmen |
|
|
|
|
|
|---|---|
|
|
|
|
|
| O(n²) | Bubble Sort, Selection Sort, Insertion Sort, Cocktail Shaker Sort |
|
|
|
|
|
| O(n log n) | Merge Sort, Heap Sort, Quick Sort, 3-Way Quick Sort, Dual-Pivot Quick Sort, Introsort, Shell Sort, Tree Sort, Timsort |
|
|
|
|
|
| Linear | Counting Sort, Radix Sort, Bucket Sort |
|
|
|
|
|
| Spezial | Pancake Sort, Cycle Sort, Bogo Sort, Fisher-Yates Shuffle |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Features
|
|
|
|
|
|
|
|
|
|
- **20 Algorithmen** — vom klassischen Bubble Sort bis zum Fisher-Yates Shuffle
|
|
|
|
|
- **Speicher-Ansicht** — zeigt Hilfsdatenstrukturen bei Merge Sort, Heap Sort, Timsort, Counting/Radix/Bucket Sort
|
|
|
|
|
- **5 Datensatz-Presets** — Zufällig, Sortiert, Umgekehrt, Fast sortiert, Duplikate
|
|
|
|
|
- **Schritt-Navigation** — vor, zurück, Play/Pause
|
|
|
|
|
- **Keyboard-Steuerung** — alle Funktionen auch ohne Maus bedienbar
|
|
|
|
|
- **URL-State** — Auswahl bleibt beim Neuladen erhalten
|
|
|
|
|
- **Mobile optimiert** — Touch-Support, zoom-resistent
|
|
|
|
|
- **Hell/Dunkel-Modus** — per Button oder `T`
|
|
|
|
|
- **Barrierefreiheit** — ARIA-Labels, Screen-Reader-Ankündigungen
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Schnellstart
|
|
|
|
|
|
|
|
|
|
1. `sorting_visualization.html` im Browser öffnen
|
|
|
|
|
2. Algorithmus wählen → Start mit `Space`
|
|
|
|
|
3. Oder: Play-Button drücken
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Tastaturkürzel
|
|
|
|
|
|
|
|
|
|
| Taste | Funktion |
|
|
|
|
|
|---|---|
|
|
|
|
|
| `Space` / `K` | Play / Pause |
|
|
|
|
|
| `→` / `L` | Ein Schritt vor |
|
|
|
|
|
| `←` / `J` | Ein Schritt zurück |
|
|
|
|
|
| `R` | Reset |
|
|
|
|
|
| `T` | Theme wechseln |
|
|
|
|
|
| `S` | Mischen (Fisher-Yates) |
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Tests
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
node test_algorithms.js
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Alle 198 Tests müssen bestehen.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Dateien
|
|
|
|
|
|
|
|
|
|
```
|
2026-04-07 03:27:16 +02:00
|
|
|
sorting_visualization.html # Hauptprogramm (Single-File)
|
|
|
|
|
BEDIENUNGSANLEITUNG.md # Bedienungsanlietung
|
2026-04-06 21:38:06 +02:00
|
|
|
test_algorithms.js # Node.js Test-Suite
|
|
|
|
|
.gitignore # Git-Konfiguration
|
|
|
|
|
README.md # Dieses Dokument
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Entwicklung
|
|
|
|
|
|
|
|
|
|
- **Kein Build-Schritt** — pure HTML/JS/CSS
|
|
|
|
|
- **Keine externen Abhängigkeiten** — läuft offline
|
|
|
|
|
- **Externe CDN** (optional, für Icons): Lucide Icons, Tailwind CSS
|
|
|
|
|
- **Version** — wird automatisch via `pre-commit`-Hook erhöht
|
2026-04-06 21:50:08 +02:00
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Autor
|
|
|
|
|
|
|
|
|
|
© 2026 Dieter Schlüter <dieter(dot)schlueter(at)linix(dot)de>
|
