Créations graphiques
Design de shader Voronoï
Des cellules colorées irrégulières dérivent sur un canevas WebGL2, avec des contours pâles lumineux, une distorsion lissée au pointeur et une typographie fixe surdimensionnée.
Cas d’usage de l’art Voronoï
- Arrière-plans WebGL interactifsDes champs visuels plein canevas qui réagissent au mouvement local du pointeur.
- Études d’art génératifDes compositions pilotées par shader, construites à partir de la couleur, du mouvement et de la division de l’espace.
- Pages d’atterrissage expérimentalesDes écrans d’ouverture atmosphériques où la typographie se superpose à des graphismes en évolution.
Points forts du réseau de cellules
- Réseau plein canevasLes cellules de Voronoï remplissent le viewport derrière la couche de texte.
- Cellules associées à une paletteDes régions bleues, vertes, violettes, turquoise et brunes structurent le champ.
- Contours lumineuxDes bordures pâles rendent les cellules voisines lisibles.
- Influence du curseurLe mouvement du pointeur est présenté comme une interaction de poussée locale.
Trois moments du champ de Voronoï
1 / 3
Un champ de Voronoï plein canevas
Ce design de shader Voronoï est un exemple graphique officiel d’OpenDesign centré sur un unique canevas WebGL animé. Le titre d’origine indique « VORONOI CELLS », tandis que la ligne d’accompagnement décrit « drifting feature points, palette-keyed cells, glowing boundaries ». Ensemble, ces libellés posent le principe visuel avant même que le spectateur n’interagisse.
La composition utilise le canevas comme surface de la page plutôt que de placer l’œuvre dans un panneau encadré. De grandes cellules irrégulières dépassent du viewport, si bien que le champ paraît continu sur les bords. En contrepartie, l’œuvre apporte l’atmosphère et l’échelle, mais le design laisse peu de place à du contenu secondaire ou à une navigation classique.
Structure visible
Des bordures communes pâles séparent des régions polygonales de couleurs différentes, ce qui permet de lire l’adjacence et l’échelle.
Ordre de lecture
Les étiquettes du haut identifient l’aperçu, le titre surdimensionné en bas à gauche nomme le sujet, et l’invite en bas à droite introduit l’interaction.
Où ce design trouve sa place
Ce design convient aux contextes où la découverte visuelle prime sur l’information dense : l’ouverture d’une page d’atterrissage expérimentale, une étude d’art génératif ou une démonstration WebGL. L’expression « WEBGL PREVIEW » présente l’œuvre comme un aperçu visuel, tandis que « REAL-TIME · GPU » situe la technique de rendu dans l’interface.
Comme la source montre un seul canevas plein écran et aucun contrôle défini dans le balisage statique, le meilleur usage est un moment visuel ciblé plutôt qu’un outil riche en commandes. Ajouter des menus, des métriques ou des sections de contenu exigerait une nouvelle architecture de l’information et pourrait concurrencer l’œuvre volontairement surdimensionnée.
Écran d’ouverture
Utilisez la composition comme premier champ visuel lorsque la page a besoin d’une présence graphique immédiate et d’un message court.
Étude d’interaction
Utilisez l’indication du pointeur pour explorer la distorsion locale des coordonnées dans le champ animé, sans considérer les cellules comme des objets physiques simulés.
Référence visuelle
Utilisez la palette et le traitement des contours comme étude pour des arrière-plans basés sur des shaders, et non comme preuve de performance en production.
Typographie sur une géométrie en mouvement
La typographie est volontairement grande et ancrée en bas à gauche. « VORONOI » occupe la ligne dominante, avec « CELLS » en dessous, tandis que la phrase explicative se place plus bas, en plus petit. Cette échelle rend le sujet lisible sur un champ chargé, mais elle impose aussi que l’œuvre garde un contraste suffisant derrière les lettres.
Le fragment shader examine un voisinage de trois par trois de points caractéristiques, qui dérivent avec le temps écoulé. Le point le plus proche détermine la palette de chaque cellule, tandis que l’écart entre la distance au point le plus proche et celle au deuxième plus proche met en évidence les contours communs. Une déformation du pointeur pondérée par une gaussienne modifie les coordonnées échantillonnées ; elle ne déplace pas de maillage physique et ne simule pas de collisions entre cellules.
Échelle du titre
Le titre surdimensionné sur deux lignes garde le sujet identifiable même lorsque la géométrie des cellules change derrière lui.
Étiquettes de bord
De petites étiquettes en majuscules définissent le contexte d’aperçu et le concept de rendu sans concurrencer le titre principal.
Placement des éléments en surimpression
L’étiquette « OPENDESIGN · WEBGL PREVIEW » en haut à gauche et l’étiquette « REAL-TIME · GPU » en haut à droite forment un large cadre autour du canevas. L’invite « MOVE THE CURSOR ↗ » en bas à droite équilibre le grand titre en bas à gauche et oriente vers l’interaction sans ajouter de parcours classique à base de bouton.
Mouvement visible et limites des capacités
Les trois captures montrent une même composition plein canevas à différents moments, et non des écrans distincts. La source met en œuvre une dérive continue des points caractéristiques et une distorsion locale au pointeur. Les deux coordonnées normalisées du pointeur se rapprochent de leur cible, à chaque image, d’une quantité égale à l’écart restant multiplié par 0,06 avant d’influencer le shader. Le badge du curseur en bas à droite est une indication statique, pas un bouton, et aucun clic, glisser-déposer ni panneau de configuration n’est requis.
Les éléments disponibles n’établissent ni services connectés, ni données stockées, ni performance mesurée, ni déploiement en production. Ils n’établissent pas non plus que chaque affirmation de rendu représentée s’applique à tous les appareils. Lisez cet artefact comme un exemple de design et d’implémentation dont la force visible tient à la relation entre la géométrie du shader, la couleur, la typographie en surimpression et l’entrée locale.
Séparer l’observation du comportement
Consignez le champ de polygones visible, les contours pâles, les zones de couleur et le texte en surimpression comme des choix de design ; considérez la réaction au curseur et l’animation comme un comportement attesté localement, et non comme une capacité de service.
Préserver le compromis
Gardez le canevas visuellement dominant lorsque vous adaptez la composition, mais vérifiez que le titre et le texte d’accompagnement restent lisibles à mesure que les bords des cellules et les champs de couleur bougent en dessous.
Comment créer un design de shader Voronoï dans OpenDesign
Établir le canevas et la couche de texte
Créez un seul canevas WebGL plein viewport, puis placez une petite étiquette d’aperçu en haut à gauche, une étiquette de rendu en haut à droite, et un grand titre sur deux lignes avec un texte d’accompagnement en bas à gauche.
Façonner le système de cellules
Affinez le champ de Voronoï autour de régions polygonales irrégulières, de contours communs pâles et d’une palette comprenant des zones bleues, vertes, violettes, turquoise et brunes. Vérifiez que le titre reste lisible sur la géométrie la plus chargée.
Ajouter un mouvement local au pointeur
Faites tendre progressivement les deux coordonnées normalisées du pointeur vers leur cible et utilisez une déformation pondérée par la distance pour influencer le champ échantillonné. Gardez l’indication en bas à droite statique et décrivez l’effet comme une distorsion locale, non comme une physique des cellules. N’ajoutez ni services connectés, ni état stocké, ni affirmations de performance mesurée.
Invite suggéréeCrée un design de cellules de Voronoï WebGL plein canevas avec des points caractéristiques en dérive, des cellules bleues, vertes, violettes, turquoise et brunes associées à une palette, et des contours pâles lumineux. Ajoute une étiquette en haut à gauche « OPENDESIGN · WEBGL PREVIEW », une étiquette en haut à droite « REAL-TIME · GPU », un grand titre en bas à gauche « VORONOI CELLS », un texte d’accompagnement sur les points caractéristiques en dérive et le mouvement guidé par le curseur, et une invite en bas à droite « MOVE THE CURSOR ». Utilise uniquement une influence locale du pointeur et n’invente ni services backend, ni données stockées, ni métriques de performance, ni commandes supplémentaires.
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