Cómo crear anillos de circulos en JavaScript y Canvas

En esta entrada veremos cómo crear un sencillo sistema de anillos de círculos como el siguiente:

Nuevamente haremos uso de varias operaciones matemáticas (entre ellas las funciones seno y coseno para determinar las posición X y Y de los círculos dado el ángulo) y nuevamente la función requestAnimationFrame() introducida en una entrega anterior llamada: EL SECRETO DE LAS ANIMACIONES EN JAVASCRIPT, el elemento Canvas y un poco de JavaScript manteniendo el HTML al mínimo al igual que ocurrió en las entradas anteriores:

Construyendo nuestro sistema de círculos con Canvas y JavaScript

Al igual que en otras entradas, primero mostramos la totalidad del código empleado:

    var c = document.getElementById('canv');
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;
    var $ = c.getContext('2d');
    var v = 0; // velocidad
    var dst = 100; // cercania
    var rings = 10; // numero de anillos de circulos
    var circs = 20; // numero de circulos
    var dosPi = Math.PI * 2; // dos veces PI

    window.addEventListener('resize', function () {
        c.width = window.innerWidth;
        c.height = window.innerHeight;
    }, false);

 function draw(ang) {
        var col = -80;
        for (var u = 0; u < rings; u++) {
            sd = Math.pow(u, 3) + dst; // distancia entre los anillos de circulos

            x = w / 2 + Math.cos(ang) * sd;
            y = h / 2 + Math.sin(ang) * sd;
            s = sd / 10;
            $.fillStyle = 'hsla(' + col * (u) + ',100%, 50%, 1)';
            $.beginPath();
            $.arc(x, y, s, 0, dosPi);
            $.fill();
        }
}

function go() {
        $.fillStyle = 'hsla(0,0%,0%,.08)';
        $.fillRect(0, 0, w, h);
        v += 0.02;

        if (v >= 5)
            v = 0;

        for (var i = 0; i < circs; i++) {
            ang = (v + (i / circs * dosPi));
            draw(ang);
        }

        window.requestAnimationFrame(go);
}
    go()

Analizando el código JavaScript anterior

Nuevamente se presenta una breve explicación de las secciones más importantes del JavaScript anterior.

Variables globales

Declaramos las variables globales para nuestro experimento, aquellas que permiten acceder al Canvas y su contexto:

    var c = document.getElementById('canv');
    var c = document.getElementById('canv');
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;
    var $ = c.getContext('2d');
    var v = 0; // velocidad
    var dst = 100; // cercania
    var rings = 10; // numero de anillos de circulos
    var circs = 20; // numero de circulos
    var dosPi = Math.PI * 2; // dos veces PI

La variable dosPi es empleada para el cálculo de los angulos del circulo en radianes; por ahora no te preocupes mucho de esto, más adelante daré un enlace en el cual puedes detallar la información anterior.

Calculando el ángulo y estableciendo la animación

La primera función a ejecutar luego de cargar toda la página web, es la función llamada go(); esta función se encarga de calcular los ángulos de los círculos y así poder ubicarlos dentro del anillo:

function go() {
        $.fillStyle = 'hsla(0,0%,0%,.08)';
        $.fillRect(0, 0, w, h);
        v += 0.02;

        if (v >= 5)
            v = 0;

        for (var i = 0; i < circs; i++) {
            ang = (v + (i / circs * dosPi));
            draw(ang);
        }

        window.requestAnimationFrame(go);
}

Ademas de esto, también animamos el Canvas mediante la función requestAnimationFrame que invoca recursivamente a esta función go().

La función go también pinta el característico recuadro negro transparente para crear los halos de los círculos.

El cálculo:

ang = (v + (i / circs * dosPi));

Permite calcular el ángulo en radianes de la Circunferencia unidad aunque ya esto se escapa un poco de la temática de esta entrada la cual es mostrar cómo crear anillos de circulos en JavaScript y Canvas; si quieres saber más, reviza el enlace anterior.

Como podrás haberte dado cuenta, simplemente vamos recorriendo el círculo -anillo- en donde el valor de la variable dosPi (el cual es dos veces el valor de PI, algo así como 6.282) representa una vuelta completa a la circunferencia.

En resumen, vamos calculando el ángulo para colocar en forma de anillo los distintos círculos al recorrer el ángulo desde 0 a dos veces el valor de PI.

Es como dibujar círculos dentro de un círculo (anillo).

Dibujando los círculos

Una vez que tenemos el ángulo debemos aplicar las funciones de coseno y seno para obtener la posición en donde vamos a colocar los círculos que empleamos para dibujar la posición de los pequeños círculos que forman el anillo en la función draw():

x = w / 2 + Math.cos(ang) * sd;
y = h / 2 + Math.sin(ang) * sd;

La variable v es empleada para animar los anillos de círculos, mientras más grande sea el valor incremental de la variable, mayor será el ángulo y por lo tanto mayor será el desplazamiento del círculo y será más rápida la animación.

Una vez que tenemos el ángulo en donde dibujar los círculos procedemos a calcular la posición exacta y de dibujar un círculo en un anillo por vez:

 function draw(ang) {
        var col = -80;
        for (var u = 0; u < rings; u++) {
            sd = Math.pow(u, 3) + dst; // distancia entre los anillos de circulos

            x = w / 2 + Math.cos(ang) * sd;
            y = h / 2 + Math.sin(ang) * sd;
            s = sd / 10;
            $.fillStyle = 'hsla(' + col * (u) + ',100%, 50%, 1)';
            $.beginPath();
            $.arc(x, y, s, 0, dosPi);
            $.fill();
        }
}

Ver ejemplo

Canvas

JavaScript

Animación

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy