CODE//CITY
Trasforma qualsiasi repository GitHub in una città software 3D esplorabile.
Visualizzazione WebGL data-driven in cui i file diventano edifici voxel, i moduli infrastruttura e la complessità architettura fisica.
Cosa succederebbe se il codice potesse essere compreso nello spazio?
L'architettura del software viene storicamente rappresentata attraverso alberi di directory bidimensionali, grafi di dipendenza piatti, diagrammi UML statici o la navigazione per file nell'IDE.
Questo approccio rende difficile percepire intuitivamente la massa del codice, i colli di bottiglia architetturali, i file sovradimensionati e il reale raggio di impatto di una modifica.
CODE//CITY esplora una prospettiva diversa: generare una rappresentazione spaziale fisica e deterministica a partire dai dati reali del repository GitHub.
«Camminare attraverso il proprio codice.»
Invece di leggere l'architettura come testo, la si attraversa come un luogo.
Da metrica a voxel: ogni elemento è un dato concreto
Ogni elemento visibile nella città corrisponde a una misura estratta dall'analisi del repository.
↓ Città 3D
L'intero perimetro del software mappato su una griglia urbana coerente.
↓ Distretto
I percorsi logici formano quartieri delimitati da viali e piazze urbane.
↓ Edificio voxel
Ogni file sorgente è un grattacielo con superficie e volume proporzionali.
↓ Massa fisica
Altezza e numero di voxel riflettono dimensione e densità del file.
↓ Infrastruttura
Cavi di luce e ponti connettono gli edifici secondo le relazioni AST.
↓ Propagazione
Illuminazione del raggio di impatto su tutti i file a valle della modifica.
Non decorazione, ma rigore deterministico
L'estetica voxel-brutalista di CODE//CITY non è un artificio grafico, ma una scelta funzionale di codifica spaziale: i voxel quantificano la complessità in unità discrete, così un edificio da 40 blocchi è immediatamente riconoscibile rispetto a uno da 4.
Il layout rispetta un algoritmo di posizionamento deterministico: a parità di commit la città conserva sempre la medesima topografia, permettendo al team di sviluppare una vera memoria visiva e spaziale del codebase.
⌘K: volo diretto all'edificio
La command palette è l'interazione centrale: digitando il nome di un file la telecamera vola sopra l'edificio corrispondente, mostrando metriche, complessità e riferimenti incrociati di quel modulo.
Analisi del raggio d'impatto
La domanda cruciale prima di un refactoring è: cosa rischio di rompere se tocco questo modulo? Selezionando un file, la città accende in sequenza tutti i moduli che lo importano, direttamente o indirettamente.
Moduli a contatto diretto
File che importano esplicitamente il modulo selezionato.
Propagazione a cascata
Dipendenze di secondo e terzo livello lungo la catena di import.
Percentuale sul repository
Quota complessiva di architettura coinvolta dalla modifica.
Rendering a 60 FPS su decine di migliaia di voxel
Renderizzare migliaia di voxel individuali manderebbe in crisi il rendering standard: servono scelte architetturali precise lato GPU e lato analisi del codice.
InstancedMesh & single draw-call
Tutti i voxel identici condividono una singola istanza geometrica sulla GPU, azzerando i colli di bottiglia da draw call multiple.
AST parser & matrice di adiacenza
Analisi statica della sintassi per estrarre import ed export senza eseguire il codice dell'utente.
Frustum culling & LOD dinamico
Le geometrie fuori dal campo visivo vengono escluse dal calcolo per mantenere fluida la scena.
Stack tecnologico
Spazio cognitivo, non solo visualizzazione
CODE//CITY dimostra la convergenza tra creative development, ingegneria dei grafi e computer graphics ad alte prestazioni:
- Esplorazione spaziale deterministica di qualsiasi codebase GitHub.
- Comprensione immediata della distribuzione di complessità e debito tecnico.
- Valutazione visuale del rischio prima del refactoring, tramite blast radius.
- Rendering a 60 FPS nel browser, senza dipendenze native.
Parliamo di CODE//CITY
L'applicazione è attualmente accessibile tramite demo dedicata: raccontami il tuo caso d'uso e la preparo.