CODE//CITY
“Walk through your code.”
Una visualizzazione WebGL data-driven che trasforma qualsiasi repository GitHub in una città software 3D esplorabile: le cartelle diventano distretti urbani, i file edifici voxel, le dipendenze infrastruttura e la complessità architettura fisica.
01. L’Idea: 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 "god object" sovradimensionati e il reale raggio di impatto delle modifiche.
CODE//CITY esplora una prospettiva diversa: generare una rappresentazione spaziale fisica e deterministica a partire dai dati reali del repository GitHub. Invece di limitarsi a leggere l’architettura come testo, gli sviluppatori possono letteralmente camminare attraverso il proprio codice.
02. Dati → Spazio: Da metrica a voxel
Ogni elemento visibile nella città corrisponde a un dato concreto estratto dall’analisi del repository:
L’intero perimetro del software mappato su una griglia urbana coerente.
I percorsi logici formano quartieri delimitati da viali e piazze urbane.
Ogni file sorgente è un grattacielo con superficie e volume proporzionali.
L’altezza e il numero di voxel riflettono la dimensione e densità del file.
Cavi di luce e ponti connettono gli edifici secondo le relazioni AST.
Illuminazione del raggio di impatto su tutti i file a valle della modifica.
03. Architettura Voxel: Non decorazione, ma rigore deterministico.
L’estetica voxel-brutalista di CODE//CITY non è un semplice artificio grafico, ma una scelta funzionale di encoding spaziale.
I voxel permettono di quantificare visivamente la complessità in unità discrete: un edificio composto da 40 blocchi voxel è immediatamente riconoscibile rispetto a uno da 4 blocchi. Il layout rispetta un algoritmo di posizionamento deterministico: a parità di commit, la città conserva sempre la medesima topografia, consentendo al team di sviluppare una vera e propria memoria visiva e spaziale del codebase.
04. Navigazione & Ricerca: ⌘K e volo diretto all’edificio.
Una delle interazioni centrali di CODE//CITY è il Command Palette (⌘K):
L’interpolazione cinematica fluida tra coordinate sferiche orienta l’utente dall’alto del distretto fino al piano strada dell’edificio selezionato, visualizzando contemporaneamente il pannello con le metriche del file, la complessità ciclomantica e i riferimenti incrociati.
05. Analisi del Raggio d’Impatto (Blast Radius)
Quando uno sviluppatore deve modificare o rifattorizzare un file critico, la domanda cruciale è: "Cosa rischio di rompere se tocco questo modulo?"
Dall’edificio sorgente all’intera onda di propagazione
Selezionando un file, CODE//CITY esegue un attraversamento inverso del grafo delle dipendenze (AST reverse lookup) e accende in sequenza luminosa tutti i file e i distretti che importano direttamente o indirettamente il modulo:
File che importano esplicitamente il modulo selezionato.
Dipendenze di secondo e terzo livello lungo la catena di import.
Quota complessiva di architettura coinvolta dalla modifica.
06. Ingegneria WebGL & Ottimizzazione: Rendering a 60 FPS
Renderizzare decine di migliaia di voxel individuali manderebbe in crash il rendering standard di qualsiasi browser. Per garantire 60 FPS costanti anche su laptop e dispositivi mobili, sono state adottate soluzioni architetturali rigorose:
InstancedMesh & Single Draw-Call
Tutti i voxel identici condividono una singola istanza geometrica GPU, riducendo drasticamente il carico sulla CPU e azzerando i lag da draw call multipli.
AST Parser & Adjacency Matrix in Memory
Analisi statica istantanea della sintassi per estrarre import/export senza eseguire il codice utente né appesantire il thread principale.
Frustum Culling & Dynamic LOD
Geometrie al di fuori del campo visivo della telecamera escluse dinamicamente dal calcolo per mantenere la memoria fluida.
07. Stack Tecnologico
08. Risultato: 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 open-source o privato.
- Comprensione istantanea della distribuzione di complessità e del debito tecnico.
- Valutazione visuale del rischio prima del refactoring tramite Blast Radius.
- Rendering a 60 FPS in-browser senza dipendenze native o installazioni pesanti.
Entra in CODE//CITY
Esplora la Web App dal vivo o parliamo di creative development per il tuo prossimo progetto.