Visualizzatore di algoritmi gratis
Guarda come gli algoritmi di ordinamento, ricerca di percorsi e algoritmi classici prendono vita — Bubble Sort/Quicksort/Merge Sort, Dijkstra/A*/BFS su una griglia di labirinto interattiva, oltre a ricerca binaria, il Crivello, N-Queens e Game of Life. Animazione passo dopo passo, pseudocodice sincronizzato, metriche in tempo reale e modalità gara affiancata. Adatto ai dispositivi mobili e 100% nel tuo browser.
Come funziona
Ogni algoritmo è scritto come un generatore che produce un "passo" di visualizzazione alla volta — uno snapshot dell'array più quali elementi sono stati confrontati, scambiati o scritti. Un singolo player pre-calcola l'elenco completo dei passi, così play, pausa, passo-avanti, passo-indietro e la modalità gara affiancata sono tutti solo indicizzazioni in quell'elenco. Nulla viene inviato da nessuna parte — l'intera cosa funziona nel tuo browser.
- 1Scegli un algoritmo e un set di datiScegli tra ordinamento a bolla, selezione, inserimento, fusione, rapido, heap, shell, cocktail, conteggio e radix (più bogosort, per divertimento). Genera un array casuale, quasi ordinato, invertito o con pochi valori unici, o digita i tuoi numeri separati da virgola.
- 2Guardalo funzionare — e leggi insiemeLe barre sono colorate in base a cosa sta succedendo (confronto, scambio, pivot, ordinato). Il pannello pseudocodice evidenzia la riga esatta in esecuzione, e contatori dal vivo tracciano confronti, scambi, scritture e accessi all'array in tempo reale.
- 3Controlla il tempoRegola la velocità, scorri la timeline, o avanza un'unica operazione avanti e indietro per studiare esattamente come l'algoritmo prende le sue decisioni. Il passo indietro è esatto perché ogni passo è uno snapshot memorizzato, non una riesecuzione.
- 4Gareggia testa a testaLa modalità gara esegue due o più algoritmi sullo stesso input contemporaneamente, fianco a fianco, con una tabella di metriche così puoi vedere, ad esempio, perché il quicksort batte il bubble sort.
Funziona interamente nel tuo browser — nessun dato lascia il tuo dispositivo. Non c'è server, nessun caricamento, e nessun account. È uno strumento didattico: gli algoritmi sono implementazioni da manuale scelte per chiarezza di visualizzazione.
Guida
Esempio pratico
Apri la scheda Ordinamento. In “Numeri o parole a scelta” scrivi 5, 3, 8, 1 e premi “Applica”. Compare “Dimensione: 4” e quattro barre con etichetta sostituiscono le 40 casuali. “Bubble Sort” è selezionato e l'“Asse temporale” indica 1/14. Premi “Riproduci”. Quando l'esecuzione termina, l'asse temporale indica 14/14, le barre mostrano 1, 3, 5, 8 nel colore “Ordinato” e i contatori indicano Confronti 6, Scambi 4, Scritture 8 e Accessi 12. Ora fai clic su “Selection Sort” con gli stessi dati. Richiede 18 passi con Confronti 6 ma solo Scambi 2, perché il selection sort scambia al massimo una volta per passata. Scrivi banana, apple, cherry e premi “Applica” per ordinare invece delle parole. “Condividi questa esecuzione” copia un link che riapre questo algoritmo, questi dati e il passo a cui sei arrivato. “Salva immagine (PNG)” salva il fotogramma attuale, ad esempio come bubble-sort-step-14.png.
Quali impostazioni usare, e i limiti
- Scegli un algoritmo, poi una configurazione iniziale. La scheda Ordinamento comprende Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quicksort, Heapsort, Shell Sort, Cocktail Shaker, Counting Sort e Radix Sort (LSD). “Aggiungi Bogosort (per divertimento)” ne aggiunge un undicesimo. I pulsanti di configurazione sono “Casuale”, “Quasi ordinato”, “Invertito” e “Pochi unici”. Il cursore “Dimensione” va da 2 a 120 e parte da 40 su computer o da 15 su telefono, mentre “Mescola” genera nuovi dati. Cambiando algoritmo i dati restano gli stessi, così puoi confrontare le esecuzioni in modo equo.
- Impara i comandi di riproduzione. Usa “Riproduci”/“Pausa”, “Indietro di un passo”, “Avanti di un passo” e “Ricomincia”, oppure trascina l'“Asse temporale” su qualsiasi passo. “Velocità” è in passi al secondo, da 1 a 240, e parte da 30 su computer o da 20 su telefono. Poiché l'intera esecuzione viene calcolata in anticipo, tornare indietro è esatto. Le scorciatoie sono Spazio, frecce sinistra e destra, R, e [ e ] per la velocità; vengono ignorate quando il focus è su un pulsante, un cursore o una casella di testo. La prima esecuzione parte da sola una volta e la riproduzione va in pausa quando cambi scheda.
- Scrivi i tuoi numeri o le tue parole. “Numeri o parole a scelta” richiede almeno due elementi, separati da virgole o spazi. I numeri vengono arrotondati a interi. Se un elemento non è un numero, tutti gli elementi vengono trattati come parole e ordinati alfabeticamente. Vengono usati solo i primi 120 elementi e le etichette compaiono sulle barre quando sono 30 o meno. Counting Sort crea una posizione per ogni valore tra il minimo e il massimo, quindi una lista come 1, 50000000 gli chiede 50 milioni di posizioni. Per questo algoritmo mantieni i numeri in un intervallo ridotto.
- Leggi i contatori oltre che l'animazione. Il pannello mostra Confronti, Scambi, Scritture, Accessi, Passo e “Tempo di calcolo”, conteggiati fino al passo in cui ti trovi. Counting Sort e Radix Sort non fanno confronti, quindi quella casella è nascosta per loro. “Tempo di calcolo” è il tempo che questo browser ha impiegato a calcolare i passi, non un test di velocità dell'algoritmo. “Misura la crescita” sotto “Come cresce il lavoro con la dimensione” esegue ogni algoritmo di ordinamento tranne Bogosort su array casuali di 10, 25, 50, 100, 250 e 500 elementi e “Scarica i risultati in CSV” salva sorting-growth.csv.
- Fai gareggiare gli algoritmi e condividi ciò che scopri. “Modalità gara” permette di scegliere da 2 a 4 algoritmi da eseguire sugli stessi dati con la stessa frequenza di passi. Quello con meno passi totali finisce per primo e riceve il segno del trofeo, e “Torna alla visualizzazione singola” ti riporta indietro. I passi non sono secondi, quindi questo mostra quanto lavoro fa ogni metodo, non quanto è veloce sul tuo computer. Bogosort non può partecipare alla gara. Fuori dalla modalità gara, “Condividi questa esecuzione” copia un link che si apre allo stesso passo, in pausa.
- Cambia scheda per la ricerca di percorsi e gli algoritmi classici. “Ricerca di percorsi” comprende Breadth-First Search, Dijkstra, A* Search, Greedy Best-First, Bidirectional BFS e Depth-First Search su una griglia di 16 righe per 30 colonne, oppure 18 per 13 su telefono. Trascina per disegnare muri e trascina l'inizio verde o l'obiettivo rosso. Nella modalità “Pesi” una cella costa 5; solo Dijkstra e A* usano i pesi. “Classici” comprende Binary Search, Linear Search, Crivello di Eratostene (n da 20 a 120), N-Queens (N da 4 a 10), Game of Life e Fisher–Yates Shuffle (dimensione da 8 a 60).
Problemi comuni e come risolverli
- Viene mostrato “Inserisci almeno due numeri o parole, separati da virgole.”
- La casella personalizzata ha trovato meno di due elementi. Si attiva con un solo numero, con una casella vuota o con sole virgole e spazi, e la casella ottiene un contorno rosso. Aggiungi un secondo elemento e premi “Applica” o Invio. Anche gli spazi funzionano come separatori, anche se il messaggio parla di virgole. Un testo come 5 3 x non è un errore: viene letto come tre parole.
- Viene mostrato “Bogosort ha tempo fattoriale, quindi è limitato a 7 elementi: qualsiasi valore più grande potrebbe girare praticamente per sempre.”
- Hai aggiunto Bogosort con “Aggiungi Bogosort (per divertimento)” e l'hai selezionato. Mescola a caso finché la lista non risulta ordinata per caso, quindi il cursore “Dimensione” si ferma a 7, i dati vengono ridotti a 7 se erano più grandi e una lista personalizzata viene tagliata ai primi 7 elementi. Scegli un altro algoritmo per tornare a dimensioni fino a 120.
- Viene mostrato “Nessun percorso — l'obiettivo è circondato da muri.”
- Compare nella scheda Ricerca di percorsi quando l'esecuzione termina senza raggiungere l'obiettivo, perché dei muri circondano l'obiettivo o l'inizio. “Muri casuali” può causarlo per caso. Trascina l'obiettivo o l'inizio su una cella libera oppure premi “Cancella muri”, che rimuove anche i pesi. “Cancella percorso” riporta solo l'esecuzione al primo passo e conserva i tuoi muri.
- Il pulsante “Condividi questa esecuzione” cambia in “Copia non riuscita”.
- Il browser ha bloccato gli appunti, cosa che può succedere in un frame incorporato o senza autorizzazione. Normalmente il link viene messo anche nella barra degli indirizzi, quindi puoi copiarlo da lì. Il link riguarda solo la scheda Ordinamento e contiene l'algoritmo, fino a 120 elementi e il numero del passo. Le esecuzioni di Ricerca di percorsi e Classici non si possono condividere in questo modo.
- L'animazione non parte o si ferma da sola.
- La prima esecuzione parte da sola una volta soltanto, e per niente se il tuo dispositivo chiede di ridurre i movimenti, quindi premi “Riproduci”. La riproduzione va anche in pausa quando la scheda è nascosta e si ferma all'ultimo passo; premendo “Riproduci” lì riparte dal primo passo. Le scorciatoie da tastiera non fanno nulla mentre un pulsante, un cursore o una casella di testo ha il focus, quindi fai prima clic su una parte vuota della pagina.
Come si confronta
Usalo per capire perché un algoritmo si comporta in un certo modo: puoi andare avanti e indietro passo per passo, seguire la riga di pseudocodice e confrontare i conteggi su dati identici. Non è un benchmark. I conteggi derivano dalle versioni passo-passo di ogni algoritmo di questo strumento, non dall'ordinamento del tuo linguaggio di programmazione, e il tempo di calcolo misura solo quanto ha impiegato il browser a preparare i passi. Include 10 algoritmi di ordinamento (11 con Bogosort), 6 di ricerca di percorsi e 6 classici, ma non puoi incollare il tuo codice, caricare una mappa reale né ordinare più di 120 elementi. Tutto viene eseguito nel tuo browser e nulla viene inviato altrove.
Strumenti correlati
Diff CSV
Confronta due file CSV per colonna chiave e vedi esattamente quali righe sono state aggiunte, rimosse o modificate — con i campi specifici che differiscono mostrati da vecchio a nuovo. Gestisce i campi tra virgolette; funziona interamente nel tuo browser.
Cronometro Online
Cronometro di precisione con registrazione giri, evidenziazione del giro più veloce e più lento e scorciatoie da tastiera. Conta a partire da zero con precisione al millisecondo.
Generatore CSS Cubic-Bezier Easing
Progetta curve CSS easing trascinando i punti di controllo, visualizza il movimento live e copia il valore cubic-bezier(). Include preset overshoot/rimbalzo.