Math Animation Studio
Crea animazioni matematiche basate su grafi in stile 3Blue1Brown, grazie a Manim.js e p5.js. Scegli una scena preimpostata, guardala animarsi e registrala in un video scaricabile. Tutto viene renderizzato localmente nel browser.
Verificato da Alessia Bogoni, Data Analyst & Ricercatrice · Ultimo aggiornamento 29 settembre 2026
Come funziona
- 1
Scegli una scena preimpostata dal menu: rivelazione di un grafo non orientato, un grafo orientato pesato o una traccia di ricerca in ampiezza (BFS).
- 2
Guarda l'animazione riprodursi sul canvas; usa play/pausa, riavvia e i pulsanti di velocità per controllare la riproduzione.
- 3
Clicca su Registra per iniziare a catturare il canvas, poi su Stop quando hai finito.
- 4
Clicca su Scarica per salvare l'animazione come file video WebM.
Visual in stile 3Blue1Brown senza installare nulla
Le animazioni matematiche in stile 3Blue1Brown vengono solitamente create con una libreria Python e una pipeline di rendering locale. Math Animation Studio porta un linguaggio visivo simile - grafi puliti di nodi e archi, rivelazioni fluide, evidenziazioni colorate - direttamente nel browser usando Manim.js e p5.js, così puoi visualizzare ed esportare una scena in pochi secondi invece di configurare un ambiente di rendering.
Utile per insegnare algoritmi su grafi e concetti di informatica
Le scene preimpostate si concentrano sui grafi perché si prestano naturalmente a visualizzare algoritmi: guarda un grafo rivelarsi, confronta strutture orientate e non orientate, o segui passo passo una ricerca in ampiezza. Esporta il risultato come video da inserire in una slide di lezione, un tutorial o una guida di studio.
Domande frequenti
Cos'è Manim.js e che rapporto ha con il Manim di 3Blue1Brown?
Manim.js è una libreria JavaScript di Jazon Jiao che ricrea lo stile visivo delle animazioni matematiche di 3Blue1Brown usando p5.js. È un progetto separato dalla libreria Python Manim originale usata da 3Blue1Brown, sviluppato in modo indipendente per il rendering nel browser.
Posso scrivere scene personalizzate?
Questo strumento include un set fisso di scene preimpostate (rivelazione grafo, grafo orientato e traccia BFS) invece di un editor di codice, così puoi visualizzarle ed esportarle senza scrivere nulla. Il supporto per scene personalizzate potrebbe arrivare in futuro.
In che formato video ottengo l'esportazione?
La registrazione cattura il canvas live usando l'API MediaRecorder nativa del browser e produce un file video WebM, scaricato direttamente senza alcun upload a un server.
Qualcosa viene caricato su un server?
No. L'animazione viene renderizzata interamente sul canvas nel tuo browser, e la registrazione cattura quel canvas localmente: nulla della scena o della registrazione viene inviato altrove.
Perché l'animazione sembra avere la stessa velocità anche a 2x?
La velocità modifica il frame rate a cui l'animazione punta, ma la frequenza di aggiornamento del tuo schermo può limitare quanto più velocemente si vede riprodursi. Il calcolo dei tempi dell'animazione resta comunque corretto a ogni impostazione di velocità.