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

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Botón flotante

Botón flotante

Algunos artículos que te pueden interesar

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

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

Cómo emplear la cámara y la galería con Phonegap

Cómo emplear la cámara y la galería con Phonegap

Se explica emplear la cámara de un dispositivo con PhoneGap y además cómo seleccionar una foto o imagen que tengamos en nuestro dispositivo empleando la galería con JavaScript.

Andrés Cruz 24-04-2017