DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
02-11-2015

En esta entrada veremos cómo crear una onda como la siguiente:

Para esto usaremos el elemento Canvas provista por HTML5 y la función llamada Window.requestAnimationFrame() introducida en una entrega anterior llamada: EL SECRETO DE LAS ANIMACIONES EN JAVASCRIPT (REQUESTANIMATIONFRAME()); recordando un poco el uso de la función Window.requestAnimationFrame(), permite animar figuras dibujadas en un elemento Canvas; en otras palabras:

Con la función requestAnimationFrame() se obtienen transiciones o cambios suaves a través de una API que se encuentra optimizado para trabajar con el Canvas.

Para más información, vea el enlace anterior.

Construyendo la onda (JavaScript)

El JavaScript es en realidad corto y sencillo; pero a su vez puede resultar algo enredado debido a las operaciones matemáticas de sumas y divisiones pero trataré de explicarlo de la manera más sencilla.

Antes de mostrar el código es necesario recordar la función seno o coseno que seguramente viste en el colegio y universidad; estas funciones son como olas que vienen y van:

función Coseno

Imagen obtenida de: Coseno.

La función coseno o seno nos viene de maravilla para realizar este experimento y esto es debido a su efecto de ola u onda que poseen; si no recuerdas que son estas funciones en Internet conseguirás bastante material al respecto.

Volviendo a la aplicación de estas funciones en JavaScript tenemos que:

Finalmente les presento el código JavaScript completo:

    var c = document.getElementById('canv');
    var $ = c.getContext('2d');

    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;

    var draw = function(t) {
      $.lineWidth = 1;
      $.fillStyle = 'rgb(0, 0, 0)';
      $.fillRect(0, 0, w, h);

      for (var i = -60; i requestAnimationFrame(run);
      t += 5;
      draw(t);
    };

    run();

Como podrás imaginar, el HTML consisten en una simple etiqueta Canvas.

Algunas consideraciones sobre el JavaScript anterior

Primero Inicializamos algunas variables globales para obtener acceso al elemento Canvas, su contexto y dimensiones:

    var c = document.getElementById('canv');
    var $ = c.getContext('2d');
    var w = c.width = window.innerWidth;
    var h = c.height = window.innerHeight;

Dentro de la función draw()

Definimos algunos estilos a las líneas que vamos a pintar:

    $.lineWidth = 1;
    $.fillStyle = 'rgb(0, 0, 0)';
    $.fillRect(0, 0, w, h);
    $.strokeStyle = 'rgb(255, 255, 255)';

Este primer for permite dibujar un conjunto de líneas en paralelo; al variar la cota inferior y superior podemos crear ondas más o menos anchas; además este for se encarga de inicializar componentes necesarios para pintar líneas.

    for (var i = -60; i 

En otras palabras, si este for no estuviera, nuestra onda se vería como un látigo:

Onda látigo

El siguiente código es un for anidado que pinta w líneas por vez; en donde w es el ancho de la pantalla:

    for (var j = 0; j 

Como podrás ver, empleamos múltiples funciones cosenos (Math.cos) para crear un variado efecto onda (y no tan constante como el coseno).

Las divisiones y multiplicaciones por números bajos es para mantener los valores lo más "constantes" posibles y que la onda no vaya a variar de tamaño radicalmente a medida que los valores de los fors (var j y var i) aumenten.

Para tener una animación variada, cada vez que se ejecuta recursivamente la función draw() a través de la función window.requestAnimationFrame(run); se varía el valor de la variable t para tal fin.

Finalmente creamos la función run() la cual es invocada al cargar la página web.

    var run = function() {
              window.requestAnimationFrame(run);
              t += 5;
              draw(t);
            };

Este experimento fué tomado de CodePen: Wind y modificado a gusto.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Esfera de agrupación

Esfera de agrupación

Wave World con Canvas

Wave World con Canvas

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

La API Vibration (Vibración) en HTML5

La API Vibration (Vibración) en HTML5

El método vibrate del objeto navigator permite activar la vibración por hardware de un dispositivo mediante JavaScript.

Andrés Cruz 04-02-2014

¿Cómo cambiar el contraste de una imagen con HTML5?

¿Cómo cambiar el contraste de una imagen con HTML5?

En este artículo veremos cómo aumentar o reducir el contraste de una imagen con HTML5; además hablaremos un poco de como sería el proceso para aumentar el brillo de una imagen; que es un caso similar.

Andrés Cruz 12-05-2014

La API de FullSreen en JavaScript

La API de FullSreen en JavaScript

La API de FullScreen permite presentar una página web o los distintos elementos que forman la misma en pantalla completa o FullScreen.

Andrés Cruz 23-03-2015