Zum Hauptinhalt springen

Algorithmus-Visualisierer – kostenlos

Beobachten Sie, wie Sortier-, Wegfindungs- und klassische Algorithmen zum Leben erwachen – Bubble-/Quick-/Merge-Sort, Dijkstra/A*/BFS auf einem interaktiven Labyrinth-Gitter, dazu binäre Suche, das Sieb des Eratosthenes, N-Damen und Game of Life. Schritt-für-Schritt-Animation, synchronisierter Pseudocode, Live-Metriken und ein Rennmodus im direkten Vergleich. Mobilfreundlich und zu 100 % in Ihrem Browser.

Läuft vollständig in Ihrem Browser – keine Daten verlassen Ihr Gerät.

So funktioniert es

Jeder Algorithmus ist als Generator geschrieben, der jeweils einen Visualisierungs-„Schritt“ liefert – einen Schnappschuss des Arrays plus die verglichenen, getauschten oder geschriebenen Elemente. Ein einziger Player berechnet die vollständige Schrittliste vorab, sodass Abspielen, Pause, Schritt vor, Schritt zurück und der Wettrennen-Modus nebeneinander nur Zugriffe auf diese Liste sind. Nichts wird gesendet – alles läuft in Ihrem Browser.

  1. 1
    Algorithmus und Datensatz wählen
    Wählen Sie Bubble, Selection, Insertion, Merge, Quick, Heap, Shell, Cocktail, Counting und Radix Sort (plus Bogosort zum Spaß). Erzeugen Sie ein zufälliges, fast sortiertes, umgekehrtes oder Array mit wenigen eindeutigen Werten, oder geben Sie eigene kommagetrennte Zahlen ein.
  2. 2
    Zusehen – und mitlesen
    Die Balken sind nach dem aktuellen Vorgang eingefärbt (vergleichen, tauschen, Pivot, sortiert). Das Pseudocode-Feld hebt die gerade ausgeführte Zeile hervor, und Live-Zähler erfassen Vergleiche, Vertauschungen, Schreibvorgänge und Array-Zugriffe in Echtzeit.
  3. 3
    Die Zeit steuern
    Passen Sie die Geschwindigkeit an, spulen Sie in der Zeitleiste oder gehen Sie einzelne Operationen vor und zurück, um genau zu sehen, wie der Algorithmus entscheidet. Schritt zurück ist exakt, weil jeder Schritt ein gespeicherter Schnappschuss ist und kein erneuter Durchlauf.
  4. 4
    Im direkten Wettrennen vergleichen
    Der Wettrennen-Modus lässt zwei oder mehr Algorithmen gleichzeitig nebeneinander auf derselben Eingabe laufen, mit einer Kennzahlentabelle – so sehen Sie zum Beispiel, warum Quicksort Bubble Sort schlägt.

Läuft vollständig in Ihrem Browser – keine Daten verlassen Ihr Gerät. Kein Server, kein Upload, kein Konto. Es ist ein Lernwerkzeug: Die Algorithmen sind Lehrbuch-Implementierungen, die für eine anschauliche Visualisierung gewählt wurden.

Anleitung

Beispiel

Öffnen Sie den Tab „Sorting“. Geben Sie unter „Eigene Zahlen oder Wörter“ 5, 3, 8, 1 ein und klicken Sie auf „Anwenden“. „Größe: 4“ erscheint, und vier beschriftete Balken ersetzen die 40 zufälligen. „Bubble Sort“ ist ausgewählt und die „Zeitleiste“ zeigt 1/14. Klicken Sie auf „Abspielen“. Am Ende des Laufs zeigt die Zeitleiste 14/14, die Balken lesen 1, 3, 5, 8 in der Farbe „Sortiert“, und die Zähler zeigen Comparisons 6, Swaps 4, Writes 8 und Accesses 12. Klicken Sie nun mit denselben Daten auf „Selection Sort“. Er braucht 18 Schritte mit Comparisons 6, aber nur Swaps 2, weil Selection Sort pro Durchgang höchstens einmal tauscht. Geben Sie banana, apple, cherry ein und klicken Sie auf „Anwenden“, um stattdessen Wörter zu sortieren. „Diesen Lauf teilen“ kopiert einen Link, der diesen Algorithmus, diese Daten und den aktuellen Schritt wieder öffnet. „Bild speichern (PNG)“ speichert das aktuelle Bild, zum Beispiel als bubble-sort-step-14.png.

