Particles: Creando arte con programación

Te enseño un pequeño proyecto muy visual, que son partículas que se mueven libremente y se enlazan entre sí, generando formas geométricas. El proyecto lo he realizado con Typescript, Vite y P5.

Todo surge porque vi un fondo de un vídeo que tenía este tipo de partículas, y me imagíne cómo sería el algoritmo para realizarlo, y por qué no, echar una tarde picando algo de código.

El resultado lo puedes ver en particles.pirobits.com y el código open source en Github/pirobtumen/particles.

Tecnologías empleadas

El proyecto quería que fuese lo más sencillo posible, por lo que he usado HTML, CSS y JS vanilla. Muchas veces añadimos complejidad extra con frameworks o patrones de diseño que no son necesarios. Quería algo funcional y simple.

Para desarrollo local he utilizado Vite.js ya que ofrece algunas características interesantes como HMR (Hot Module Reload) o Rollup para builds. Además Vite te permite generar un proyecto con Typescript, que me encanta ya que puedes definir los tipos y tener más control sobre el código que generas.

Por último me falta una librería gráfica para trabajar. Podría usar el canvas nativo, pero me acordé que hay una alternativa como processing para la web, p5.js.

Me ha sorprendido lo fácil que ha sido crear el efecto que quería, ya que con apeans unas pocas líenas de código la librería p5 te permite realizar mucha funcionalidad.

Algoritmo de generación

El algoritmo de generación de cada frame es sencillo:

1. Inicializo un array de partículas.
2. Cada particula tiene una posición (x, y), un tamaño (s) y una dirección (xDir, yDir).
3. En cada iteración se repinta el fondo, se pinta cada partícula y se pintan vectores entre cada dos puntos.
   1. Para cada pareja de partículas, se pinta una línea entre ellas si están dentro de un radio.
   2. La opacidad del enlace es proporcional a su distancia.
   3. Tras la iteración, cada partícula se mueve en la dirección del vector (xDir, yDir) dividido entre un factor para controlar la velocidad.

Añadí algunas mejoras como que las partículas reboten al chocar contra los bordes, o tener unos sliders para controlar los parámetros.

Es un proyecto hecho en una tarde que tiene muchas mejoras: algoritmo para pintar enlaces, mejorar el rebote, unir clusters, que no haya partículas sueltas...

Generando una web

Una vez tengo el proyecto listo, ajusto los estilos y preparo una pequeña web para poder usarlo en mobile (esta parte se puede mejorar también). Para despelegarlo he utilizado Vercel junto con Cloudflare para los DNS, hablaremos de ello en otros posts.