Cómo crear anillos de círculos animados con JavaScript y Canvas (ES6+)

Ver ejemplo en vivo

En este tutorial aprenderemos a crear un sistema dinámico de anillos de círculos usando JavaScript y la API de Canvas. Este tipo de animaciones son fundamentales para entender cómo manipular gráficos en el navegador y cómo aplicar conceptos matemáticos básicos en el desarrollo web creativo.

Para seguir esta guía, es recomendable que tengas nociones sobre las bases del Canvas en HTML5. Utilizaremos trigonometría (seno y coseno) para posicionar los elementos y la eficiente función requestAnimationFrame(), de la cual hablamos a fondo en nuestro artículo sobre el secreto de las animaciones en JavaScript.

Construyendo el sistema de círculos con Canvas y ES6

A continuación, presentamos el código completo y modernizado. Hemos pasado de utilizar var a usar const y let para mejorar el manejo del scope y evitar errores comunes en JavaScript moderno.

const canvas = document.getElementById('canv');
const ctx = canvas.getContext('2d');
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;

let velocity = 0;
const baseDistance = 100;
const ringsCount = 10;
const circlesPerRing = 20;
const TWO_PI = Math.PI * 2;

// Ajuste dinámico al cambiar el tamaño de la ventana
window.addEventListener('resize', () => {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
}, false);

function drawRings(angle) {
    const baseColorShift = -80;
    
    for (let i = 0; i < ringsCount; i++) {
        // Cálculo de la distancia entre anillos usando potencias para un efecto expansivo
        const ringDistance = Math.pow(i, 3) + baseDistance;
        
        // Uso de coordenadas polares (Seno y Coseno)
        const x = w / 2 + Math.cos(angle) * ringDistance;
        const y = h / 2 + Math.sin(angle) * ringDistance;
        const radius = ringDistance / 10;

        ctx.fillStyle = `hsla(${baseColorShift * i}, 100%, 50%, 1)`;
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, TWO_PI);
        ctx.fill();
    }
}

function animate() {
    // Fondo con transparencia para crear el efecto de rastro (motion blur)
    ctx.fillStyle = 'hsla(0, 0%, 0%, 0.08)';
    ctx.fillRect(0, 0, w, h);

    velocity += 0.02;
    if (velocity >= 5) velocity = 0;

    for (let i = 0; i < circlesPerRing; i++) {
        const angle = velocity + (i / circlesPerRing * TWO_PI);
        drawRings(angle);
    }

    window.requestAnimationFrame(animate);
}

animate();

Análisis del código y conceptos clave

Para entender cómo funciona esta animación, debemos desglosar la lógica detrás de la posición de los círculos y el uso de colores dinámicos.

El poder de las coordenadas polares

El corazón de esta animación reside en convertir coordenadas polares (ángulo y distancia) en coordenadas cartesianas (X e Y).

const x = centroX + Math.cos(angulo) * distancia;
const y = centroY + Math.sin(angulo) * distancia;

Al incrementar el ángulo constantemente mediante la variable velocity, logramos que los círculos giren alrededor del centro del Canvas. Si quieres profundizar en este tema, te recomiendo revisar el concepto de Circunferencia unidad.

Animación fluida y rastro visual

En lugar de limpiar el Canvas por completo en cada frame con clearRect(), dibujamos un rectángulo negro con una opacidad muy baja (0.08). Esto permite que los frames anteriores no desaparezcan instantáneamente, creando esos elegantes halos o "trails" que dan una sensación de fluidez y modernidad a la animación.

Colores dinámicos con HSLA

Utilizamos el formato HSLA (Hue, Saturation, Lightness, Alpha) en lugar de RGB o Hexadecimal. Esto nos facilita cambiar el color (Hue) simplemente multiplicando un índice, lo que genera un arcoíris perfecto a medida que los anillos se expanden:

ctx.fillStyle = `hsla(${colorBase * i}, 100%, 50%, 1)`;

Cómo personalizar tu animación

Este código es altamente modular. Aquí tienes algunas ideas para experimentar:

• Densidad: Cambia ringsCount para añadir más niveles de profundidad.
• Velocidad: Modifica el incremento de velocity += 0.02. Un valor menor hará la animación más relajante.
• Interactividad: Podrías vincular la variable baseDistance a la posición del mouse para que los anillos se expandan o contraigan al mover el cursor.

Ver ejemplo finalizado

Si te ha gustado este experimento gráfico, el siguiente paso lógico es aprender cómo crear una hermosa animación de partículas con HTML Canvas, donde llevamos estos conceptos al siguiente nivel.