Grafiche
Design di shader Voronoi
Celle colorate irregolari si spostano su un canvas WebGL2, con bordi chiari luminosi, distorsione graduale indotta dal puntatore e tipografia fissa di grandi dimensioni.
Usi dell'arte Voronoi
- Sfondi WebGL interattiviCampi visivi a tutto canvas che rispondono al movimento locale del puntatore.
- Studi di arte generativaComposizioni guidate da shader costruite su colore, movimento e divisione dello spazio.
- Landing page sperimentaliSchermate di apertura d'atmosfera in cui la tipografia poggia su grafiche in evoluzione.
Punti di forza della rete di celle
- Rete a tutto canvasLe celle Voronoi riempiono la viewport dietro l'overlay.
- Celle legate alla paletteRegioni blu, verdi, viola, verde petrolio e marroni scandiscono il campo.
- Bordi luminosiI bordi chiari rendono leggibili le celle adiacenti.
- Influenza del cursoreIl movimento del puntatore è presentato come un'interazione di spinta locale.
Tre momenti del campo Voronoi
1 / 3
Un campo Voronoi a tutto canvas
Il design di shader Voronoi è un esempio grafico ufficiale di OpenDesign incentrato su un unico canvas WebGL animato. Il titolo d'autore recita “VORONOI CELLS”, mentre la riga di supporto descrive “drifting feature points, palette-keyed cells, glowing boundaries”. Insieme, queste etichette stabiliscono la premessa visiva prima che lo spettatore interagisca.
La composizione usa il canvas come superficie della pagina invece di inserire l'opera in un pannello incorniciato. Grandi celle irregolari si estendono oltre la viewport, così il campo appare continuo ai bordi. Il compromesso è che l'opera offre atmosfera e scala, ma il design lascia poco spazio a contenuti secondari o a una navigazione convenzionale.
Struttura visibile
Bordi condivisi chiari dividono regioni poligonali di colori diversi, permettendo di leggere adiacenza e scala.
Ordine di lettura
Le etichette superiori identificano l'anteprima, il titolo sovradimensionato in basso a sinistra nomina il soggetto e l'invito in basso a destra introduce l'interazione.
Dove si inserisce questo design
Questo design è adatto a contesti in cui conta più la scoperta visiva che l'informazione densa: l'apertura di una landing page sperimentale, uno studio di arte generativa o una dimostrazione WebGL. La dicitura “WEBGL PREVIEW” identifica l'opera come anteprima visiva, mentre “REAL-TIME · GPU” inquadra nell'interfaccia la tecnica di rendering.
Poiché la fonte mostra un unico canvas e nessun controllo d'autore nel markup statico, l'uso più efficace è un momento visivo focalizzato, non uno strumento ricco di controlli. Aggiungere menu, metriche o sezioni di contenuto richiederebbe una nuova architettura dell'informazione e potrebbe competere con l'opera volutamente sovradimensionata.
Schermata di apertura
Usa la composizione come primo campo visivo quando la pagina richiede subito presenza grafica e una breve dichiarazione.
Studio di interazione
Usa l'invito al puntatore per esplorare la distorsione locale delle coordinate nel campo animato, senza trattare le celle come oggetti fisici simulati.
Riferimento visivo
Usa la palette e il trattamento dei bordi come studio per sfondi basati su shader, non come prova di prestazioni in produzione.
Tipografia su geometria in movimento
La tipografia è volutamente grande e ancorata in basso a sinistra. “VORONOI” occupa la riga dominante, con “CELLS” sotto, mentre la frase esplicativa sta più in basso in un testo più piccolo. Questa scala rende il soggetto leggibile su un campo affollato, ma implica anche che l'opera debba mantenere abbastanza contrasto dietro le lettere.
Il fragment shader controlla un intorno tre per tre di punti caratteristici, che si spostano con il tempo trascorso. Il punto più vicino identifica la palette di ogni cella, mentre la differenza tra la distanza del punto più vicino e quella del secondo più vicino evidenzia i bordi condivisi. Una deformazione del puntatore pesata con una gaussiana modifica le coordinate campionate; non sposta una mesh fisica né simula collisioni tra celle.
Scala del titolo
Il titolo sovradimensionato su due righe mantiene identificabile il soggetto anche quando la geometria delle celle cambia dietro di esso.
Etichette di bordo
Piccole etichette maiuscole definiscono il contesto di anteprima e il concetto di rendering senza competere con il titolo principale.
Posizionamento dell'overlay
L'etichetta “OPENDESIGN · WEBGL PREVIEW” in alto a sinistra e l'etichetta “REAL-TIME · GPU” in alto a destra creano un'ampia cornice attorno al canvas. L'invito “MOVE THE CURSOR ↗” in basso a destra bilancia il grande titolo in basso a sinistra e indica l'interazione senza aggiungere un flusso convenzionale basato su pulsanti.
Movimento visibile e limiti delle capacità
Le tre catture mostrano un'unica composizione a tutto canvas in momenti diversi, non schermate separate. Il codice sorgente implementa lo spostamento continuo dei punti caratteristici e la distorsione locale del puntatore. Entrambe le coordinate normalizzate del puntatore convergono verso il bersaglio a ogni frame di una quantità pari alla differenza residua moltiplicata per 0.06 prima di influenzare lo shader. Il badge del cursore in basso a destra è un invito statico, non un pulsante, e non servono clic, trascinamenti o pannelli di configurazione.
Le evidenze non stabiliscono servizi connessi, dati salvati, prestazioni misurate o un deployment in produzione. Non stabiliscono nemmeno che ogni dichiarazione di rendering raffigurata valga su tutti i dispositivi. Leggi questo artefatto come un esempio di design e implementazione la cui forza visibile è il rapporto tra geometria dello shader, colore, tipografia in overlay e input locale.
Separa osservazione e comportamento
Registra come decisioni di design il campo poligonale visibile, i bordi chiari, le regioni di colore e il testo in overlay; tratta la risposta al cursore e l'animazione come comportamento evidenziato localmente, non come capacità di un servizio.
Mantieni il compromesso
Mantieni il canvas visivamente dominante quando adatti la composizione, ma verifica che titolo e testo di supporto restino leggibili mentre bordi e campi di colore delle celle si muovono sotto di essi.
Come creare un design di shader Voronoi in OpenDesign
Imposta il canvas e l'overlay
Crea un unico canvas WebGL a tutta viewport, poi posiziona una piccola etichetta di anteprima in alto a sinistra, un'etichetta di rendering in alto a destra e un grande titolo su due righe con testo di supporto in basso a sinistra.
Modella il sistema di celle
Perfeziona il campo Voronoi attorno a regioni poligonali irregolari, bordi condivisi chiari e una palette che comprenda aree blu, verdi, viola, verde petrolio e marroni. Verifica che il titolo resti leggibile sopra la geometria più affollata.
Aggiungi il movimento locale del puntatore
Fai convergere gradualmente entrambe le coordinate normalizzate del puntatore verso il bersaglio e usa una deformazione pesata sulla distanza per influenzare il campo campionato. Mantieni statico l'invito in basso a destra e descrivi l'effetto come distorsione locale, non come fisica delle celle. Non aggiungere servizi connessi, stato salvato o dichiarazioni di prestazioni misurate.
Prompt suggeritoCrea un design WebGL Voronoi Cells a tutto canvas con punti caratteristici in movimento, celle legate alla palette blu, verde, viola, verde petrolio e marrone, bordi chiari luminosi, un'etichetta in alto a sinistra “OPENDESIGN · WEBGL PREVIEW”, un'etichetta in alto a destra “REAL-TIME · GPU”, un grande titolo in basso a sinistra “VORONOI CELLS”, un testo di supporto sui punti caratteristici in movimento e sul movimento guidato dal cursore, e un invito in basso a destra “MOVE THE CURSOR”. Usa solo un'influenza locale del puntatore e non inventare servizi backend, dati salvati, metriche di prestazioni o controlli aggiuntivi.
Esporta e ottieni un link di condivisione
Esporta il design completato, quindi usa Condividi in OpenDesign per ottenere un link di condivisione. Apri il link in una finestra del browser separata e verifica che la versione prevista e le sue risorse siano disponibili prima di inviarlo.
Poster editoriale sul flusso di lavoro con l’IA
Il poster editoriale sul flusso di lavoro con l’IA presenta sei proposte in capitoli numerati, con esempi concreti di prompt e accenti tipografici color ruggine su un fondo crema.
Grafiche
Design di un carosello social sul workflow dell'IA
Sette card verticali usano titoli cinesi sovradimensionati, abitudini numerate, campi cromatici variabili e una frase conclusiva per spiegare i workflow di editing con l'IA.
Grafiche
Design Shader Aurora Field
Un campo di rumore blu-verde animato automaticamente dà atmosfera a un hero WebGL, mentre un titolo fisso e un piccolo badge locale del frame rate ancorano la scena.
Grafiche
Design dello shader Aurora Veil
Aurora Veil è una composizione shader interattiva che trasforma luce stratificata, stelle e movimento del cursore in un hero WebGL atmosferico.
Grafiche