BE LEAD / Lab
Milano,
in pixel.
Lo skyline della città disegnato pixel per pixel dal codice, senza immagini. Le ore passano, il meteo cambia, le finestre si accendono una alla volta.
per accenderla o spegnerla. , in cima al Duomo, per i fuochi.
Dietro la scena
Come è fatto
320 × 180
pixel logici, ingranditi senza sfumature
Bayer 8 × 8
la matrice che decide il dithering del cielo
6 livelli
dal cielo alla strada, ognuno con la sua profondità
1 seme
un numero che genera sempre la stessa città
Pixel logici, scala intera
La scena vive in un canvas di 320 per 180 pixel. Il browser la ingrandisce con image-rendering: pixelated, che copia ogni pixel in un quadrato netto invece di sfumarlo. La scala viene scelta in modo che ogni pixel logico copra un numero intero di pixel del display: i bordi restano puliti anche su uno schermo Retina. La foto scaricata con Scatta segue la stessa regola, ingrandita quattro volte senza interpolazione.
Palette limitata e dithering
Ogni edificio è salvato come una mappa di indici: un numero per pixel che dice marmo del Duomo, vetro del Pirelli, coppo di un tetto. A ogni fotogramma il codice calcola la palette per l'ora e il meteo e la applica, come nei giochi a 16 bit. Il cielo passa da un colore all'altro con un dithering ordinato: una matrice di Bayer 8 per 8 decide, pixel per pixel, quale dei due toni vicini mostrare. Lo stesso trucco disegna nebbia, aloni dei lampioni e dissolvenze tra alba, giorno, tramonto e notte.
Livelli in parallasse
La profondità nasce da livelli separati: stelle e luna, tre file di nuvole che scorrono a velocità diverse, i palazzi lontani velati di foschia, i monumenti, le case in primo piano, la strada con il tram. Muovendo il mouse sulla scena ogni livello si sposta di un numero diverso di pixel.
Un seme, una città
Palazzi, persiane, alberi del Bosco Verticale, nuvole e pozzanghere escono da un generatore pseudocasuale con un seme. Lo stesso seme ridisegna la stessa città; il pulsante con il numero ne costruisce un'altra, sempre con il Duomo al centro. Anche l'orario di ogni finestra viene dal seme: per questo di sera le luci arrivano una alla volta.
Scritto dialogando con Claude
Il codice è nato in una conversazione con Claude: prima la griglia e la palette, poi un monumento alla volta, poi il tram, la pioggia che riempie le pozzanghere, la neve che si posa sui tetti. Nessuna immagine e nessuna libreria esterna: TypeScript, Canvas 2D e un ciclo requestAnimationFrame che si ferma quando la scena esce dallo schermo o quando il sistema chiede meno movimento.