Creando Partículas con JavaScript y Canvas: Guía Moderna (ES6)

Ver ejemplo

Los sistemas de partículas son fundamentales en el desarrollo de videojuegos y efectos visuales en la web. En esta guía actualizada, aprenderás a crear un sistema de partículas dinámico utilizando JavaScript moderno (ES6+) y el elemento <canvas> de HTML5.

Estructura del Sistema de Partículas

Para modernizar nuestro código, utilizaremos clases de JavaScript. Esto hace que el código sea más legible, organizado y fácil de escalar. A continuación, el código completo optimizado:

const canvas = document.getElementById("canvas-club");
const ctx = canvas.getContext("2d");

// Ajuste dinámico del tamaño del canvas
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;

const particles = [];
const maxParticles = 100;
const size = 5;
const r = size / 2;
const clearColor = "rgba(0, 0, 0, 0.1)";

const random = (min, max) => Math.random() * (max - min) + min;

class Particle {
    constructor() {
        this.init();
    }

    init() {
        this.x = random(0, w - size);
        this.y = h + random(0, 20);
        this.vx = 0;
        this.vy = random(-1, -2);
    }

    draw() {
        const hue = (h - this.y) * 0.6;
        ctx.fillStyle = `hsla(${hue}, 100%, 50%, 0.8)`;
        ctx.beginPath();
        ctx.arc(this.x + r, this.y + r, r, 0, 2 * Math.PI);
        ctx.fill();
    }

    update() {
        this.x += this.vx;
        this.y += this.vy;
        this.vx *= 1.15;

        // Agregar un comportamiento aleatorio cuando suben
        if (this.y < h * 0.8 && Math.random() > 0.5) {
            this.vx = random(-1, 1);
            this.vy -= 0.05;
        }

        // Reiniciar partícula cuando sale de la pantalla
        if (this.y + 50 < 0) {
            this.init();
        }
    }
}

function setup() {
    for (let i = 0; i < maxParticles; i++) {
        setTimeout(() => {
            particles.push(new Particle());
        }, i * 100);
    }
}

function animate() {
    // El "truco" de la estela: no limpiamos el canvas por completo
    ctx.fillStyle = clearColor;
    ctx.fillRect(0, 0, w, h);

    for (const p of particles) {
        p.draw();
        p.update();
    }

    requestAnimationFrame(animate);
}

// Escuchar cambios de tamaño de ventana
window.addEventListener('resize', () => {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
});

setup();
animate();

Análisis de la Implementación Moderna

A diferencia de las técnicas de 2014, hoy aprovechamos las mejoras del lenguaje para que el navegador procese los gráficos de forma más eficiente.

• Uso de Clases (Class): Encapsulamos la lógica de cada partícula en una clase Particle, facilitando la creación de múltiples instancias con sus propias propiedades de posición y velocidad.
• Ciclo de Animación Eficiente: Usamos requestAnimationFrame en lugar de setInterval. Esto sincroniza la animación con la tasa de refresco del monitor (normalmente 60fps), ahorrando batería y CPU.
• Gestión de Memoria: Al usar let y const, evitamos fugas de memoria y errores de hoisting comunes en versiones antiguas de JavaScript.

Conceptos Clave de Renderizado

El efecto de "Estela" o Cola

Uno de los efectos más visuales en este sistema es la cola que dejan las partículas. Esto se logra pintando un rectángulo semitransparente sobre todo el lienzo en cada frame:

ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, w, h);

Esto no borra las partículas anteriores de inmediato, sino que las va "oscureciendo" progresivamente, creando una sensación de movimiento fluido.

Optimización SEO y Rendimiento

Para que un sistema de partículas sea usable en producción, debemos considerar el rendimiento (Performance).

1. Limitar el número de partículas: Dibujar miles de círculos puede ralentizar dispositivos móviles. 100-200 partículas suelen ser suficientes para efectos visuales impactantes.
2. Uso de HSLA: El modelo de color hsla() es ideal para animaciones porque permite variar el tono (hue) de forma matemática, creando degradados naturales según la posición de la partícula.
3. Responsive Design: Hemos añadido un EventListener para el evento resize, asegurando que el sistema de partículas cubra toda la pantalla incluso si el usuario cambia el tamaño del navegador o rota su dispositivo.

Si te interesa profundizar más en los efectos visuales con código, te recomiendo leer sobre cómo crear un punto luminoso con JavaScript y Canvas, lo cual puede complementar perfectamente este sistema de partículas.

Conclusión

Crear partículas con JavaScript y Canvas es una excelente forma de practicar lógica de programación y matemáticas aplicadas. Con esta base, puedes añadir gravedad, interacción con el ratón o incluso texturas personalizadas para llevar tus interfaces al siguiente nivel.