Grafiche
Design di uno shader liquido iridescente
Un vivido effetto olio su acqua scorre sotto una tipografia fissa, mentre l'input del puntatore, smorzato, piega un campo cromatico procedurale privo di texture.
Usi dello shader iridescente
- Esperimenti WebGL generativiEsplora il movimento guidato dagli shader senza ricorrere a texture importate.
- Sfondi visivi interattiviStudia campi cromatici a schermo intero modellati dall'input locale del puntatore.
- Riferimenti per il creative codingOsserva come la tipografia incornicia un canvas espressivo.
Punti di forza del campo cromatico liquido
- Superficie guidata dalla matematicaLe increspature sono presentate come calcolo visivo privo di texture.
- Risposta al cursoreLa posizione del puntatore piega il flusso sul canvas.
- Palette iridescenteCorrenti viola, ciano, rosa e rosate creano contrasto.
- Overlay editorialeLa tipografia di grandi dimensioni ancora il campo visivo altrimenti continuo.
Tre stati del campo iridescente
1 / 3
Un effetto olio su acqua costruito con la matematica
Iridescent Liquid è un esempio ufficiale di OpenDesign costruito attorno a una singola anteprima WebGL, non a una raccolta di schermate applicative. Il titolo d'autore, “LIQUID IRIDESCENCE”, compare su un campo saturo di forme fluide viola, ciano, rosa e rosate. La composizione rende il canvas il soggetto, tenendo il testo esplicativo vicino al percorso di lettura in basso a sinistra.
Il testo di supporto definisce l'effetto un “living oil-on-water field”. L'implementazione renderizza un triangolo a schermo intero con rumore procedurale, non una mesh sferica né una texture fotografica. Così può suggerire un materiale fluido senza raffigurare un oggetto letterale. Il linguaggio materico è una metafora visiva, non la prova di una simulazione fisicamente accurata di olio o acqua.
In alto, “OPENDESIGN · WEBGL PREVIEW” identifica il contesto e “REAL-TIME · GPU” inquadra l'approccio di rendering. Queste etichette orientano l'osservatore prima della lettura del titolo più grande, ma vanno considerate testo descrittivo dell'interfaccia, non prova di frame rate misurato o di prestazioni in produzione.
Canvas continuo
Il campo visivo riempie la composizione, quindi il movimento resta il contenuto principale e non lo sfondo di pannelli separati.
Contrasto texturizzato
Le grandi lettere bianche separano il messaggio editoriale dal denso campo cromatico, anche se la posizione deve restare stabile al variare dello sfondo.
Dove si inserisce questo design
Questo lavoro è utile soprattutto come riferimento per sfondi visivi interattivi, studi di arte generativa e dimostrazioni di creative coding. Mostra come una pagina possa comunicare un esperimento visivo con una breve descrizione, un titolo grande e un chiaro invito all'interazione. È meno adatto a interfacce ricche di informazioni, perché la superficie animata compete con etichette piccole e contenuti dettagliati.
Il messaggio “MOVE THE CURSOR ↗” trasforma l'osservatore da spettatore passivo a partecipante. Gli stati forniti mostrano lo stesso canvas con confini cromatici e disposizioni delle increspature diversi, mentre l'overlay resta coerente. Questo abbinamento rende leggibile il cambio di stato: la composizione cambia, ma l'area di lettura no.
Dimostrazione visiva
Usa questa impostazione quando il comportamento stesso è il soggetto e un overlay editoriale stabile può spiegare l'esperimento.
Sezione iniziale d’atmosfera
Adatta il campo a una sezione iniziale mirata, tenendo presente che i contenuti densi vanno collocati fuori dall'area animata.
Studio sugli shader
Sfrutta la premessa senza texture per confrontare superfici procedurali e materiali basati su immagini senza cambiare la cornice della pagina.
Composizione e movimento
Il design usa un forte ordine di lettura verticale: etichette di contesto in alto, il titolo sovradimensionato “LIQUID IRIDESCENCE” in basso a sinistra, il testo esplicativo sotto di esso e l'istruzione per il cursore in basso a destra. Questo distribuisce l'attenzione sul canvas ampio mantenendo il messaggio principale raggruppato in un unico blocco leggibile.
Le acquisizioni mostrano tre stati dello stesso canvas shader, non schermate indipendenti. Al loro interno, titolo e frase di supporto restano fermi mentre le correnti circostanti passano da zone dominate dal ciano a passaggi più magenta, rosa, verde acqua e ocra. L'overlay stabile offre al movimento un punto di riferimento; il compromesso è che lo sfondo può ridurre il contrasto dietro alcune parti del testo.
Il fragment shader usa rumore a sei livelli attraverso due campi di distorsione concatenati. Un'attrazione del puntatore, ponderata in base alla distanza, piega le coordinate di campionamento, mentre una palette basata sul coseno e termini che producono creste luminose creano le correnti iridescenti. Per entrambe le coordinate del puntatore, a ogni frame la differenza residua rispetto al valore obiettivo viene moltiplicata per 0.06 e aggiunta alla coordinata corrente, mentre il tempo trascorso continua a modificare il campo. L'istruzione in basso a destra è testo fisso, non un controllo cliccabile.
Il colore come struttura
La palette non è un singolo gradiente. È organizzata in ampie correnti colorate bordate da contorni chiari e luminosi. Ciano e verde acqua offrono interruzioni più fredde all'interno del campo dominante magenta e viola, mentre le linee rosa chiaro rivelano la direzione del flusso. Questa variazione aiuta il canvas a suggerire profondità senza aggiungere geometria letterale.
Area di lettura stabile
L'overlay ripetuto dimostra un pattern di interazione pratico: conservare titolo e istruzione lasciando variare l'opera. Una ricreazione dovrebbe mantenere intatta questa relazione, poi verificare se la palette scelta lascia un contrasto sufficiente sotto il testo.
Limiti delle funzionalità
Questo artefatto è un esempio di design e rendering. Le evidenze fornite supportano stati visibili del canvas WebGL, la gestione locale della risposta al puntatore, il ridimensionamento e un ciclo di animazione. Non verificano servizi connessi, archiviazione, distribuzione in produzione, frame rate misurati o il modello di generazione originale. Le tre acquisizioni vanno quindi lette come stati visivi di una sola composizione, non come prova di flussi di lavoro distinti o di prestazioni testate.
Come adattarlo
Per una nuova versione, mantieni il rapporto tra movimento procedurale e cornice editoriale, poi cambia una variabile alla volta: palette, scala delle increspature, posizione del titolo o influenza del puntatore. Rendi la modifica osservabile nel canvas e descrivi il comportamento proposto come proposto, non come funzionalità esistente.
Come creare uno shader liquido iridescente in OpenDesign
Imposta il canvas e l'area di lettura
Parti da un unico canvas WebGL a schermo intero, con etichette di contesto in alto, un blocco titolo in basso a sinistra e un'istruzione per il cursore in basso a destra. Mantieni il titolo leggibile sia sulle zone più luminose sia su quelle più scure.
Definisci la superficie procedurale
Costruisci un campo procedurale privo di texture, con ampie correnti viola, magenta, ciano, rosa e verde acqua e linee di cresta luminose. Riproduci il movimento locale guidato dal tempo e reattivo al puntatore dell'originale, tenendo separata qualsiasi affermazione su accuratezza fisica del materiale o prestazioni in produzione.
Prompt suggeritoCrea una composizione shader WebGL a schermo intero intitolata LIQUID IRIDESCENCE. Usa un campo procedurale olio su acqua privo di texture, con correnti viola, magenta, ciano, rosa e verde acqua. Aggiungi OPENDESIGN · WEBGL PREVIEW in alto a sinistra, REAL-TIME · GPU in alto a destra, un grande titolo in basso a sinistra, un testo di supporto sulle increspature matematiche e MOVE THE CURSOR ↗ in basso a destra. Consenti al movimento locale del puntatore di influenzare il campo, ma non dichiarare servizi connessi, archiviazione, prestazioni misurate o funzionalità video o audio.
Rifinisci movimento e contrasto
Confronta diverse posizioni del puntatore e dimensioni del viewport. Verifica che l'overlay resti ancorato mentre il campo cambia, che i contorni chiari non compromettano la leggibilità del testo esplicativo e che gli stati alternativi si leggano ancora come un'unica composizione.
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