Diseños gráficos
Diseño de shader Voronoi
Celdas de color irregulares se desplazan por un lienzo WebGL2, con bordes pálidos y luminosos, distorsión suavizada por el puntero y tipografía fija de gran tamaño.
Casos de uso del arte Voronoi
- Fondos WebGL interactivosCampos visuales a lienzo completo que responden al movimiento local del puntero.
- Estudios de arte generativoComposiciones guiadas por shaders construidas con color, movimiento y división espacial.
- Páginas de aterrizaje experimentalesPantallas de apertura atmosféricas donde la tipografía se sitúa sobre gráficos en evolución.
Aspectos destacados de la red de celdas
- Red a lienzo completoLas celdas Voronoi llenan el viewport detrás de la capa superpuesta.
- Celdas según paletaRegiones azules, verdes, moradas, turquesa y marrones separan el campo.
- Bordes luminososLos bordes pálidos hacen legibles las celdas vecinas.
- Influencia del cursorEl movimiento del puntero se presenta como una interacción local de empuje.
Tres momentos del campo Voronoi
1 / 3
Un campo Voronoi a lienzo completo
El diseño de shader Voronoi es un ejemplo gráfico oficial de OpenDesign centrado en un único lienzo WebGL animado. El encabezado original dice “VORONOI CELLS”, mientras que la línea de apoyo describe “drifting feature points, palette-keyed cells, glowing boundaries”. Juntas, estas etiquetas establecen la premisa visual antes de que el espectador interactúe con ella.
La composición usa el lienzo como superficie de la página en lugar de colocar la obra en un panel enmarcado. Grandes celdas irregulares se extienden más allá del viewport, de modo que el campo se siente continuo en los bordes. La contrapartida es que la obra aporta atmósfera y escala, pero el diseño deja poco espacio para contenido secundario o navegación convencional.
Estructura visible
Los bordes compartidos pálidos dividen regiones poligonales de distintos colores y permiten leer la adyacencia y la escala.
Orden de lectura
Las etiquetas superiores identifican la vista previa, el encabezado sobredimensionado abajo a la izquierda nombra el tema y la indicación inferior derecha introduce la interacción.
Dónde encaja este diseño
Este diseño es adecuado para contextos donde el descubrimiento visual importa más que la información densa: la apertura de una página de aterrizaje experimental, un estudio de arte generativo o una demostración de WebGL. La frase “WEBGL PREVIEW” identifica la obra como una vista previa visual, mientras que “REAL-TIME · GPU” enmarca la técnica de renderizado en la interfaz.
Como la fuente muestra un único lienzo completo y ningún control definido en el marcado estático, el mejor uso es un momento visual enfocado y no una herramienta cargada de controles. Añadir menús, métricas o secciones de contenido exigiría una nueva arquitectura de la información y podría competir con la obra deliberadamente sobredimensionada.
Pantalla de apertura
Usa la composición como primer campo visual cuando la página necesite presencia gráfica inmediata y una declaración breve.
Estudio de interacción
Usa la indicación del puntero para explorar la distorsión local de coordenadas en el campo animado, sin tratar las celdas como objetos físicos simulados.
Referencia visual
Usa la paleta y el tratamiento de los bordes como estudio para fondos basados en shaders, no como prueba de rendimiento en producción.
Tipografía sobre geometría en movimiento
La tipografía es deliberadamente grande y se ancla abajo a la izquierda. “VORONOI” ocupa la línea dominante, con “CELLS” debajo, mientras que la frase explicativa queda debajo en un texto más pequeño. Esta escala hace legible el tema sobre un campo cargado, pero también implica que la obra debe mantener suficiente contraste detrás de las letras.
El fragment shader examina un vecindario de tres por tres de puntos característicos, que se desplazan con el tiempo transcurrido. El punto más cercano identifica la paleta de cada celda, mientras que la diferencia entre las distancias al más cercano y al segundo más cercano resalta los bordes compartidos. Una deformación del puntero ponderada con una gaussiana cambia las coordenadas muestreadas; no mueve una malla física ni simula colisiones entre celdas.
Escala del encabezado
El título sobredimensionado de dos líneas mantiene identificable el tema aunque la geometría de las celdas cambie detrás de él.
Etiquetas de borde
Pequeñas etiquetas en mayúsculas definen el contexto de la vista previa y el concepto de renderizado sin competir con el título principal.
Colocación de la capa superpuesta
La etiqueta superior izquierda “OPENDESIGN · WEBGL PREVIEW” y la etiqueta superior derecha “REAL-TIME · GPU” crean un marco amplio alrededor del lienzo. La indicación inferior derecha “MOVE THE CURSOR ↗” equilibra el gran título inferior izquierdo y apunta hacia la interacción sin añadir un flujo convencional de botones.
Movimiento visible y límites de capacidad
Las tres capturas muestran una única composición a lienzo completo en distintos momentos, no pantallas separadas. La fuente implementa el desplazamiento continuo de los puntos característicos y la distorsión local del puntero. Ambas coordenadas normalizadas del puntero se acercan a su objetivo en cada fotograma una cantidad igual a la diferencia restante multiplicada por 0,06 antes de influir en el shader. La insignia del cursor abajo a la derecha es una indicación estática, no un botón, y no se requiere clic, arrastre ni panel de configuración.
La evidencia no establece servicios conectados, datos almacenados, rendimiento medido ni un despliegue en producción. Tampoco establece que todas las afirmaciones de renderizado representadas se apliquen en todos los dispositivos. Lee este artefacto como un ejemplo de diseño e implementación cuya fortaleza visible es la relación entre la geometría del shader, el color, la tipografía superpuesta y la entrada local.
Separa la observación del comportamiento
Registra el campo poligonal visible, los bordes pálidos, las regiones de color y el texto superpuesto como decisiones de diseño; trata la respuesta al cursor y la animación como comportamiento con evidencia local, no como una capacidad de servicio.
Conserva la contrapartida
Mantén el lienzo visualmente dominante al adaptar la composición, pero comprueba si el título y el texto de apoyo siguen siendo legibles mientras los bordes de las celdas y los campos de color se mueven debajo.
Cómo crear un diseño de shader Voronoi en OpenDesign
Define el lienzo y la capa superpuesta
Crea un único lienzo WebGL a viewport completo y coloca una pequeña etiqueta de vista previa arriba a la izquierda, una etiqueta de renderizado arriba a la derecha y un título grande de dos líneas con texto de apoyo cerca de la esquina inferior izquierda.
Da forma al sistema de celdas
Refina el campo Voronoi en torno a regiones poligonales irregulares, bordes compartidos pálidos y una paleta que incluya zonas azules, verdes, moradas, turquesa y marrones. Comprueba que el título siga siendo legible sobre la geometría más cargada.
Añade movimiento local con el puntero
Suaviza ambas coordenadas normalizadas del puntero hacia su objetivo y usa una deformación ponderada por distancia para influir en el campo muestreado. Mantén estática la indicación de abajo a la derecha y describe el efecto como distorsión local, no como física de celdas. No añadas servicios conectados, estado almacenado ni afirmaciones de rendimiento medido.
Prompt sugeridoCrea un diseño de celdas Voronoi en WebGL a lienzo completo, con puntos característicos en movimiento, celdas azules, verdes, moradas, turquesa y marrones asignadas por paleta, bordes pálidos y luminosos, una etiqueta superior izquierda “OPENDESIGN · WEBGL PREVIEW”, una etiqueta superior derecha “REAL-TIME · GPU”, un gran encabezado inferior izquierdo “VORONOI CELLS”, texto de apoyo sobre puntos característicos en movimiento y movimiento guiado por el cursor, y una indicación inferior derecha “MOVE THE CURSOR”. Usa solo influencia local del puntero y no inventes servicios de backend, datos almacenados, métricas de rendimiento ni controles adicionales.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de póster editorial sobre flujos de trabajo con IA
El diseño de póster editorial sobre flujos de trabajo con IA presenta seis afirmaciones sobre los flujos de trabajo, con capítulos numerados, ejemplos concretos de prompts y acentos tipográficos color óxido sobre un fondo crema.
Diseños gráficos
Diseño de carrusel social sobre flujos de trabajo con IA
Siete tarjetas verticales utilizan encabezados chinos sobredimensionados, hábitos numerados, campos de color cambiantes y una declaración final para explicar los flujos de trabajo de edición con IA.
Diseños gráficos
Diseño de shader Aurora Field
Un campo de ruido azul verdoso animado automáticamente aporta atmósfera a un hero WebGL, mientras un titular fijo y una pequeña insignia local de frecuencia de fotogramas anclan la escena.
Diseños gráficos
Diseño de shader Aurora Veil
Aurora Veil es una composición de shader interactiva que convierte la luz en capas, las estrellas y el movimiento del cursor en un hero atmosférico de WebGL.
Diseños gráficos