Efecto fuegos artificiales con JavaScript y Fireworks-js

Generar un efecto de fuegos artificiales con JavaScript y Fireworks-js provocará que tus usuarios se sorprendan al visitar tu web. En esta publicación te explico paso a paso cómo implementar la librería Fireworks-js. 

Al final del artículo sabrás cómo crear una “landing page” tan espectacular como la que te muestro a continuación.

Ver ejercicio práctico con FireworksJS
Haz click en la imagen para abrir el ejercicio en una página nueva

Si deseas ir directamente al ejercicio práctico, haz click aquí

Personalmente soy muy fan de las librerías JavaScript orientadas a generar efectos visuales de cualquier tipo.

Por aquí ya he analizado muchas de ellas, sin embargo, han pasado muchos meses desde la última publicación que trataba sobre crear un efecto visual.

De modo que hoy he decidido dedicar el post a FireworksJs, una librería Javascript que permite generar fuegos artificiales en tu página web, o aplicación.

Así es, el objetivo de FireworksJs es ofrecer una sencilla API para customizar y ejecutar un efecto de fuegos artificiales dentro de un elemento canvas.

Puede que pienses que algo así es absurdo, pero deja que te plantee un posible escenario, que quizá haga que cambies de opinión.

Imagina que te contratan para desarrollar la web para una campaña de marketing.

Dicha web, debe abrirse al público en una fecha determinada, pero hasta entonces, aparecerá una cuenta atrás para generar expectación.

El caso es que también te han pedido que en el día cero, la página web muestre fuegos artificiales para enfatizar que se trata del día de la inauguración.

Como ves, en una situación como esta, una librería como Fireworks-js resulta de lo más conveniente.

Una librería para lanzar fuegos artificiales mediante JavaScript

Fireworks-js fue creada por Vitalij Ryndin (aka crashmax-dev) hace ya más de 2 años.

Con todo, se nota que Vitalij Ryndin y el equipo de 11 contribuidores han tratado de mantenerla actualizada, ya que da soporte a frameworks como React, Vue o Angular.

Dicho repositorio tiene casi 1000 estrellas de valoración, pero quizá lo más destacable es que el módulo de NPM se descarga una media de 23.654 veces a la semana.

Tal y como ya anticipé, en esencia lo que FireworksJs hace es habilitar un canvas para “pintar” en él un sistema de partículas animadas.

En muchos sentidos me recuerda a la herramienta CanvasConfetti, de la que ya hablé hace un tiempo

Crear efecto confetti con JavaScript

¿Cómo funciona FireworksJs?

Veamos rápidamente como instalar e implementar FireworksJs.

En primer lugar, y como suele ser habitual, es necesario instalar la dependencia en tu proyecto frontend con el siguiente comando.

npm install fireworks-js

Acto seguido, puedes importar la clase Fireworks directamente de “node_modules” con la instrucción que sigue.

import { Fireworks } from 'fireworks-js';

Antes de continuar, debes saber que suelo analizar estos recursos desde su uso mediante “vanilla javascript” para una mayor compresión. 

Aunque uses herramientas como React o Vue, puedes aplicar lo que explico igualmente, pero igual te aconsejo consultar la documentación para su específica implementación.

La clase Fireworks puede ser instanciada pasándole dos parámetros.

const fireworks = new Fireworks(document.querySelector('.container'), { /* opciones */ });

El primero es una referencia a un nodo del DOM que actuará de contenedor.

Es importante entender que este elemento no debe ser un “canvas”, sino una DIV (u otra etiqueta HTML parecida). 

La librería se encargará de generar e incluir dinámicamente el “canvas” necesario dentro de tu contenedor.

El segundo parámetro es un objeto JavaScript literal, a partir del cual definimos las características del efecto.

Cada característica se declara mediante una clave y un valor en el objeto.