Welche Einstellungen zu verwenden sind, und die Grenzen

  • Wählen Sie einen Algorithmus und dann eine Ausgangsform. Der Tab „Sorting“ bietet Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quicksort, Heapsort, Shell Sort, Cocktail Shaker, Counting Sort und Radix Sort (LSD). „Bogosort hinzufügen (zum Spaß)“ fügt einen elften hinzu. Die Formschaltflächen sind „Zufällig“, „Fast sortiert“, „Umgekehrt“ und „Wenige eindeutig“. Der Regler „Größe“ reicht von 2 bis 120 und beginnt am Computer bei 40, am Smartphone bei 15; „Mischen“ erzeugt neue Daten. Beim Wechsel des Algorithmus bleiben die Daten gleich, sodass Sie die Läufe fair vergleichen können.
  • Lernen Sie die Wiedergabesteuerung kennen. Verwenden Sie „Abspielen“/„Pause“, „Schritt zurück“, „Schritt vorwärts“ und „Neu starten“, oder ziehen Sie die „Zeitleiste“ auf einen beliebigen Schritt. „Geschwindigkeit“ wird in Schritten pro Sekunde angegeben, von 1 bis 240, und beginnt am Computer bei 30, am Smartphone bei 20. Weil der gesamte Lauf vorab berechnet wird, ist das Zurückgehen exakt. Die Tastenkürzel sind Leertaste, Pfeil links und rechts, R sowie [ und ] für die Geschwindigkeit; sie werden ignoriert, solange der Fokus auf einer Schaltfläche, einem Regler oder einem Textfeld liegt. Der erste Lauf startet einmalig von selbst, und die Wiedergabe pausiert, wenn Sie den Tab wechseln.
  • Geben Sie eigene Zahlen oder Wörter ein. „Eigene Zahlen oder Wörter“ braucht mindestens zwei Einträge, getrennt durch Kommas oder Leerzeichen. Zahlen werden auf ganze Zahlen gerundet. Ist ein Eintrag keine Zahl, werden alle Einträge als Wörter behandelt und alphabetisch sortiert. Es werden nur die ersten 120 Einträge verwendet, und Beschriftungen erscheinen auf den Balken bei 30 oder weniger. Counting Sort legt für jeden Wert zwischen dem kleinsten und dem größten einen Platz an, sodass eine Liste wie 1, 50000000 50 Millionen Plätze anfordert. Halten Sie die Zahlen für diesen Algorithmus in einem kleinen Bereich.
  • Lesen Sie neben der Animation auch die Zähler. Das Feld zeigt Comparisons, Swaps, Writes, Accesses, Step und „Berechnungszeit“, gezählt bis zum aktuellen Schritt. Counting Sort und Radix Sort führen keine Vergleiche durch, daher ist dieses Feld bei ihnen ausgeblendet. „Berechnungszeit“ ist die Zeit, die dieser Browser für die Berechnung der Schritte brauchte, kein Geschwindigkeitstest des Algorithmus. „Wachstum messen“ unter „Wie der Aufwand mit der Größe wächst“ lässt jeden Sortieralgorithmus außer Bogosort auf zufälligen Arrays mit 10, 25, 50, 100, 250 und 500 Elementen laufen, und „Ergebnisse als CSV herunterladen“ speichert sorting-growth.csv.
  • Lassen Sie Algorithmen gegeneinander antreten und teilen Sie Ihre Erkenntnisse. Im „Rennmodus“ wählen Sie 2 bis 4 Algorithmen, die mit denselben Daten und derselben Schrittrate laufen. Der mit den wenigsten Schritten insgesamt wird zuerst fertig und erhält das Pokalzeichen; „Zurück zur Einzelansicht“ bringt Sie zurück. Schritte sind keine Sekunden; das zeigt also, wie viel Arbeit jede Methode leistet, nicht wie schnell sie auf Ihrem Computer läuft. Bogosort lässt sich nicht im Rennen einsetzen. Außerhalb des Rennmodus kopiert „Diesen Lauf teilen“ einen Link, der beim selben Schritt pausiert öffnet.
  • Wechseln Sie die Tabs für Wegfindung und die klassischen Algorithmen. „Wegfindung“ bietet Breadth-First Search, Dijkstra, A* Search, Greedy Best-First, Bidirectional BFS und Depth-First Search auf einem Raster von 16 Zeilen mal 30 Spalten, am Smartphone 18 mal 13. Ziehen Sie, um Wände zu zeichnen, und ziehen Sie den grünen Start oder das rote Ziel. Im Modus „Gewichtungen“ kostet eine Zelle 5; nur Dijkstra und A* nutzen Gewichtungen. „Klassisch“ bietet Binary Search, Linear Search, Sieve of Eratosthenes (n von 20 bis 120), N-Queens (N von 4 bis 10), Game of Life und Fisher–Yates Shuffle (Größe 8 bis 60).

