Malla esférica

Geometría viva con Perlin Noise y partículas

Siempre me han flipado esas formas que están a medio camino entre lo matemático y lo orgánico.
No sabes muy bien si son solo calculos matematicos o tienen vida propria.

Hace un tiempo, ver una esfera de partículas reaccionando de forma fluida al usuario me parecía algo bastante lejano a mis capacidades. Era una cosa que me hubiese gustado integrar pero se quedaba en manos de desarrolladores experimentados y webs de Awwwards. Pero una vez entiendes la lógica que hay detrás y te apoyas en la tecnología actual para ejecutarla pasas de la idea a tener algo funcionando en una tarde. En este experimento quería justo eso, hacer que una estructura 3D no se sienta rígida, sino que respire, reaccione y tenga personalidad propia.

La base: pura trigonometría

Aunque lo que ves es una esfera “viva”, por debajo hay matemáticas bastante simples. Cada partícula se coloca usando coordenadas esféricas (latitud y longitud), y con sin y cos las conviertes en posiciones X e Y. La clave está en la Z.

No la dibujas directamente, pero sí la usas para decidir:

• el tamaño de cada partícula
• su opacidad

Eso es lo que genera la sensación de profundidad. Las que están delante pesan más, las del fondo desaparecen.

Movimiento orgánico con Perlin Noise

Si dejas la esfera tal cual, es perfecta… pero es aburrida. Para romper eso, entra el Perlin Noise en 3D. A diferencia del random típico, aquí todo fluye. No hay saltos, hay continuidad. Lo que hice fue trabajar con varias capas (octavas):

• Las frecuencias bajas marcan el movimiento global, como si la esfera respirase
• Las altas añaden ese detalle pequeño que hace que todo se sienta más natural

Es ese mix lo que evita que parezca un simple loop.

Donde entra el UX, el comportamiento de partículas

Aquí es donde deja de ser solo visual y empieza a ser interacción.

No quería que todas las partículas reaccionasen igual.
Quería que se sintieran distintas.

• Particulas del Color 1
  Se comportan de forma “curiosa”. Se acercan al ratón, pero no en línea recta.
  Cada una tiene su propio caos, como si fueran organismos.
• Partículas del Color 2
  Justo lo contrario. Se alejan del cursor de forma limpia, directa.
  Más predecibles, más “frías”.

Y luego está el detalle importante:

• Efecto muelle
  Cuando el cursor se va, nada vuelve de golpe.
  Todo tiene inercia, fricción… y vuelve poco a poco a su sitio.

Ese pequeño detalle cambia completamente la sensación.

Cómo llevarlo a código (sin perder semanas)

Aquí es donde todo esto se vuelve interesante de verdad.

No necesitas dominar toda la parte técnica para empezar a construir cosas así. Puedes definir bien la lógica, el comportamiento, la estética… y dejar que la IA te genere la base.

Luego ajustas.

Si quieres montarlo tú, este sería un buen punto de partida:

El Prompt

Crea una animación en canvas HTML/JS con una esfera 3D formada solo por partículas (sin líneas).

Estética:

• Fondo negro (#050508) con un ligero ruido tipo film
• Partículas alternando verde (#BCF448) y violeta (#8A38F5) - *Sustituye por los colores que quieras

Comportamiento:

• Deformación orgánica con Perlin noise en 3D (varias octavas)
• Rotación lenta en eje Y
• Profundidad: partículas frontales más grandes y visibles, traseras más pequeñas y transparentes

Interacción (radio ~160px):

• Color 1→ se atraen al cursor con movimiento orgánico e individual
• Color 2→ se repelen de forma directa
• Al salir del radio → vuelven con efecto resorte y fricción

Encapsular en un IIFE, buscar un contenedor #animation y hacer el canvas responsive.

Conclusión

Este tipo de pruebas cambian bastante el juego.

Antes veías algo así y lo dejabas pasar.
Ahora puedes desmontarlo, entenderlo y reconstruirlo a tu manera.

Para mí va de tener menos barrera técnica y más foco en los detalles. Cómo se mueve, cómo responde, qué sensación transmite y como lo percibe el usuario final.

Poder pasar de la idea a algo tangible sin quedarte atascado en el proceso es el cambio más importante para equipos pequeños y freelance.