¿Cómo funcionan las partículas en JavaScript?

¿Qué son las partículas que vemos en algunas páginas web?

Cuando visitas una página y observas pequeños puntos moviéndose por todo el fondo, posiblemente estás viendo un sistema de partículas.

Una partícula no suele ser un elemento HTML independiente. Normalmente es un objeto que contiene información como su posición, velocidad y otras propiedades necesarias para dibujarla y actualizarla durante la animación.

La idea general puede representarse así:

Partículas
 ->
JavaScript
 ->
Canvas
 ->
Pantalla

1. ¿Dónde se dibujan las partículas?

Una forma habitual de crear este efecto es utilizar un elemento <canvas> que cubra la zona donde queremos mostrar la animación.

JavaScript obtiene su contexto de dibujo y lo utiliza para representar las partículas.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

El canvas actúa como una superficie de dibujo. Las partículas se representan sobre esa superficie mediante instrucciones de JavaScript.

2. Cada partícula tiene una posición

Para dibujar una partícula necesitamos conocer dónde se encuentra.

Una representación sencilla puede guardar coordenadas x y y:

const particula = {
 x: 100,
 y: 50
};

Estas coordenadas indican la posición de la partícula dentro del sistema de referencia del canvas.

Cuando existen muchas partículas, normalmente se almacenan dentro de un arreglo:

const particulas = [];

Cada elemento del arreglo representa una partícula independiente.

3. ¿Cómo se mueven?

Para producir movimiento necesitamos modificar la posición de las partículas con el paso del tiempo.

Una forma básica consiste en almacenar una velocidad horizontal y vertical:

const particula = {
 x: 100,
 y: 50,
 vx: 1,
 vy: 0.5
};

Después, durante cada actualización de la animación, se modifica su posición:

particula.x += particula.vx;
particula.y += particula.vy;

La velocidad determina cuánto cambia la posición en cada actualización.

4. El ciclo de animación

El efecto de partículas necesita actualizarse y dibujarse continuamente.

Podemos imaginar el proceso de esta manera:

Inicio
 ->
Actualizar posiciones
 ->
Limpiar canvas
 ->
Dibujar partículas
 ->
Siguiente frame
 ->
Actualizar posiciones
 ->
...

En JavaScript, una función de animación puede programarse utilizando requestAnimationFrame() para solicitar el siguiente cuadro de la animación.

function animar() {
 // actualizar partículas
 // dibujar partículas

 requestAnimationFrame(animar);
}

animar();

El navegador se encarga de solicitar nuevas oportunidades para ejecutar la función de animación.

5. Primero se limpia y después se vuelve a dibujar

En cada cuadro, las partículas deben representarse en su nueva posición.

Por eso es habitual limpiar el contenido anterior del canvas antes de dibujar el nuevo estado.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Después se recorren las partículas y se dibuja cada una en sus coordenadas actuales.

for (const particula of particulas) {
 // dibujar particula
}

Esto produce la sensación de movimiento porque cada cuadro muestra las partículas en una posición diferente.

6. ¿Cómo se dibuja una partícula?

Una partícula puede representarse de diferentes maneras. Una opción sencilla es utilizar un círculo.

ctx.beginPath();
ctx.arc(particula.x, particula.y, 2, 0, Math.PI * 2);
ctx.fill();

Aquí particula.x y particula.y determinan la posición del círculo y el tercer argumento de arc() determina su radio.

El aspecto final depende de las propiedades utilizadas al dibujarla.

7. ¿Por qué parecen aparecer por todo el body?

Cuando el efecto ocupa visualmente toda la página, el canvas puede colocarse para cubrir toda el área que se quiere utilizar como fondo.

El sistema de partículas sigue dibujándose dentro de ese canvas. El hecho de que parezca formar parte del body depende de cómo esté colocado y dimensionado el elemento dentro de la página.

La relación conceptual puede verse así:

body
 |
 +-- contenido HTML
 |
 +-- canvas de partículas
 |
 +-- partícula 1
 +-- partícula 2
 +-- partícula 3
 +-- ...

El canvas proporciona la superficie donde se representa el efecto.

8. Las partículas pueden tener diferentes propiedades

Un sistema de partículas no tiene por qué utilizar únicamente posición y velocidad.

Cada partícula puede almacenar otras propiedades que controlen la forma en que será dibujada o actualizada.

Por ejemplo:

const particula = {
 x: 100,
 y: 50,
 vx: 1,
 vy: 0.5,
 radio: 2
};

La estructura concreta depende de lo que necesite implementar el efecto.

9. ¿Y esas líneas que conectan los puntos?

En algunos efectos, además de dibujar puntos, se trazan líneas entre partículas que se encuentran suficientemente cerca.

El principio consiste en comparar la distancia entre partículas.

De forma conceptual:

Partícula A ----- Partícula B
 distancia
 <= límite
 |
 v
 dibujar línea

Para realizar esa comprobación pueden utilizarse las coordenadas de las partículas y una fórmula de distancia entre puntos.

Si la distancia está dentro del límite establecido, JavaScript puede dibujar una línea entre ambas posiciones utilizando el contexto del canvas.

10. El efecto completo es una combinación de varias operaciones

El efecto visual que vemos en una página no proviene de una sola instrucción de JavaScript.

Normalmente existe una estructura formada por varias partes:

Crear partículas
 ->
Guardar partículas
 ->
Actualizar posiciones
 ->
Comprobar límites
 ->
Limpiar canvas
 ->
Dibujar partículas
 ->
Dibujar conexiones, si existen
 ->
Repetir

Cada cuadro de la animación representa un nuevo estado del sistema.

11. ¿Qué ocurre cuando una partícula sale de la pantalla?

El código puede definir qué sucede cuando una partícula alcanza los límites del área de dibujo.

Dependiendo de la implementación, puede eliminarse, volver a aparecer desde otro punto o cambiar su dirección al alcanzar un límite.

Lo importante es que ese comportamiento debe formar parte de las reglas que utiliza el sistema para actualizar las partículas.

12. JavaScript controla el estado, Canvas muestra ese estado

Una forma útil de entender este efecto es separar ambas responsabilidades.

JavaScript mantiene y modifica los datos de las partículas. El canvas proporciona la superficie donde esos datos se representan visualmente.

Podemos imaginarlo así:

Estado
x, y, vx, vy...
 |
 v
JavaScript actualiza
 |
 v
Canvas dibuja
 |
 v
Usuario ve la animación

Por eso una partícula puede entenderse como datos que cambian con el tiempo y que después son representados gráficamente.

Consideraciones

Los efectos de partículas que aparecen como fondo de algunas páginas web suelen construirse mediante un conjunto de objetos que representan partículas, un ciclo de animación que actualiza sus propiedades y una superficie de dibujo como canvas donde se representan.

El movimiento aparece porque la posición de cada partícula cambia continuamente y el canvas se vuelve a dibujar en cada cuadro. A partir de esa estructura básica pueden añadirse reglas adicionales, como límites de movimiento o líneas entre partículas cercanas.

La idea fundamental es sencilla: JavaScript mantiene y actualiza el estado de las partículas, mientras que canvas se encarga de representar visualmente ese estado en cada cuadro de la animación.