Simulación de Partículas Interactiva a 60 FPS con Canvas 2D, Físicas Vectoriales y Batching Optimizado

JAVASCRIPT 22 de junio de 2026 118 lecturas
Aprende a implementar un motor cinético de partículas a 60 FPS en HTML5 Canvas con optimización algebraica de vectores, soporte High-DPI y batching de trazados.

El Cuello de Botella del Renderizado Gráfico en la Web Moderna

Durante los primeros años del desarrollo web, la creación de efectos visuales interactivos dependía casi exclusivamente de la manipulación del Document Object Model (DOM). Los desarrolladores solían posicionar elementos <div> mediante hojas de estilo CSS utilizando coordenadas absolutas o transformaciones matriciales. Si bien esta aproximación es completamente válida para animaciones de interfaz sencillas o transiciones de pocos elementos, colapsa inevitablemente cuando la escala del sistema se incrementa a cientos o miles de entidades independientes.

Cada vez que se modifica la posición de un nodo del DOM dentro de un bucle de animación, el motor del navegador (como Blink o WebKit) se ve obligado a recalcular la geometría del documento (fase de Reflow o Layout) y reevaluar la composición de las capas de renderizado (fase de Repaint). Este proceso consume rápidamente el presupuesto de tiempo por fotograma, el cual está estrictamente limitado a 16.67 milisegundos para garantizar una frecuencia constante de 60 cuadros por segundo (FPS). La solución arquitectónica ante esta limitación consiste en abstraer el pintado al elemento <canvas> de HTML5, transformando el navegador en un lienzo de renderizado directo controlado por código imperativo.

Arquitectura del Motor Cinemático e Integración de Euler

Para lograr una simulación física que transmita naturalidad y peso visual, implementamos la mecánica clásica basada en el método de integración de Euler implícito. En esta arquitectura, cada partícula es modelada como una entidad matricial dotada de componentes escalares y vectoriales primarios: posición cartesiana $(x, y)$, vectores de velocidad $(vx, vy)$, y coeficientes del entorno como la gravedad y el rozamiento del medio.

En cada ciclo de actualización del bucle principal (Game Loop), la aceleración provocada por la gravedad incrementa linealmente la componente de velocidad vertical ($vy$). A continuación, se aplica un factor de fricción aerodinámica expresado como un coeficiente decimal escalar (por ejemplo, 0.98). Este factor actúa amortiguando gradualmente la energía cinética residual del sistema en cada iteración del tiempo. Por último, la posición física de la partícula se actualiza sumando los componentes vectoriales de velocidad a las coordenadas actuales. Cuando una partícula entra en contacto con las fronteras del área de dibujo, invertimos la dirección del vector cinético multiplicándolo por un coeficiente de restitución elástica (por ejemplo, -0.75), lo que simula una transferencia de energía imperfecta con la superficie de impacto.

Dinámica de Repulsión y Optimización Algebraica Vectorial

La interactividad del usuario se introduce mediante un campo de fuerza repulsivo articulado en torno a las coordenadas del puntero del ratón o pantalla táctil. Al mover el cursor, se proyecta un círculo imaginario de influencia alrededor del mismo. Para cada partícula individual dentro de la simulación, debemos evaluar su proximidad respecto al cursor y aplicar una fuerza de aceleración opuesta.

En implementaciones tradicionales o ingenuas, los desarrolladores suelen calcular la dirección del vector de repulsión utilizando la función trigonométrica Math.atan2(dy, dx) para obtener el ángulo del arco tangente, y posteriormente proyectan dicho ángulo mediante Math.cos() y Math.sin() para desglosar la magnitud en los ejes X e Y. Aunque esta estrategia es matemáticamente impecable, las funciones trascendentes de la librería matemática de JavaScript son computacionalmente costosas cuando se ejecutan miles de veces por segundo en cada fotograma.

La optimización de alto rendimiento consiste en aplicar álgebra vectorial directa: calculamos el vector diferencia $(\Delta x, \Delta y)$ y la distancia euclidiana entre la partícula y el ratón. En lugar de invocar operaciones trigonométricas, obtenemos los cosenos y senos directores dividiendo simplemente cada componente del vector diferencia entre la magnitud escalar de la distancia ($nx = \Delta x / d$, $ny = \Delta y / d$). Este vector unitario normalizado indica la dirección exacta de la repulsión. Adicionalmente, implementamos una verificación previa mediante la distancia al cuadrado ($\Delta x^2 + \Delta y^2 < r^2$), lo que nos permite descartar instantáneamente las partículas lejanas sin ejecutar la costosa operación de raíz cuadrada (Math.sqrt).