A continuación te listo algunas de las características más interesantes:

  • hue: Esta propiedad admite otro objeto con los parámetros max y min, ambos numéricos, representa un intervalo válido de ángulo en la rueda de color. Dicho de otro modo, si configuras esta opción entre 0 y 360 tus fuegos artificiales apareceran con todos los colores posibles.
  • rocketsPoint: También acepta un objeto con intervalo de máximo y mínimo. En esta ocasión se usa para ubicar el punto de inicio de los cohetes en la base del canvas.
  • mouse: Este me parece de los más interesantes si deseas añadir interactividad al efecto. Con el uso de un objeto con las tres propiedades “click”, “movie” y “max” puedes decidir si los fuegos de artificio deben seguir al cursos, al hacer click y en qué cantidad.
  • sound: Qué sería de unos fuegos artificiales sin el sonido? Por supuesto, FireworksJs admite el parámetro de activar el sonido, para escuchar el estallido de cada cohete. La estructura de este objeto es un poco más compleja, puedes analizar cómo activar el sonido, o cómo seleccionar los archivos de audio mirando la documentación que te facilito al final del listado
  • explosion: Tal como su nombre indica, puedes controlar la fuerza de la explosión con un simple valor numérico.
  • particles: Acepta otro número y permite definir la cantidad de partículas que saltan tras cada explosión. Debes tener en cuenta que un valor muy alto en este parámetro puede ralentizar mucho la CPU del ordenador.
  • intensity: Controla la intensidad del efecto, reduciendo o ampliando el número de lanzamientos por segundo.

Estos son solo algunos de los parámetros más significativos, pero existen muchos más que quizá deberías conocer, como “decay”, “delay”, “friccion” o “gravity”.

Te dejo un enlace a la documentación para que entiendas más en detalle cada uno de ellos.

https://github.com/crashmax-dev/fireworks-js#options

En la web oficial también encontrarás una zona para experimentar con los diferentes resultados que ofrece el objeto de configuración.

https://fireworks.js.org/

Instanciar un nuevo objeto fireworks, no provocará que el efecto se inicialice automáticamente, para ello debemos hacer uso de los métodos expuestos en este objeto.

Destacare únicamente tres métodos clave para el control del efecto:

  • play(): Inicia el efecto de fuegos artificiales.
  • stop(dispose): Detiene el efecto por completo. El argumento dispose permite forzar la eliminación de la etiqueta canvas generada. 
  • pause(): Pausa el efecto manteniendo el estado actual.

Por consiguiente, un ejemplo bien sencillo de implementación sería el siguiente:

import { Fireworks } from 'fireworks-js';
const container = document.querySelector('.container');
const fireworks = new Fireworks(container, {
  autoresize: true,
  opacity: 0.5,
  acceleration: 1.05,
  friction: 0.97,
  gravity: 1.5,
  particles: 50,
  traceLength: 3,
  traceSpeed: 10,
  explosion: 5,
  intensity: 30,
  flickering: 50,
  lineStyle: 'round',
  hue: {
    min: 0,
    max: 360
  },
  delay: {
    min: 30,
    max: 60
  },
  rocketsPoint: {
    min: 50,
    max: 50
  },
  lineWidth: {
    explosion: {
      min: 1,
      max: 3
    },
    trace: {
      min: 1,
      max: 2
    }
  },
  brightness: {
    min: 50,
    max: 80
  },
  decay: {
    min: 0.015,
    max: 0.03
  },
  mouse: {
    click: false,
    move: false,
    max: 1
  }
});
fireworks.start();

Celebra la entrada del nuevo año con efecto de fuegos artificiales, JavaScript y Fireworks-js

Como suelo decir, para asentar realmente un conocimiento es imprescindible aplicarlo de forma práctica, así que vamos a implementar la librería FireworksJS en un proyecto propio.

Como siempre, te dejo el enlace al código fuente del ejercicio terminado para que te sirva de apoyo en el tutorial que sigue.

https://github.com/Danivalldo/libreriasjs/tree/master/FireworksJs

Como hace bien poco que hemos estrenado el 2024, he pensado que puede ser una buena idea crear una “landing page” celebrando la entrada al nuevo año.

No es la idea más ocurrente del mundo, pero servirá como excusa para implementar Fireworks en un proyecto práctico.

Comenzamos creando una base con HTML y CSS

<div id="app">
  <div class="intro">
    <h1>🎉Feliz año nuevo🎉</h1>
    <p>libreriasjs</b> te desea un <b>feliz 2024!</b></p>
  </div>
  <div class="fireworks-container"></div>