Häufige Probleme und wie man sie behebt

Es erscheint „Geben Sie mindestens zwei Zahlen oder Wörter ein, durch Kommas getrennt.“
Das Eingabefeld hat weniger als zwei Einträge gefunden. Eine einzelne Zahl, ein leeres Feld oder nur Kommas und Leerzeichen lösen die Meldung aus, und das Feld erhält einen roten Rahmen. Fügen Sie einen zweiten Eintrag hinzu und klicken Sie auf „Anwenden“ oder drücken Sie die Eingabetaste. Auch Leerzeichen funktionieren als Trennzeichen, obwohl die Meldung Kommas erwähnt. Ein Text wie 5 3 x ist kein Fehler: Er wird als drei Wörter gelesen.
Es erscheint „Bogosort is factorial-time, so it's capped at 7 elements — anything larger could run effectively forever.“
Sie haben Bogosort mit „Bogosort hinzufügen (zum Spaß)“ hinzugefügt und ausgewählt. Er mischt zufällig, bis die Liste zufällig sortiert ist; deshalb endet der Regler „Größe“ bei 7, die Daten werden auf 7 gekürzt, wenn sie größer waren, und eine eigene Liste wird auf ihre ersten 7 Einträge gekürzt. Wählen Sie einen anderen Algorithmus, um wieder Größen bis 120 zu nutzen.
Es erscheint „Kein Pfad — das Ziel ist von Wänden eingeschlossen.“
Dies erscheint im Tab „Wegfindung“, wenn der Lauf endet, ohne das Ziel zu erreichen, weil Wände es oder den Start einschließen. „Zufällige Wände“ kann das zufällig verursachen. Ziehen Sie das Ziel oder den Start auf eine freie Zelle oder klicken Sie auf „Wände löschen“, was auch die Gewichtungen entfernt. „Pfad löschen“ spult den Lauf nur auf Schritt eins zurück und behält Ihre Wände.
Die Schaltfläche „Diesen Lauf teilen“ ändert sich zu „Kopieren fehlgeschlagen“.
Der Browser hat die Zwischenablage blockiert, was in einem eingebetteten Frame oder ohne Berechtigung vorkommen kann. Der Link wird normalerweise auch in die Adressleiste gesetzt, sodass Sie ihn von dort kopieren können. Der Link gilt nur für den Tab „Sorting“ und enthält den Algorithmus, bis zu 120 Einträge und die Schrittnummer. Läufe aus „Wegfindung“ und „Klassisch“ lassen sich so nicht teilen.
Die Animation startet nicht oder hält von selbst an.
Der erste Lauf startet nur einmal von selbst, und gar nicht, wenn Ihr Gerät reduzierte Bewegung wünscht; klicken Sie dann auf „Abspielen“. Die Wiedergabe pausiert auch, wenn der Tab verborgen ist, und sie hält am letzten Schritt an; ein Klick auf „Abspielen“ startet dort wieder bei Schritt eins. Tastenkürzel tun nichts, solange eine Schaltfläche, ein Regler oder ein Textfeld den Fokus hat; klicken Sie daher zuerst auf eine leere Stelle der Seite.

Wie es im Vergleich abschneidet

Nutzen Sie dies, um zu sehen, warum sich ein Algorithmus so verhält: Sie können vor und zurück schreiten, die Pseudocode-Zeile beobachten und Zähler bei identischen Daten vergleichen. Es ist kein Benchmark. Die Zähler stammen aus den eigenen Schritt-für-Schritt-Versionen jedes Algorithmus in diesem Tool, nicht aus der Sortierfunktion Ihrer Programmiersprache, und die Berechnungszeit misst nur, wie lange der Browser für die Vorbereitung der Schritte brauchte. Es bietet 10 Sortieralgorithmen (11 mit Bogosort), 6 Wegfindungsalgorithmen und 6 klassische, aber Sie können weder eigenen Code einfügen noch eine echte Karte laden noch mehr als 120 Elemente sortieren. Alles läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.

Ähnliche Tools

Häufige Fragen