DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
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 = 5)
            v = 0;

        for (var i = 0; i 

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 

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 


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Librería para gestos

Librería para gestos

FastClick para eliminar el delay de los 300ms

FastClick para eliminar el delay de los 300ms

Metaballs con JavaScript

Metaballs con JavaScript

Algunos artículos que te pueden interesar

La API Battery (Batería) en HTML5

La API Battery (Batería) en HTML5

La API de la batería en JavaScript provee información sobre el nivel de carga actual del dispositivo.

Andrés Cruz 17-11-2014

Geolocalización con JavaScript

Geolocalización con JavaScript

Con la geolocalización podemos conocer la ubicación geográfica del usuario.

Andrés Cruz 01-09-2013

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