# Digital Art data-driven per il web ## Intenzione, fonti e analisi preliminare **Data:** 10 settembre 2026 **Stato:** concept / ricerca preliminare --- ## 1. Intenzione L'obiettivo è sviluppare una serie di opere di **digital art generativa per il web** in cui dati reali influenzino forma, movimento, materia, luce e composizione. Il principio guida non è costruire dashboard o data visualization tradizionali. I dati non devono necessariamente essere leggibili come numeri o grafici: devono diventare una **forza generativa**. ```text fonte dati ↓ normalizzazione ↓ regole artistiche ↓ forma / materia / movimento ↓ opera ``` L'opera deve poter essere apprezzata anche senza conoscere i dati che l'hanno prodotta. Il dataset aggiunge significato, tempo e unicità, ma non sostituisce la qualità visiva. ### Obiettivo estetico Il riferimento visivo emerso è quello di opere immersive, minimali nella UI, fortemente materiche, ad alto contrasto, con una composizione autonoma, capaci di sembrare quasi statiche al primo sguardo ma animate in modo lento e organico. L'immagine concettuale prodotta durante l'esplorazione rappresenta il **massimo potenziale estetico**, non un rendering browser già implementato. --- ## 2. Statico o animato ### Scelta > **Opera animata lentamente, progettata in modo che ogni singolo frame possa funzionare anche come immagine statica.** Non una semplice animazione decorativa e non un'immagine completamente immobile. ### Motivazione Il movimento aggiunge una variabile particolarmente adatta a dati che cambiano nel tempo: vento, onde, modifiche a Wikipedia, terremoti e attività solare. Tuttavia, se l'immagine funziona solamente perché tutto si muove, la composizione è troppo debole. Criterio progettuale: ```text prima una buona immagine poi un buon movimento infine una buona relazione con i dati ``` ### Comportamento ideale - movimento lento; - trasformazioni continue ma non frenetiche; - inerzia; - persistenza; - assenza di loop troppo evidenti; - interazione discreta; - possibilità di pausa; - possibilità di catturare uno stato dell'opera. --- # 3. Concept principali ## 3.1 ARIA — il respiro del mondo ### Idea Trasformare vento e condizioni atmosferiche in un tessuto di filamenti, membrane, fibre o pennellate luminose. Non rappresentare il vento con frecce o vettori visibili, ma produrre una materia che **si comporta come se fosse plasmata dall'atmosfera**. ### Possibile mapping | Dato | Ruolo artistico | |---|---| | Direzione del vento | orientamento generale / campo vettoriale | | Velocità del vento | velocità di scorrimento | | Raffiche | perturbazioni locali | | Umidità | densità / diffusione / trasparenza | | Temperatura | palette o temperatura cromatica | | Pressione | tensione/compressione della forma | | Copertura nuvolosa | luminosità e opacità | ### Movimento È il concept in cui l'animazione dovrebbe essere più continua. La composizione generale rimane stabile, mentre i filamenti scorrono, si uniscono, si separano e la luce attraversa lentamente la struttura. ### Interazione Il mouse non dovrebbe comandare l'opera. Può invece deviare localmente il campo, aprire leggermente le fibre, lasciare una perturbazione temporanea o modificare la profondità. ### Potenziale **Molto alto come primo esperimento visivo.** È relativamente semplice ottenere dati utili e consente di concentrarsi presto sulla qualità del rendering. --- ## 3.2 TERRA — memoria degli eventi ### Idea Trasformare i terremoti in una materia sedimentaria. Ogni evento lascia un segno. L'opera non dovrebbe essere una mappa con cerchi pulsanti, ma qualcosa che ricordi una sezione geologica, legno, pietra, incisioni o stratificazioni. ### Possibile mapping | Dato | Ruolo artistico | |---|---| | Magnitudo | ampiezza della deformazione | | Profondità | colore / profondità visuale | | Coordinate | origine spaziale o parametro compositivo | | Timestamp | ordine degli strati | | Frequenza degli eventi | densità | | Regione | variazione strutturale | ### Movimento Qui il movimento dovrebbe essere minimo. Un nuovo terremoto può generare un impulso, deformare la struttura, lasciare un nuovo strato e diventare parte permanente dell'opera. > Il tempo deve lasciare una traccia, non semplicemente produrre movimento. ### Potenziale Molto alto per una serie di opere archiviate per giorno, settimana o mese. Interessante anche per stampa, plotter, SVG, incisione e immagini ad alta risoluzione. --- ## 3.3 PALINSESTO — il mondo riscritto ### Idea Usare il flusso delle modifiche a Wikipedia per costruire un ambiente tipografico continuamente riscritto. Le parole non vengono mostrate come feed: diventano **architettura**. Possibili manifestazioni: - città costruite con parole; - pareti tipografiche; - rilievi; - superfici; - volumi; - terreno; - strutture che vengono create e consumate nel tempo. ### Possibile mapping | Dato | Ruolo artistico | |---|---| | Titolo della pagina | elemento tipografico | | Nuova pagina | nascita di un volume | | Dimensione modifica | scala dell'intervento | | Aggiunta | crescita | | Rimozione | erosione / cavità | | Timestamp | stratificazione | | Namespace/tipo | famiglia visuale | La differenza `newlen - oldlen` restituita da MediaWiki descrive una variazione di dimensione in byte e non una misura dell'importanza semantica della modifica. ### Movimento Ambiente principalmente stabile. Gli eventi producono modifiche locali: nasce una parola, una facciata cambia, una superficie si estende, un volume viene eroso, elementi vecchi diventano lentamente struttura. ### Potenziale **È il concept più originale tra quelli analizzati.** Unisce generative art, tipografia, spazio, dati umani, memoria e continua trasformazione della conoscenza. --- # 4. Concept secondari ## 4.1 Aurora / vento solare Utilizzare dati del vento solare per comandare una struttura luminosa astratta. Possibili parametri: - velocità; - densità; - campo magnetico; - variazioni temporali. Output immaginato: membrane, fluidi, fibre, volumetrie, torsioni e luce interna. Non sarebbe una simulazione scientifica dell'aurora, ma una scultura generativa controllata dallo space weather. --- ## 4.2 Mare di vetro Usare dati oceanografici per creare una superficie sospesa o una scultura fluida. | Dato | Ruolo | |---|---| | Altezza onda | deformazione | | Periodo | ritmo | | Direzione | orientamento | | Swell | struttura secondaria | | Temperatura superficiale | materiale / palette | | Corrente | drift | Il risultato dovrebbe evitare la classica scena con mare, cielo e orizzonte. L'obiettivo sarebbe creare **un oggetto che contiene il comportamento del mare**. --- ## 4.3 Ritratto di una giornata Concept basato su dati personali caricati localmente: - GPX; - traccia escursionistica; - quota; - velocità; - soste; - distanza. La giornata viene trasformata in una forma astratta. Potrebbe essere elaborata interamente nel browser senza invio dei dati a un server. --- # 5. Fonti dati analizzate ## Open-Meteo Weather API **Documentazione:** https://open-meteo.com/en/docs Variabili utili: - temperatura a 2 m; - umidità relativa; - velocità vento; - direzione vento; - raffiche; - pressione; - copertura nuvolosa; - variabili orarie e correnti. Nota: le condizioni `current` sono basate su dati di modelli meteorologici a risoluzione temporale fine; non vanno necessariamente interpretate come misura diretta di una stazione fisica sul punto scelto. **Utilizzo previsto:** ARIA. --- ## Open-Meteo Marine API **Documentazione:** https://open-meteo.com/en/docs/marine-weather-api Variabili utili: - wave height; - wave direction; - wave period; - swell; - wind waves; - sea surface temperature; - ocean current velocity; - ocean current direction; - sea level height. La documentazione segnala limiti di accuratezza nelle aree costiere. **Utilizzo previsto:** MARE DI VETRO. --- ## USGS Earthquake Feeds **Feed e documentazione:** https://earthquake.usgs.gov/earthquakes/feed/ **Formato GeoJSON:** https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php I feed GeoJSON sono pensati come interfaccia programmatica e includono dati come: - magnitudo; - timestamp; - coordinate; - profondità; - luogo; - identificatore evento. **Utilizzo previsto:** TERRA. --- ## MediaWiki RecentChanges API **Documentazione:** https://www.mediawiki.org/wiki/API:RecentChanges L'API permette di enumerare le modifiche recenti. Proprietà utili: - titolo; - timestamp; - ID; - tipo di modifica; - dimensione precedente; - nuova dimensione; - flags; - utente, se richiesto. L'API supporta paginazione e filtri. In caso di polling ripetuto, la documentazione segnala che alcuni eventi possono essere inseriti leggermente fuori ordine e suggerisce una piccola sovrapposizione tra richieste. **Utilizzo previsto:** PALINSESTO. --- ## NOAA Space Weather Prediction Center **JSON real-time solar wind:** https://services.swpc.noaa.gov/json/rtsw/ Feed disponibili includono: - `rtsw_wind_1m.json`; - `rtsw_mag_1m.json`; - effemeridi. **Utilizzo previsto:** AURORA / VENTO SOLARE. --- # 6. Fonti tecniche e di ispirazione ## p5.js https://p5js.org/ Libreria JavaScript open source orientata a creative coding, arte e sperimentazione sul web. Utile per sketch 2D, particles, field, noise, tipografia, interazione e prototipazione rapida. ## Three.js https://threejs.org/ Libreria JavaScript per rendering 3D sul web. Utile per geometrie, camere, materiali, shader, texture, ambienti 3D, post-processing e scene tipografiche tridimensionali. ## OpenProcessing https://openprocessing.org/ Community e repository di sketch di creative coding. Termini utili da esplorare: - flow field; - particle trails; - typography; - reaction diffusion; - vector field; - noise; - generative landscape; - ribbons; - displacement; - signed distance field. L'obiettivo è studiare **meccanismi**, non replicare opere. ## The Book of Shaders https://thebookofshaders.com/ Risorsa per fragment shader e progettazione generativa. Argomenti pertinenti: - shaping functions; - noise; - fractional Brownian motion; - cellular noise; - pattern; - textures; - reaction-diffusion; - ripples; - luci; - normal map; - bump map. --- # 7. Analisi effettuata ## 7.1 Dato vs visualizzazione È stata esclusa come direzione principale la visualizzazione esplicativa classica. Da evitare: ```text vento → freccia terremoto → cerchio sulla mappa Wikipedia → elenco di modifiche onda → grafico ``` Direzione scelta: ```text vento → materia terremoto → memoria Wikipedia → architettura onda → scultura ``` La trasformazione deve essere abbastanza indiretta da produrre arte ma abbastanza coerente da preservare il significato del fenomeno. --- ## 7.2 Necessità di uno strato interpretativo Non è consigliabile collegare direttamente un valore numerico a un parametro visuale senza mediazione. Pipeline raccomandata: ```text raw data ↓ filter ↓ normalize ↓ smooth ↓ compress extremes ↓ derive artistic parameters ↓ render ``` Questo evita valori anomali distruttivi, flickering, risultati incomparabili e un'estetica troppo tecnica. --- ## 7.3 Persistenza Sono emersi tre modelli distinti. ### Stato istantaneo ```text dato attuale → opera attuale ``` Adatto ad **Aria**. ### Accumulo ```text evento → modifica permanente ``` Adatto a **Terra**. ### Riscrittura ```text nuovo evento → modifica di una struttura esistente ``` Adatto a **Palinsesto**. --- ## 7.4 Rapporto con il tempo Tre tipi di animazione: ### Moto continuo La materia si muove continuamente. **Esempio:** Aria. ### Moto-evento L'opera rimane quasi ferma finché non accade qualcosa. **Esempio:** Terra. ### Metamorfosi La struttura è stabile, ma viene continuamente riscritta. **Esempio:** Palinsesto. --- ## 7.5 Interazione L'interazione dovrebbe essere subordinata all'opera. Da evitare: - drag aggressivo; - camera sempre orbitabile; - particelle che inseguono il mouse; - effetti fortemente gamificati; - UI permanente sovrapposta alla composizione. Preferire: - perturbazioni locali; - parallasse; - variazioni lievi; - esplorazione volontaria; - pausa; - fullscreen; - cattura/esportazione. --- ## 7.6 Qualità del frame statico Criterio fondamentale: > Se si mette in pausa l'animazione, l'immagine deve continuare a sembrare intenzionale. Questo porta a progettare prima distribuzione delle masse, vuoti, focal point, gerarchia, contrasto, illuminazione, scala e dettaglio; soltanto dopo il movimento. --- # 8. Valutazione comparativa | Concept | Originalità | Potenziale visivo | Complessità tecnica | Forza dei dati | Animazione | |---|---:|---:|---:|---:|---| | Aria | 4/5 | 5/5 | 3/5 | 4/5 | continua | | Terra | 4/5 | 5/5 | 3/5 | 5/5 | evento | | Palinsesto | 5/5 | 5/5 | 4/5 | 5/5 | metamorfosi | | Aurora | 4/5 | 5/5 | 4/5 | 5/5 | continua | | Mare di vetro | 4/5 | 5/5 | 4/5 | 5/5 | continua | | Ritratto giornata | 4/5 | 4/5 | 3/5 | 5/5 | variabile | --- # 9. Priorità suggerita ## Primo studio: ARIA Motivazioni: - dataset semplice; - feedback visuale immediato; - ottimo terreno per shader, noise e flow field; - permette di definire rapidamente una qualità estetica; - basso rischio concettuale. Obiettivo iniziale: > ottenere **un singolo frame eccellente** prima ancora di connettere i dati reali. ## Primo progetto completo: PALINSESTO È la direzione con il maggiore potenziale autoriale. Domanda centrale: > **Come appare un mondo che viene continuamente riscritto?** Wikipedia è particolarmente adatta perché è continuamente aggiornata, il dato rappresenta attività umana reale, il testo è contemporaneamente contenuto e materia, e aggiunte/rimozioni hanno metafore spaziali naturali. --- # 10. Direzione tecnica preliminare Per gli studi iniziali: ```text p5.js / Canvas ``` Per l'evoluzione visiva: ```text WebGL GLSL Three.js ``` Possibile architettura: ```text DataSource ├── OpenMeteoSource ├── USGSSource ├── WikimediaSource └── NOAASource Normalizer ├── range mapping ├── smoothing ├── temporal window └── outlier handling ArtworkModel ├── persistent state ├── event history └── artistic parameters Renderer ├── geometry ├── particles ├── shaders ├── typography └── post processing Experience ├── fullscreen ├── pause ├── subtle interaction ├── data info └── export ``` --- # 11. Principio finale Il progetto non dovrebbe cercare di dimostrare che usa dati reali. I dati devono essere **la causa invisibile della forma**. Gerarchia proposta: 1. opera visivamente forte; 2. regola generativa coerente; 3. rapporto significativo con il dataset; 4. movimento; 5. interazione; 6. UI e spiegazione. La direzione più promettente è costruire un sistema in cui il visitatore venga prima attratto dall'immagine e soltanto successivamente scopra che ciò che sta osservando è il risultato di un fenomeno reale.