Crea un efecto lluvia con JavaScript

¡Cómo avanza la tecnología! Quién iba a decir que a estas alturas podríamos llegar a crear lluvia a nuestro antojo. ¿No te lo crees? Déjame primero que te presente a rainyday.js y verás qué poder tiene JavaScript.

Quién no ha sido pupilo de aquellos abuelos, que compartiendo su sabiduría acumulada en años de experiencia, nos deleitan con refranes del tipo «Por mayo llueve a rayos» o «Hasta el 40 de mayo no te quites el sayo»... Sin duda que son dichos populares con bases ciertas, pero sinceramente, este pasado mes de mayo no se ha cumplido ni de cerca.

Si eres de los que disfruta viendo llover desde la ventana, Rainyday te hará olvidar estos odiosos días de sol.

Rainyday.js es una biblioteca JavaScript que hace uso del elemento canvas de HTML5 para hacer la animación de unas gotas de lluvia cayendo sobre la superficie de un cristal.

¿Qué necesitamos?

El fichero rainyday.js que encontrarás en el github oficial
Una imagen que representará lo que vemos a través de la ventana

Preparando el terreno

En nuestro html hay que llamar el fichero JavaScript que acabamos de descargar.

 <script src="js/rainyday.js"></script>

El HTML

Necesitamos que al cargar la página se ejecute la función que nos crea la lluvia y una imagen de fondo a la que dejaremos el atributo src vacío de momento.

<body onload="quellueva();">
     <img id="background" alt="background" src="" />
</body>

Empieza la acción

Vamos a invocar la lluvia creando la función quellueva.

function quellueva() {
     var image = document.getElementById('background');
     image.onload = function() {
          var engine = new RainyDay({
               image: this,
               blur: 10,
               opacity: 1,
               gravityAngle: Math.PI / 2,
               gravityAngleVariance: 0
          });
          engine.gravity = engine.GRAVITY_NON_LINEAR;
          engine.trail = engine.TRAIL_SMUDGE;
          engine.rain([ 
               [0, 3, 8], 
               [3, 8, 1]
          ], 50);
      };
      image.crossOrigin = 'anonymous';
      image.src = 'images/bg.jpg';
}

Parámetros personalizados

blur: valor numérico que indica la cantidad de desenfoque aplicada a la imagen de fondo
opacity: valor del 0 al 1 que indica la opacidad de las gotas de agua
gravityAngle: simula el viento modificando el ángulo con el que caen las gotas
gravityAngleVariance: añade cierta aleatoriedad a la caída de las gotas
engine.trail: configura el rastro que deja la gota al caer. Puede tener tres valores: engine.TRAIL_NONE (las gotas de lluvia no dejan rastro mientras caen), engine.TRAIL_SMUDGE (forma una linea de agua) o engine.TRAIL_DROPS (deja un rastro de pequeñas gotas)
engine.gravity: configura el movimiento de la caída de la gota. Puede tener dos valores: engine.GRAVITY_LINEAR; (la gota cae a una velocidad constante) y engine.GRAVITY_NON_LINEAR (la gota cae con cierta aceleración).
engine.rain: este módulo configura la cantidad y el tamaño de las gotas que caerán. En este ejemplo se han configurado dos tipos de gotas: [0,3,8] indica que caerán 8 gotas de un tamaño que será la suma de 0 más un número aleatorio entre 0 y 3. El segundo tipo de gota [3,8,1] indica que caerán 1 gota de un tamaño de 3 más un número aleatorio entre el 3 y el 8. Finalmente el 50 indica en milisegundos cada cuando caerán esas gotas.
image.src: es la ruta de la imagen de fondo.

El resultado es una escena de lluvia realmente interesante y muy personalizable, no te pierdas nuestra demo.

Ver demo Descargar ejemplo

Jugando con Rainyday.js

Es inevitable, seguro que a ti te pasa lo mismo, al principio se trataba de simular una lluvia lo más real posible, pero ¿qué pasa si jugamos con algunos de los parámetros?.

El resultado puede ser de lo más jocoso y extraño como la lluvia con una gravedad distorsionada.
Ver demo

O una lluvia que podría considerarse una aberración de la naturaleza.
Ver demo

Comparte en redes sociales

classic-editor-remember:: classic-editor