Créations graphiques
Design de visualiseur de champ de particules
Un champ dense de points verts s’associe à un titre sur le calcul hors du thread principal, avec des libellés de nombre de particules, de transport et de rendu local sur un canevas quasi noir.
Cas d’usage du visualiseur de particules
- Études de creative codingÉtudier la composition de particules, les échanges de données avec le worker et le dessin local sur canevas.
- Prototypes graphiques techniquesPrésenter un comportement technique comme une composition visuelle ciblée.
- Exploration du Canvas 2DExplorer des champs de points denses sans ajouter de commandes d’interface.
Points forts du worker et du canevas
- 12000 particulesUn nombre visible établit l’échelle du champ de particules.
- Transport postMessageLe libellé de transport nomme l’approche de communication locale.
- FPS de renduUn indicateur d’exécution sépare le rendu visuel du détail d’implémentation.
- Cadrage hors thread principalLe titre donne au graphisme une prémisse technique précise.
La composition du champ de particules
1 / 1Un champ de particules avec son contexte d’exécution
Cet exemple officiel OpenDesign présente un visualiseur de champ de particules en Canvas 2D sous la forme d’un graphisme unique à fort contraste. La composition place le grand titre blanc « Compute off the main thread. » en haut à gauche, tandis qu’une large formation de particules vertes occupe le centre et la droite. Un Web Worker initialise les points et le thread principal les dessine ; la source ne comporte aucune commande de manipulation par l’utilisateur.
Le champ de particules n’est pas un nuage générique. Ses points se rassemblent en une masse arrondie, en forme d’anneau, avec une ouverture sombre près du centre. Cet espace négatif crée un point focal lisible dans une surface très dense : le spectateur peut examiner une structure plutôt qu’un bruit uniforme. Les points vert néon sur le fond quasi noir préservent aussi le contraste à l’échelle de toute la composition.
Cas d’usage des visuels techniques
Ce design est utile lorsqu’une démonstration technique doit ressembler à un visuel abouti plutôt qu’à un panneau de débogage. Sa couche d’information sobre convient à une présentation, à un interlude de page d’accueil ou à une étude de creative coding où le champ reste le sujet principal et où le vocabulaire d’implémentation demeure visible mais compact.
La rangée du bas contient trois types d’informations différents : « 12,000 » indique le nombre de particules, « postMessage » nomme le transport et « 121 » apparaît au-dessus de « RENDER FPS » dans l’état d’exécution capturé. Garder ces valeurs adjacentes mais séparées permet de distinguer l’échelle de la scène, le mode de communication et une observation locale du rendu. Le compromis est que les libellés expliquent le concept sans expliquer comment les valeurs sont calculées.
Échelle de la scène
Le libellé 12,000 PARTICLES fait de la densité une part explicite de l’étude visuelle.
Contexte de transport
Le libellé postMessage TRANSPORT relie le champ affiché à la communication du navigateur.
Observation d’exécution
La valeur RENDER FPS apporte un contexte local sans servir de benchmark comparatif.
Composition et ordre de lecture
Le titre en haut à gauche est surdimensionné et se répartit sur deux lignes, faisant de « Compute off the » et « main thread. » le premier repère de lecture stable. Le petit libellé espacé « WORKER VISUALIZER » identifie le sujet au-dessus. Cette échelle typographique crée une forte entrée éditoriale, mais le titre occupe aussi un large territoire horizontal et vertical à côté du champ.
La source initialise 12000 points avec des angles uniformément répartis et des rayons aléatoires de 0.15 à 1.0. Ce rayon intérieur explique le centre sombre visible, tandis que la distribution radiale concentre de nombreux points près de lui. Le Canvas 2D dessine de petits carrés verts sur un repeint sombre translucide. Les libellés fixes du bas restent hors de tout panneau, ce qui préserve la composition de type affiche sans suggérer un moteur WebGL ni un benchmark GPU.
Relations observables
Les trois statistiques suivent un schéma constant : une valeur ou un mot plus grand surmonte un libellé plus petit en capitales. « 12,000 » et « 121 » sont des observations numériques, tandis que « postMessage » est une valeur textuelle de transport. Ce traitement commun les fait lire comme un seul groupe, bien que la différence de nature des valeurs impose aux libellés d’en donner le sens.
Deux voies de transfert, des comportements de mouvement différents
La source prend en charge deux voies d’échange de données avec le worker. Dans l’aperçu fourni, non isolé, postMessage transmet les positions initiales mais ne lance jamais la fonction step ; le redessin répété du canevas ne démontre donc pas une simulation continue des particules. La valeur capturée de 121 RENDER FPS estime la cadence locale de redessin, et non la fréquence de mise à jour des particules ni une performance comparative. Aucun service connecté, aucune donnée stockée, aucun déploiement en production ni aucune dynamique de particules scientifiquement validée n’est établi.
| Chemin de transport | Comportement du worker | Signification du champ visible |
|---|---|---|
| SharedArrayBuffer | Nécessite l’isolation cross-origin ; initialise les positions partagées et lance la fonction step récurrente. | Le thread principal lit les positions partagées pendant que le code du worker fait évoluer le champ de points. |
| Repli postMessage | Initialise et envoie un seul tampon de positions, mais n’appelle pas step. | Le thread principal redessine en boucle ces positions initiales ; un libellé de FPS de rendu qui change ne prouve pas que les particules bougent. |
Comment créer un design de visualiseur de champ de particules dans OpenDesign
Établir la grammaire visuelle
Commencez par un canevas quasi noir, un champ de points vert néon, un petit libellé de sujet espacé et un titre blanc sur deux lignes. Gardez le titre en haut à gauche et réservez le côté droit à la formation de particules.
Invite suggéréeCrée un design de visualiseur de champ de particules avec un canevas quasi noir, un grand titre sur deux lignes affichant « Compute off the main thread. », un champ dense de particules vertes avec une ouverture sombre au centre, et une rangée de statistiques en bas pour 12,000 PARTICLES, postMessage TRANSPORT et une observation locale de RENDER FPS. Montre uniquement le comportement visuel ; n’implique ni services connectés, ni simulation de repli continue, ni résultats de benchmark.
Affiner la structure des particules
Donnez aux points la forme d’un large champ arrondi avec un vide central visible, plutôt que de les répartir uniformément. Vérifiez que le champ reste lisible à côté du titre et que la densité des points n’efface pas l’espace négatif.
Vérifier la couche d’exécution
Gardez distincts le nombre, le transport et l’observation du rendu dans les statistiques du bas. Reprenez le dessin Canvas 2D de la source et l’initialisation du worker local. Si un mouvement continu est requis, implémentez et testez des mises à jour récurrentes dans le chemin de transport choisi, au lieu de considérer une valeur élevée de FPS de redessin comme preuve de simulation.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception d’affiche éditoriale sur les workflows IA
Cette affiche éditoriale sur les workflows IA présente six affirmations, organisées en chapitres numérotés, avec des exemples concrets de prompts et des accents typographiques rouille sur un fond crème.
Créations graphiques
Conception d’un carrousel social sur les workflows IA
Sept cartes verticales utilisent des titres chinois surdimensionnés, des habitudes numérotées, des aplats de couleur changeants et une conclusion pour expliquer les workflows d’édition avec l’IA.
Créations graphiques
Conception de shader Aurora Field
Un champ de bruit bleu-vert animé automatiquement donne son atmosphère à un hero WebGL, tandis qu’un titre fixe et un petit indicateur local de fréquence d’images ancrent la scène.
Créations graphiques
Conception du shader Aurora Veil
Aurora Veil est une composition shader interactive qui transforme des lumières superposées, des étoiles et les mouvements du curseur en un hero WebGL atmosphérique.
Créations graphiques