Rendimiento Gráfico en Canvas 2D: El Arte del Batching

Más allá de las optimizaciones matemáticas en JavaScript, el cuello de botella más grave en aplicaciones con HTML5 Canvas suele encontrarse en el pipeline de pintado del contexto 2D. Un error común es invocar métodos de dibujo y relleno individualmente por cada entidad dentro del bucle principal, ejecutando ctx.beginPath(), ctx.arc() y ctx.fill() en cada iteración.

Cada llamada a ctx.fill() envía un comando de rasterización independiente a la GPU o subsistema gráfico del navegador. Si tenemos 200 partículas, realizamos 200 operaciones de relleno por fotograma. La técnica de optimización definitiva para este problema se conoce como Batching (agrupamiento de trazados). Al declarar un único ctx.beginPath() antes de iniciar el bucle de partículas, acumular la geometría de cada círculo mediante ctx.arc() y finalmente ejecutar un único ctx.fill() tras iterar todas las entidades, reducimos 200 llamadas de dibujo a solo una. Esta simple reestructuración del código reduce drásticamente los saltos de contexto (Context State Switches) y aumenta el rendimiento visual de la aplicación hasta en un 300%.

Gestión de Pantallas High-DPI y Limpieza del Ciclo de Vida

Para asegurar una fidelidad gráfica impecable en pantallas de alta densidad de píxeles (dispositivos Retina o pantallas 4K/8K), es fundamental escalar el búfer de renderizado del lienzo en proporción al índice window.devicePixelRatio. Si únicamente modificamos el estilo CSS del canvas, el navegador estirará los píxeles renderizados causando un aspecto borroso. La solución técnica consiste en igualar los atributos width y height del canvas multiplicándolos por el DPR del sistema, ajustando simultáneamente la matriz de transformación del contexto mediante ctx.scale(dpr, dpr).

Finalmente, en arquitecturas SPA (Single Page Applications) avanzadas creadas con React, Vue o JavaScript modular, es crucial gestionar limpiamente el ciclo de vida de los listeners de eventos. Si una instancia de animación se destruye sin cancelar la solicitud de requestAnimationFrame y sin remover los escuchadores agregados a window o document, se producirán fugas de memoria severas (Memory Leaks) que degradarán progresivamente la experiencia del usuario.

/**
 * Motor de Simulación de Partículas de Alto Rendimiento
 * Optimizado con Álgebra Vectorial, Batching en Canvas 2D y Soporte High-DPI.
 */

class Particula {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.radio = Math.random() * 3 + 2;
        
        // Vectores cinéticos iniciales
        this.vx = (Math.random() - 0.5) * 3;
        this.vy = (Math.random() - 0.5) * 3;
        
        // Constantes físicas del entorno
        this.gravedad = 0.08;
        this.friccion = 0.98;
        this.coeficienteRestitucion = -0.75;
    }

    actualizar(mouse, width, height) {
        // Integración de Euler implícita
        this.vy += this.gravedad;
        this.vx *= this.friccion;
        this.vy *= this.friccion;

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

        // Detección y respuesta a colisiones en fronteras
        if (this.x + this.radio > width) {
            this.x = width - this.radio;
            this.vx *= this.coeficienteRestitucion;
        } else if (this.x - this.radio < 0) {
            this.x = this.radio;
            this.vx *= this.coeficienteRestitucion;
        }

        if (this.y + this.radio > height) {
            this.y = height - this.radio;
            this.vy *= this.coeficienteRestitucion;
        } else if (this.y - this.radio < 0) {
            this.y = this.radio;
            this.vy *= this.coeficienteRestitucion;
        }

        // Repulsión vectorial optimizada (Sin funciones trigonométricas)
        const dx = this.x - mouse.x;
        const dy = this.y - mouse.y;
        const distSq = dx * dx + dy * dy;
        const maxDistSq = mouse.radioEfecto * mouse.radioEfecto;

        // Comprobación cuadrática rápida
        if (distSq < maxDistSq && distSq > 0) {
            const distancia = Math.sqrt(distSq);
            const fuerza = (mouse.radioEfecto - distancia) / mouse.radioEfecto;
            
            // Vectores unitarios normalizados (nx, ny)
            const nx = dx / distancia;
            const ny = dy / distancia;
            
            this.vx += nx * fuerza * 2.5;
            this.vy += ny * fuerza * 2.5;
        }
    }
}

