Dieses Programm visualisiert die Funktionsweise von **20 Sortieralgorithmen** — von Bubble Sort bis Fisher-Yates Shuffle. Es zeigt Schritt für Schritt, wie ein Algorithmus ein Array sortiert, macht die Datenstrukturen und Speichernutzung sichtbar und vermittelt ein intuitives Verständnis dafür, warum der eine Algorithmus schneller ist als der andere.
**Einschränkung:** Bogo Sort ist auf 8 Elemente begrenzt, da seine O(n·n!)-Komplexität bei größeren Arrays den Browser einfrieren lässt.
| **Zufall** | Zufällig verteilte Werte — der Standard-Testfall |
| **Sortiert** | Bereits aufsteigend sortiert — manche Algorithmen (z.B. Quick Sort mit erstem Element als Pivot) werden dadurch extrem langsam |
| **Umgekehrt** | Absteigend sortiert — das Gegenstück und ein fairer Test für die meisten Algorithmen |
| **Fast sortiert** | Nur wenige Elemente an der falschen Stelle — adaptiven Algorithmen (Insertion Sort, Timsort) spielen hier ihre Stärke aus |
| **Duplikate** | Viele gleiche Werte — der Härtetest: klassischer Quick Sort degeneriert zu O(n²), 3-Way Quick Sort brilliert hier |
### Eigene Werte
Du kannst eigene Zahlen eingeben, getrennt durch Kommas, Leerzeichen oder Zeilenumbrüche. Beispiele:
```
5, 3, 8, 1, 9, 2
```
Über den Clipboard-Button kannst du auch direkt aus der Zwischenablage einfügen (Mehrfachpaste wird unterstützt). Die Anzahl der eingegebenen Werte wird oben rechts im Feld angezeigt.
**Wichtig:** Eigene Werte überschreiben das Preset. Sobald du eigene Werte eingibst, verwendet das Programm diese statt der Vorlage.
### Array-Größe
Schieberegler von 5 bis 200 Elemente. Wird zurückgesetzt, wenn du eigene Werte eingibst.
- **Klein (5–20):** Gut zum Verstehen der Abläufe
- **Mittel (30–80):** Guter Kompromiss aus Übersicht und Realismus
- **Groß (100–200):** Zeigt das Skalierungsverhalten
### Geschwindigkeit
Schieberegler von 1 bis 100 — er represents die Verzögerung zwischen zwei Schritten in Millisekunden:
- **1 (links):** ~1000 ms/Schritt — sehr langsam, zum Beobachten
- **50 (Mitte):** ~500 ms/Schritt — ausgewogen
- **100 (rechts):** ~10 ms/Schritt — sehr schnell
Die tatsächliche Geschwindigkeit hängt auch von der Browser-Leistung und der Array-Größe ab.
---
## 5. Steuerung
| Button | Funktion |
|---|---|
| **⏮** | Einen Schritt zurück — zeigt die vorherige Operation |
| **▶** | Animation starten — läuft bis zum Ende oder bis Pause |
| **⏸** | Animation anhalten — kann mit ▶ fortgesetzt werden |
| **⏭** | Einen Schritt vor — führt genau eine Operation aus |
| **🔀** | Mischen — Fisher-Yates Shuffle auf das aktuelle Array |
| **↺** | Reset — setzt das Array in den Ausgangszustand zurück (vor dem Start der Animation) |
| **🌙/☀** | Theme wechseln — zwischen hellem und dunklem Modus |
### Reset vs. Mischen
- **Reset** stellt das Array so her, wie es beim letzten Start der Animation war. Das kann ein frisches Zufalls-Array sein oder deine eigenen Werte.
- **Mischen** führt einen Fisher-Yates-Shuffle auf das aktuelle Array aus — nützlich, um ein sortiertes Array wieder zu mischen und einen anderen Algorithmus zu testen.
---
## 6. Tastaturkürzel
Alle Funktionen sind auch ohne Maus bedienbar:
| Taste | Funktion |
|---|---|
| `Space` / `K` | Play / Pause — Animation starten oder anhalten |
| `→` / `L` | Ein Schritt vor — nächste Operation |
| `←` / `J` | Ein Schritt zurück — vorherige Operation |
| `R` | Reset — Array zurücksetzen |
| `T` | Theme — zwischen hell und dunkel wechseln |
| `S` | Shuffle — Array mischen (Fisher-Yates) |
**Hinweis:** Tastaturkürzel funktionieren nicht, wenn ein Eingabefeld oder Dropdown den Fokus hat.
---
## 7. Farbcode
Jede Farbe hat eine feste Bedeutung:
| Farbe | Bedeutung |
|---|---|
| **Blau (Unsortiert)** | Normaler Zustand — Elemente die noch nicht sortiert sind |
| **Orange (Vergleich)** | Zwei Elemente werden gerade verglichen — ein Bogen verbindet sie |
| **Rot (Tausch)** | Zwei Elemente werden getauscht — ein roter Bogen zeigt die Tauschpartner |
| **Lila (Verschiebung)** | Ein Element wird verschoben (nicht getauscht) — z.B. bei Insertion Sort oder Merge Sort |
| **Grün (Sortiert/Fertig)** | Elemente an ihrer endgültigen Position — der Bereich wächst mit fortschreitender Sortierung |
Ein **Bogen** über zwei Balken zeigt immer eine Beziehung zwischen den beiden Elementen:
- Oranger Bogen = Vergleich
- Roter Bogen = Tausch
---
## 8. Statistik-Karten
Unter dem Canvas zeigen vier Karten Echtzeit-Statistiken:
| Karte | Beschreibung |
|---|---|
| **Zeit** | Vergangene Echtzeit seit Start der Animation in Millisekunden |
| **Schritte** | Anzahl der ausgeführten Schritte / Operationen |
| **Vergleiche** | Anzahl der Vergleichsoperationen (nur bei vergleichsbasierten Algorithmen) |
| **Tausche** | Anzahl der Tausch- oder Verschiebungsoperationen |
**Hinweis:** Nicht-vergleichsbasierte Algorithmen (Counting, Radix, Bucket) zeigen bei „Vergleiche" keine sinnvollen Werte, da sie nicht Element-für-Element vergleichen.
---
## 9. Speicher-Ansicht
Bei einigen Algorithmen wird unterhalb des Haupt-Arrays ein zusätzlicher Speicherbereich visualisiert. Das hilft zu verstehen, wie Algorithmen temporären Platz benötigen:
| Algorithmus | Speicher-Ansicht |
|---|---|
| **Merge Sort** | Zwei Hilfs-Arrays (blau und lila) — zeigt das Zusammenführen zweier sortierter Hälften |
| **Heap Sort** | Max-Heap als Baumdiagramm — zeigt die Hierarchie der Eltern-Kind-Beziehungen |
| **Tree Sort** | Binary Search Tree — zeigt die Baumstruktur die beim Sortieren aufgebaut wird |
| **Timsort** | Hilfs-Arrays — zeigt die verwalteten Runs und Merges |
| **Counting Sort** | Häufigkeitstabelle — zählt wie oft jeder Wert vorkommt |
| **Radix Sort** | Bucket-Verteilung — zeigt wie Ziffern in Buckets einsortiert werden |
| **Bucket Sort** | Bucket-Arrays — zeigt die Verteilung und Sortierung in den Buckets |
---
## 10. URL-Parameter
Der aktuelle Zustand (Algorithmus, Vorlage, Größe, Geschwindigkeit) wird automatisch in die URL geschrieben. Das bedeutet:
- Du kannst die URL kopieren und an andere weitergeben — sie sehen dieselbe Konfiguration
- Beim Neuladen der Seite bleibt die Auswahl erhalten
Sortieren ist eines der am intensivsten erforschten Probleme der Informatik — nicht aus akademischer Überheblichkeit, sondern weil es in der Praxis überall vorkommt:
- **Datenbanken** müssen Abfrageergebnisse sortieren — bei Millionen von Datensätzen entscheidet der Algorithmus über Antwortzeiten
- **Betriebssysteme** verwalten Prioritätswarteschlangen und müssen Prozesse nach Dringlichkeit ordnen
- **Compiler** nutzen Sortieralgorithmen für die Optimierung (z.B. Register-Allokation)
- **Internetsuchen** beginnen oft mit sortierten Indices (z.B. B-Bäume in Datenbanken)
- **Empfehlungssysteme** sortieren Ergebnisse nach Relevanz
### Der fundamentale Kompromiss
Jeder Algorithmus repräsentiert einen anderen Kompromiss zwischen:
- **Geschwindigkeit** — Wie viele Operationen braucht der Algorithmus?
- **Speicher** — Wie viel zusätzlichen Platz benötigt er?
- **Stabilität** — Behalten gleiche Werte ihre Reihenfolge?
- **Adaptivität** — Nutzt er vorhandene Ordnung aus?
- **Einfachheit** — Wie verständlich ist der Code?
Wer diese Kompromisse versteht, kann für jede Situation die richtige Wahl treffen — sei es beim Sortieren von 100 Datensätzen auf einem Microcontroller oder 100 Millionen in einer Datenbank.
### Was diese Visualisierung lehrt
- **Bubble Sort** bei sortierten Daten: O(n) statt O(n²) — plötzliche Effizienz durch die „swapped"-Optimierung
- **Quick Sort** bei sortierten Daten mit erstem Pivot: O(n²) — warum naive Pivot-Wahl katastrophal sein kann
- **Timsort** bei fast-sortierten Daten: adaptiv und schnell — warum er in Python und Java Standard ist
- **3-Way Quick Sort** bei Duplikaten: O(n) statt O(n²) — warum Duplikate-Handling entscheidend ist
- **Fisher-Yates Shuffle**: Mischen ist O(n), Sortieren ist O(n log n) — ein Shuffle ist immer schneller als jede Sortierung
---
## 12. Algorithmus-Übersicht
### Eigenschaften
| Symbol | Bedeutung |
|---|---|
| **Stabil** | Gleiche Werte behalten ihre ursprüngliche Reihenfolge bei |
| **Nicht stabil** | Die Reihenfolge gleicher Werte kann sich ändern |
| **In-place** | Sortiert im vorhandenen Array, braucht nur O(1) zusätzlichen Speicher |
| **O(n) Speicher** | Benötigt ein zusätzliches Hilfsarray proportional zur Eingabegröße |
| **Adaptiv** | Nutzt vorhandene Ordnung aus — bei fast sortierten Daten schneller |
| **Hybrid** | Kombiniert mehrere Strategien und wechselt je nach Situation |
### Komplexitäts-Kategorien
**O(n²) — Quadratisch** (einfache Verfahren)
Diese Algorithmen sind leicht zu verstehen, aber skalieren schlecht. Geeignet für kleine Datenmengen oder Lehrzwecke.
- Bubble Sort — Stabil, In-place, adaptiv bei sortierten Daten
- Selection Sort — Nicht stabil, In-place, min. Schreiboperationen
- Insertion Sort — Stabil, In-place, adaptiv, der beste O(n²)
- Cocktail Shaker Sort — Stabil, In-place, löst das Schildkröten-Problem
- Quick Sort — Nicht stabil, In-place, O(n log n) im Durchschnitt
- 3-Way Quick Sort — Nicht stabil, In-place, O(n) bei vielen Duplikaten
- Dual-Pivot Quick Sort — Nicht stabil, In-place, Java Standard (JDK)
- Introsort — Nicht stabil, In-place, wechselt bei Rekursionstiefe zu Heap Sort
- Shell Sort — Nicht stabil, In-place, schneller als O(n²) durch Gap-Sequenz
- Tree Sort — Stabil (bei BST), O(n) Speicher, abhängig von Baumhöhe
- Timsort — Stabil, adaptiv, Hybrid aus Merge Sort und Insertion Sort, Python/Java Standard
**O(n·k) — Linear** (nicht-vergleichsbasiert)
Diese Algorithmen nutzen spezielle Eigenschaften der Daten (z.B. Ganzzahl-Bereich) und können schneller sein als O(n log n). Funktionieren nicht mit beliebigen Vergleichbaren Werten.
- Counting Sort — Stabil, O(n+k) mit k = Wertbereich, nur für Ganzzahlen
- Radix Sort — Stabil, O(n·k) mit k = Anzahl Ziffern, nur für Ganzzahlen
- Bucket Sort — Stabil, O(n+k) im Durchschnitt, adaptiv je nach Verteilung
**Spezial**
Algorithmen mit besonderen Eigenschaften oder Anwendungsfällen.
- Pancake Sort — Nicht stabil, In-place, nur Präfix-Flip-Operationen erlaubt
- Cycle Sort — Nicht stabil, In-place, min. Schreiboperationen (für Flash-Speicher)
- Bogo Sort — Nicht stabil, In-place, O(n·n!) erwartet, **auf 8 Elemente begrenzt**
Das Testskript führt **automatisierte Korrektheitstests** für alle Sortieralgorithmen durch:
**Haupt-Tests** — 19 Sortier-Algorithmen × 5 Presets × 2 Größen = 190 Tests. Für jeden: `done`-Step, sortiert, Länge erhalten.
**Shuffle-Tests** — 10 Tests. Prüft dass die Werte permutiert aber erhalten bleiben.
**Edge Cases** — Leeres Array und Single-Element.
**Performance-Test** — 6 Algorithmen mit 100 Elementen.
**Gesamt: 198 Tests** — alle müssen bestehen.
Das Skript extrahiert den JavaScript-Code aus `sorting_visualization.html`, führt ihn in einer isolierten Node.js-VM aus und ruft `buildSteps(algo)` auf. Die Funktion ist rein funktional — keine DOM-Manipulation — und daher unit-testbar.
