Grafiche
Design di un visualizzatore di un campo di particelle
Un fitto campo di punti verdi accompagna un titolo sul calcolo fuori dal thread principale, con etichette su numero di particelle, trasporto e rendering locale su una tela quasi nera.
Casi d'uso del visualizzatore di particelle
- Studi di creative codingStudia la composizione delle particelle, il trasporto del worker e il disegno locale su canvas.
- Prototipi grafici tecniciPresenta il comportamento tecnico come una composizione visiva essenziale.
- Esplorazione di Canvas 2DEsplora campi di punti densi senza aggiungere controlli all'interfaccia.
Punti chiave di Worker e Canvas
- 12000 particelleUn conteggio visibile stabilisce la scala del campo di particelle.
- Trasporto postMessageL'etichetta del trasporto indica l'approccio di comunicazione locale.
- FPS di renderingUna lettura runtime separa l'output visivo dai dettagli di implementazione.
- Impostazione fuori dal thread principaleIl titolo dà alla grafica un presupposto tecnico preciso.
La composizione del campo di particelle
1 / 1Un campo di particelle con contesto runtime
Questo esempio ufficiale di OpenDesign presenta un visualizzatore di campo di particelle in Canvas 2D come un'unica grafica ad alto contrasto. La composizione colloca in alto a sinistra il grande titolo bianco “Compute off the main thread.”, mentre un'ampia formazione di particelle verdi occupa il centro e la destra. Un Web Worker inizializza i punti e il thread principale li disegna; la fonte non prevede controlli di manipolazione per l'utente.
Il campo di particelle non è una nuvola generica. I punti si raccolgono in una massa arrotondata, simile a un anello, con un'apertura scura vicino al centro. Questo spazio negativo crea un punto focale leggibile dentro una superficie molto densa, così chi guarda può osservare una struttura invece di un rumore uniforme. I punti verde neon su sfondo quasi nero mantengono inoltre il contrasto alla scala dell'intera composizione.
Casi d'uso per visual tecnici
Il design è utile quando una dimostrazione tecnica deve sembrare un visual finito e non un pannello di debug. Il suo livello informativo sobrio si adatta a una presentazione, a un intermezzo in una landing page o a uno studio di creative coding in cui il campo è il soggetto principale e il vocabolario implementativo resta visibile ma compatto.
La riga in basso contiene tre tipi diversi di informazione: “12,000” indica il numero di particelle, “postMessage” indica il trasporto e “121” compare sopra “RENDER FPS” nello stato runtime catturato. Tenere questi valori vicini ma separati permette di distinguere scala della scena, modalità di comunicazione e osservazione locale del rendering. Il compromesso è che le etichette spiegano il concetto senza spiegare come vengano calcolati i valori.
Scala della scena
L'etichetta 12,000 PARTICLES rende la densità una parte esplicita dello studio visivo.
Contesto del trasporto
L'etichetta postMessage TRANSPORT collega il campo renderizzato alla comunicazione del browser.
Osservazione runtime
Il valore RENDER FPS offre un contesto locale senza fungere da benchmark comparativo.
Composizione e ordine di lettura
Il titolo in alto a sinistra è sovradimensionato e va a capo su due righe, rendendo “Compute off the” e “main thread.” il primo ancoraggio stabile di lettura. La piccola etichetta con spaziatura ampia “WORKER VISUALIZER” identifica il soggetto sopra di esso. Questa scala tipografica crea un forte punto d'ingresso editoriale, ma significa anche che il titolo occupa molto spazio orizzontale e verticale accanto al campo.
La fonte inizializza 12000 punti usando angoli distribuiti in modo uniforme e raggi casuali da 0.15 a 1.0. Quel raggio interno spiega il centro scuro visibile, mentre la distribuzione radiale concentra molti punti vicino a esso. Canvas 2D disegna piccoli quadrati verdi su una ridipintura scura traslucida. Le etichette fisse in basso restano fuori da qualsiasi pannello, mantenendo la composizione da poster senza suggerire un renderer WebGL o un benchmark GPU.
Relazioni osservabili
Le tre statistiche seguono uno schema coerente: un valore o una parola più grande sopra un'etichetta maiuscola più piccola. “12,000” e “121” sono osservazioni numeriche, mentre “postMessage” è un valore testuale di trasporto. Il trattamento condiviso le fa leggere come un unico gruppo, anche se i diversi tipi di valore richiedono che siano le etichette a chiarirne il significato.
Due percorsi di trasporto, movimento diverso
La fonte supporta due percorsi di trasporto del worker. Nell'anteprima fornita, non isolata, postMessage consegna le posizioni iniziali ma non avvia mai la funzione step, quindi il disegno ripetuto su canvas non dimostra una simulazione di particelle in corso. Il valore catturato di 121 RENDER FPS stima la cadenza locale di ridisegno, non la frequenza di aggiornamento delle particelle né le prestazioni comparative. Non risultano servizi connessi, dati archiviati, distribuzione in produzione né dinamiche di particelle validate scientificamente.
| Percorso di trasporto | Comportamento del worker | Significato del campo visibile |
|---|---|---|
| SharedArrayBuffer | Richiede l'isolamento cross-origin; inizializza le posizioni condivise e avvia la funzione step ricorrente. | Il thread principale legge le posizioni condivise mentre il codice del worker fa evolvere il campo di punti. |
| Fallback postMessage | Inizializza e invia un solo buffer di posizioni, ma non chiama step. | Il thread principale ridisegna ripetutamente quelle posizioni iniziali; un'etichetta di render FPS che cambia non prova che le particelle si muovano. |
Come creare un design di visualizzatore di campo di particelle in OpenDesign
Definisci la grammatica visiva
Parti da una tela quasi nera, un campo di punti verde neon, una piccola etichetta del soggetto con spaziatura ampia e un titolo bianco su due righe. Mantieni il titolo in alto a sinistra e riserva il lato destro alla formazione di particelle.
Prompt suggeritoCrea un design di visualizzatore di campo di particelle con una tela quasi nera, un grande titolo su due righe che riporta “Compute off the main thread.”, un fitto campo di particelle verdi con un'apertura scura al centro e una riga di statistiche in basso per 12,000 PARTICLES, postMessage TRANSPORT e un'osservazione locale di RENDER FPS. Mostra solo il comportamento visivo; non suggerire servizi connessi, simulazione di fallback continua né prestazioni da benchmark.
Affina la struttura delle particelle
Modella i punti in un ampio campo arrotondato con un vuoto centrale ben visibile, anziché distribuirli in modo uniforme. Verifica che il campo resti leggibile accanto al titolo e che la densità dei punti non cancelli lo spazio negativo.
Verifica il livello runtime
Mantieni distinti conteggio, trasporto e osservazione del rendering nelle statistiche in basso. Rispetta il disegno in Canvas 2D e l'inizializzazione del worker locale della fonte. Se serve un movimento continuo, implementa e testa aggiornamenti ricorrenti nel percorso di trasporto scelto, invece di considerare un valore alto di FPS di ridisegno come prova di simulazione.
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