Particles.js: Introducción

() translation by (you can also view the original English article)

Muchas partículas diminutas moviéndose e interactuando entre ellas o contigo tienen un cierto atractivo. Si alguna vez estás en la situación en donde necesites trabajar con muchas partículas, Particles.js te servirá bien. Como es evidente del nombre, es una librería JavaScript que puede ayudarte a crear sistemas de partículas. Además, es liviana, fácil de usar y te da mucho control.

En este tutorial, cubriré todas las características de la librería y te ayudaré a comenzar. Este tutorial es la primera parte de la serie y cubrirá solo lo básico.

Instalación y Uso

Primero, necesitas hospedar la librería. Puedes subirla a tu propio servidor o usar jsdeliver CDN como yo.

1	<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

También necesitas crear un elemento DOM en donde Particles.js creará las partículas. Dale un id fácilmente identificable, para referencia después.

1	<div id="particles-js"></div>

Ahora, crea un sistema básico de partículas con ajustes por defecto, solo necesitas una sola línea de JavaScript para inicializar la librería.

1	particlesJS();

Las partículas son blancas por defecto. También están interconectadas con delgadas líneas blancas. Así qué, si no estás viendo nada justo ahora, solo cambia el fondo a algo diferente. Aquí está mi CSS para estilizar el div de partículas:

1	#particles-js {
2	background: cornflowerblue;
3	}

Intenta hacer clic en algún lugar dentro del demo de abajo. Después de cada clic, Particles.js generará cuatro partículas nuevas más.

Configurando Opciones Personalizadas

Incluso si solo tomó cuatro líneas de código crear el demo anterior, el resultado final podría no ser lo que estás buscando. Para mí, las partículas parecen un poco grandes en tamaño y densamente empacadas. Tal vez quieras que las partículas tengan otra forma o tengan un tamaño aleatorio. Particles.js te permite establecer estas y muchas más propiedades en JSON que puedes referir durante la inicialización. La sintáxis general para llamar la función se verá como:

1	particlesJS(dom-id, path-json, callback (optional));

Aquí, dom-id es el id del elemento en donde quieres que aparezcan las partículas. path-json es la ruta al archivo JSON con todas las opciones de configuración, y callback es una función de rellamado opcional. En vez de una ruta, puedes poner tu código JSON directamente en el segundo parámetro.

Intentemos crear nieve usando esta increíble librería. Primero, nuestra función se verá como:

1	particlesJS("snowfall", 'assets/snowflakes.json');

He removido la función de rellamado y cambiado el Id DOM a un nombre más específico. Los copos de nieve tendrán una forma esférica. Estos caerán hacia abajo y tendrán un tamaño no uniforme. También, a diferencia de nuestro primer demo, no estarán conectados por líneas.

Moviendo Partículas

Al comienzo, nuestro archivo snowflakes.json tendrá el siguiente código:

{
  "particles": {
  
  },
  "interactivity": {
    
  }
}

Todas nuestras opciones de configuración relacionadas a propiedades físicas como forma, tamaño y movimiento irán dentro de particles. Todas las opciones de configuración que determinan el comportamiento de interacción irán dentro de interactivity.

Estoy estableciendo el número de partículas a 100. Esto dependerá generalmente del espacio disponible. Como se discutió previamente, también estableceremos la forma a un círculo. En este punto, tu archivo debería verse como:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    }
  },
  "interactivity": {
    
  }
}

Estoy usando el valor de 10 para establecer el tamaño de los copos. Ya que los copos de nieve varían en tamaño, estableceré random a true. De esta manera los copos de nieve pueden tener cualquier tamaño entre cero y el límite máximo que especificamos. Para deshabilitar o remover todas las líneas que enlazan a estas partículas, puedes establecer enable a false para line_linked.

Para mover las partículas, tendrás que establecer la propiedad enable a true. Sin ninguna otra propiedad, las partículas se moverán a trochemoche como si estuvieran en el espacio. Puedes establecer la dirección es estas partículas con un valor string como "bottom". Incluso aunque el movimiento general de las partículas es hacia abajo, estas aún necesitan moverse un poco al azar para verse naturales. Esto puede ser logrado estableciendo straight a false. En este punto, snowflakes.json tendrá el siguiente código:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 10,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "straight": false
    }
  },
  "interactivity": {
    
  }
}

Con el código JSON de arriba, tendrás el siguiente resultado:

Cambiando el Comportamiento de Interacción

Si pasas el ratón sobre el demo de arriba, notarás que las líneas aún existen pero solo se muestran temporalmente durante el paso del ratón. Para quitarlas completamente, puedes establecer la propiedad enable para el evento onhover a false. Intenta dando clic dentro del demo de arriba y notarás que cada clic genera cuatro partículas. Este es el comportamiento por defecto. También puedes cambiar el número de partículas usando la propiedad particles_nb bajo push. He establecido este número a 12 en este caso.

También puedes determinar si detectar eventos en la ventana on canvas usando la opción detect_on.

Aquí está el código completo para el archivo JSON:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": 10,
      "random": true
    },
    "line_linked": {
      "enable": false
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom",
      "straight": false
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false
      }
    },
    "modes": {
      "push": {
        "particles_nb": 12
      }
    }
  }
}

Como puedes ver, no tuve que habilitar específicamente el evento onclick. Está habilitado por defecto. De manera similar, pude quitar otras opciones como "detect_on":"canvas" bajo interactivity y "straight":false bajo move. Los he mantenido de manera que los principiantes no se confundan con cosas como por que las partículas no se están moviendo en líneas rectas.

Puedes probar diferentes valores para modificar los copos de nieve en este demo de CodePen.

Ideas Finales

Comenzar con Particles.js es sencillo. Si nunca has trabajado con sistemas de partículas, esta librería te ayudará a comenzar un muy poco tiempo. Este tutorial fue solo una introducción básica a la librería. En los siguientes dos tutoriales de esta serie, cubriré todos los aspectos de esta librería a mucho más detalle.

Si tienes alguna pregunta con respecto a este tutorial, por favor házmelo saber en los comentarios.