class SandboxParticulas {
    constructor(canvasId) {
        this.canvas = document.getElementById(canvasId);
        if (!this.canvas) {
            throw new Error(`No se encontró el elemento Canvas con ID: ${canvasId}`);
        }

        this.ctx = this.canvas.getContext('2d');
        this.particulas = [];
        this.numeroParticulas = 200;
        this.dpr = window.devicePixelRatio || 1;

        this.mouse = { x: -1000, y: -1000, radioEfecto: 130 };
        this.animFrameId = null;

        // Binding explícito de métodos para gestión limpia de memoria
        this.handleResize = this.handleResize.bind(this);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.handleMouseLeave = this.handleMouseLeave.bind(this);
        this.loop = this.loop.bind(this);

        this.init();
    }

    init() {
        this.ajustarPantalla();
        this.crearParticulas();
        this.registrarEventos();
        this.loop();
    }

    ajustarPantalla() {
        const rect = this.canvas.getBoundingClientRect();
        this.width = rect.width;
        this.height = rect.height || 450;

        this.dpr = window.devicePixelRatio || 1;
        this.canvas.width = this.width * this.dpr;
        this.canvas.height = this.height * this.dpr;
        
        // Reseteo de la matriz para evitar escalas acumulativas
        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
        this.ctx.scale(this.dpr, this.dpr);
    }

    crearParticulas() {
        this.particulas = [];
        for (let i = 0; i < this.numeroParticulas; i++) {
            const x = Math.random() * (this.width - 20) + 10;
            const y = Math.random() * (this.height - 20) + 10;
            this.particulas.push(new Particula(x, y));
        }
    }

    handleResize() {
        this.ajustarPantalla();
    }

    handleMouseMove(e) {
        const rect = this.canvas.getBoundingClientRect();
        this.mouse.x = e.clientX - rect.left;
        this.mouse.y = e.clientY - rect.top;
    }

    handleMouseLeave() {
        this.mouse.x = -1000;
        this.mouse.y = -1000;
    }

    registrarEventos() {
        window.addEventListener('resize', this.handleResize);
        this.canvas.addEventListener('mousemove', this.handleMouseMove);
        this.canvas.addEventListener('mouseleave', this.handleMouseLeave);
    }

    loop() {
        // Fondo con efecto de estela (Motion Blur)
        this.ctx.fillStyle = 'rgba(10, 10, 14, 0.25)';
        this.ctx.fillRect(0, 0, this.width, this.height);

        // CONFIGURACIÓN GLOBAL DE ESTILOS DE CONTEXTO
        this.ctx.fillStyle = 'rgba(0, 243, 255, 0.85)';
        this.ctx.shadowBlur = 8;
        this.ctx.shadowColor = '#00f3ff';

        // BATCHING DE TRAZADOS: Un único Path antes del bucle
        this.ctx.beginPath();

        for (let i = 0; i < this.particulas.length; i++) {
            const p = this.particulas[i];
            p.actualizar(this.mouse, this.width, this.height);

            // Mover la pluma al inicio del círculo para evitar conexiones de línea implícitas
            this.ctx.moveTo(p.x + p.radio, p.y);
            this.ctx.arc(p.x, p.y, p.radio, 0, Math.PI * 2);
        }

        // Operación única de renderizado para todas las entidades (1 Draw Call)
        this.ctx.fill();

        this.animFrameId = requestAnimationFrame(this.loop);
    }

    destruir() {
        if (this.animFrameId) {
            cancelAnimationFrame(this.animFrameId);
        }
        window.removeEventListener('resize', this.handleResize);
        this.canvas.removeEventListener('mousemove', this.handleMouseMove);
        this.canvas.removeEventListener('mouseleave', this.handleMouseLeave);
        this.particulas = [];
    }
}

// Inicialización del Sandbox al cargar la estructura del documento
document.addEventListener('DOMContentLoaded', () => {
    const sandbox = new SandboxParticulas('canvas-sandbox');
});
¿Qué te pareció?
🔥 Brillante 0
💡 Me sirvió 0
🚀 A otro nivel 0

Sugerencias para ti

Snippet

Cómo Crear una Tarjeta Glassmorphism con Efecto Neón Avanzado en CSS3

👁️ 199 vistas
Snippet

Construcción de APIs REST Escalables con Express, Node.js y PostgreSQL: Patrones Avanzados de Conexiones y Seguridad

👁️ 168 vistas
Snippet

Middleware de Idempotencia Estricta en Node.js y Express para Transacciones Críticas

👁️ 91 vistas

¿Te resultó útil este snippet? Explora más código y soluciones en AndresSY.dev.

Volver a Snippets