DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

16-11-2015

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();
        }
    }

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Wave World con Canvas

Wave World con Canvas

Atomo con CSS

Atomo con CSS

Esfera de agrupación

Esfera de agrupación

Algunos artículos que te pueden interesar

Usando la API de Visibilidad de Página  en JavaScript

Usando la API de Visibilidad de Página en JavaScript

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios.

Andrés Cruz 09-03-2015

Escalado y recortando imágenes con Canvas

Escalado y recortando imágenes con Canvas

Con Canvas es posible escalar e incluso recortar imágenes dibujadas en el lienzo (en el Canvas) todo con sólo una función llamada drawImage().

Andrés Cruz 05-05-2014

Dibujando puntos al azar con Canvas

Dibujando puntos al azar con Canvas

En este artículo dibujaremos un montón de esferas cuyas posiciones son al azar a través de un Canvas.

Andrés Cruz 11-04-2014