Diseños gráficos
Diseño de visualizador de campo de partículas
Un denso campo de puntos verdes acompaña un titular sobre el cálculo fuera del hilo principal, junto con etiquetas de número de partículas, transporte y renderizado local sobre un lienzo casi negro.
Casos de uso del visualizador de partículas
- Estudios de programación creativaEstudia la composición de partículas, el transporte del worker y el dibujo local en canvas.
- Prototipos gráficos técnicosPlantea el comportamiento técnico como una composición visual enfocada.
- Exploración con Canvas 2DExplora campos densos de puntos sin añadir controles de interfaz.
Aspectos destacados de worker y Canvas
- 12000 partículasUn recuento visible establece la escala del campo de partículas.
- Transporte postMessageLa etiqueta de transporte nombra el enfoque de comunicación local.
- FPS de renderizadoUna lectura de ejecución separa el resultado visual del detalle de implementación.
- Planteamiento fuera del hilo principalEl titular da al gráfico una premisa técnica precisa.
La composición del campo de partículas
1 / 1Un campo de partículas con contexto de ejecución
Este ejemplo oficial de OpenDesign presenta un visualizador de campo de partículas en Canvas 2D como un único gráfico de alto contraste. La composición sitúa el gran titular blanco, “Compute off the main thread.”, arriba a la izquierda, mientras una amplia formación de partículas verdes ocupa el centro y la derecha. Un Web Worker inicializa los puntos y el hilo principal los dibuja; la fuente no tiene controles de manipulación para el usuario.
El campo de partículas no es una nube genérica. Sus puntos se agrupan en una masa redondeada, en forma de anillo, con una abertura oscura cerca del centro. Ese espacio negativo crea un punto focal legible dentro de una superficie muy densa, de modo que el espectador puede examinar la estructura en lugar de ver solo ruido uniforme. Los puntos verde neón sobre el fondo casi negro también conservan el contraste a la escala de toda la composición.
Casos de uso para recursos visuales técnicos
El diseño es útil cuando una demostración técnica debe parecer una pieza visual terminada y no un panel de depuración. Su capa de información contenida sirve para una presentación, un intermedio en una landing page o un estudio de programación creativa donde el campo es el protagonista y el vocabulario de implementación permanece visible pero compacto.
La fila inferior contiene tres tipos de información distintos: “12,000” indica el número de partículas, “postMessage” indica el transporte y “121” aparece sobre “RENDER FPS” en el estado de ejecución capturado. Mantener estos valores contiguos pero separados permite distinguir la escala de la escena, el modo de comunicación y una observación local de renderizado. La contrapartida es que las etiquetas explican el concepto sin explicar cómo se calculan los valores.
Escala de la escena
La etiqueta 12,000 PARTICLES convierte la densidad en parte explícita del estudio visual.
Contexto de transporte
La etiqueta postMessage TRANSPORT conecta el campo renderizado con la comunicación del navegador.
Observación de ejecución
El valor de RENDER FPS aporta contexto local sin servir como referencia comparativa.
Composición y orden de lectura
El titular de arriba a la izquierda es de gran tamaño y se divide en dos líneas, de modo que “Compute off the” y “main thread.” son el primer ancla de lectura estable. La pequeña etiqueta espaciada “WORKER VISUALIZER” identifica el tema por encima. Esta escala tipográfica crea una entrada editorial potente, pero también implica que el titular ocupa un espacio horizontal y vertical considerable junto al campo.
La fuente inicializa 12000 puntos con ángulos distribuidos uniformemente y radios aleatorios de 0.15 a 1.0. Ese radio interior explica el centro oscuro visible, mientras que la distribución radial concentra muchos puntos cerca de él. Canvas 2D dibuja pequeños cuadrados verdes sobre un repintado oscuro translúcido. Las etiquetas inferiores fijas quedan fuera de cualquier panel, lo que conserva la composición tipo póster sin sugerir un renderizador WebGL ni una prueba de rendimiento de GPU.
Relaciones observables
Las tres estadísticas siguen un patrón coherente: un valor o palabra más grande sobre una etiqueta en mayúsculas más pequeña. “12,000” y “121” son observaciones numéricas, mientras que “postMessage” es un valor textual de transporte. El tratamiento compartido hace que se lean como un grupo, aunque los distintos tipos de valor requieren que las etiquetas interpreten su significado.
Dos vías de transporte, distinto movimiento
La fuente admite dos vías de transporte del worker. En la vista previa suministrada, no aislada, postMessage entrega las posiciones iniciales pero nunca inicia la función step, así que el dibujo repetido en canvas no demuestra una simulación continua de partículas. El valor capturado de 121 RENDER FPS estima la cadencia local de redibujado, no la frecuencia de actualización de partículas ni un rendimiento comparativo. No se establece ningún servicio conectado, dato almacenado, despliegue en producción ni dinámica de partículas validada científicamente.
| Vía de transporte | Comportamiento del worker | Significado del campo visible |
|---|---|---|
| SharedArrayBuffer | Requiere aislamiento de origen cruzado; inicializa posiciones compartidas e inicia la función step recurrente. | El hilo principal lee las posiciones compartidas mientras el código del worker hace evolucionar el campo de puntos. |
| Alternativa con postMessage | Inicializa y envía un único búfer de posiciones, pero no llama a step. | El hilo principal redibuja repetidamente esas posiciones iniciales; una etiqueta de render FPS cambiante no prueba que las partículas se muevan. |
Cómo crear un diseño de visualizador de campo de partículas en OpenDesign
Establece la gramática visual
Empieza con un lienzo casi negro, un campo de puntos verde neón, una pequeña etiqueta de tema con espaciado amplio y un titular blanco de dos líneas. Mantén el titular arriba a la izquierda y reserva el lado derecho para la formación de partículas.
Prompt sugeridoCrea un diseño de visualizador de campo de partículas con un lienzo casi negro, un titular grande de dos líneas que diga “Compute off the main thread.”, un denso campo de partículas verdes con una abertura oscura central y una fila inferior de estadísticas con 12,000 PARTICLES, postMessage TRANSPORT y una observación local de RENDER FPS. Muestra solo el comportamiento visual; no insinúes servicios conectados, simulación de respaldo continua ni rendimiento de referencia.
Refina la estructura de partículas
Da a los puntos la forma de un campo amplio y redondeado con un vacío central visible, en lugar de distribuirlos de manera uniforme. Comprueba que el campo siga siendo legible junto al titular y que la densidad de puntos no elimine el espacio negativo.
Revisa la capa de ejecución
Mantén diferenciados el número de partículas, el transporte y la observación de renderizado en las estadísticas inferiores. Respeta el dibujo en Canvas 2D y la inicialización local del worker de la fuente. Si necesitas movimiento continuo, implementa y prueba actualizaciones recurrentes en la vía de transporte elegida, en lugar de tratar un valor alto de FPS de redibujado como prueba de simulación.
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