</div>
<div class="sky"></div>

Como ves, se trata de un layout bien simple compuesto por un contenedor con la clase “.intro” para mostrar el texto, otro contenedor con la clase “.fireworks-container” donde instanciaremos la librería y un contenedor “.sky” que actuará de fondo.

Sobre esta base, aplicamos estilos CSS en un archivo llamado “style.css”

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;800&display=swap");
:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color-scheme: dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", sans-serif;
}
.fireworks-container {
  min-height: 100vh;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  canvas {
    display: block;
  }
}
.sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgb(113, 59, 95);
  background: -moz-linear-gradient(
    0deg,
    rgba(113, 59, 95, 1) 0%,
    rgba(95, 59, 113, 1) 12%,
    rgba(15, 19, 41, 1) 95%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(113, 59, 95, 1) 0%,
    rgba(95, 59, 113, 1) 12%,
    rgba(15, 19, 41, 1) 95%
  );
  background: linear-gradient(
    0deg,
    rgba(113, 59, 95, 1) 0%,
    rgba(95, 59, 113, 1) 12%,
    rgba(15, 19, 41, 1) 95%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#713b5f",endColorstr="#0f1329",GradientType=1);
}
.intro {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 100;
  width: 100%;
  font-size: 40px;
  text-align: center;
  line-height: 0px;
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(15, 19, 41, 1);
  h1 {
    margin: 0 0 60px 0;
  }
  p {
    font-size: 1.5rem;
  }
}

Sobre este bloque de código solo hace falta destacar que la mayoría de elementos se posicionan de forma absoluta.

El estilo “.sky” actúa de fondo con un degradado y el contenedor “.fireworks-container” debe ocupar el 100% del alto de la pantalla.

@media (max-width: 830px) {
  .intro {
    bottom: 0;
    font-size: 20px;
    line-height: 2rem;
    h1 {
      margin: 0 0 0px 0;
    }
  }
}

Cerramos la hoja de estilos con un media query para ajustar la el tamaño de letra en dispositivos móbiles.

Ahora vayamos a la parte de JavaScript, te sorprenderá lo sencilla que es.

Recuerda que para que funcione correctamente, primero debes instalar la dependencia con el comando NPM, tal y como he mencionado anteriormente.

Vamos a desgranar el código línea a línea:

import "./style.css";
import { Fireworks } from "fireworks-js";

Iniciamos el script importando la dependencia y la hoja de estilos CSS.

const fireworks = new Fireworks(
  document.querySelector(".fireworks-container"),
  {
    hue: {
      min: 300,
      max: 360,
    },
    rocketsPoint: {
      min: 20,
      max: 80,
    },
    lineWidth: {
      explosion: {
        min: 1,
        max: 3,
      },
      trace: {
        min: 1,
        max: 1,
      },
    },
    intensity: 100,
    explosion: 10,
    traceLength: 1,
  }
);

Instanciamos un objeto JavaScript nuevo de la clase Fireworks. 

En el momento de hacerlo, le enviamos dos parámetros, el primero es una referencia al contenedor con la clase “.fireworks-container” que hemos preparado anteriormente.

El segundo parámetro es un objeto con algunas de las propiedades de configuración que hemos visto antes.

fireworks.start();

Finalmente, pedimos a FirewiorksJS que inicie el efecto, llamando al método “start()”.

Por supuesto, te animo a que juegues con los parámetros y la composición para ajustarlo a tus necesidades.

Si tienes alguna pregunta, sientete libre de dejarme un comentario, y trataré de ayudarte tan pronto como sea posible.

Conclusiones y recursos adicionales

Como dije al inicio, los efectos visuales generados por código, como un sistema de partículas siempre me han parecido fascinantes.

De hecho, en más de una ocasión yo mismo he programado alguna desde cero.

Sin ir más lejos, en este mismo blog enseñé a crear un efecto de lluvia con la ayuda de la librería p5js

Efectos visuales con JavaScript y P5js

Espero que esta publicación te haya resultado interesante, en el listado de abajo te dejo enlaces a material adicional por si quieres seguir indagando en el tema.

Hasta la próxima.

Deja un comentario