Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Particles.js: Controlar Conteo y Forma de Partículas

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called An Introduction to Particles.js.
Particles.js: Introduction
Particles.js: Motion and Interaction

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

El tutorial anterior de Patricles.js discutió de manera breve varias características que la librería ofrece y cómo comenzar con la librería. En este tutorial cubriré a detalle todos los aspectos de Particles.js que tratan con la apariencia física de las partículas.

Número, Color y Opacidad

La primera cosa con la que lidiaremos es el número y densidad de partículas. La densidad determina el número de partículas que serán empaquetadas juntas en un área dada. Está habilitado por defecto con value_area establecido a 800. Aquí está el JSON que te permite controlar el número de partículas:

Si estableces enable bajo density a false entonces el número de partículas mostradas será exactamente 50. Doblar el valor de value_area reducirá el número de partículas aproximádamente a la mitad.

Hay tres maneras de establecer los colores de las partículas. Puedes establecer los colores en formato HEX, RGB o HSL. Debido a un bug en la librería, los formatos RGB y HSL solo funcionan cuando remueves el color por defecto desde la librería.

Si quieres seleccionar de manera aleatoria el color de la partícula, puedes hacerlo con el valor "random". Finalmente, para establecer el color desde una lista de colores, tendrás que proporcionar los colores en formato HEX como un arreglo. Aquí está el JSON para establecer colores para partículas:

La propiedad opacity te da mucho control. Puedes establecerlo a un valor exacto o usar valores aleatorios estableciendo "random" a true. No solo eso porque también puedes animar la opacidad de partículas. Aquí está el código JSON para la propiedad de opacidad:

Establecer "sync" a true animará la opacidad de todas las partículas al mismo tiempo. Usar un valor de 0.4 para "opacity_min" asegura que la opacidad nunca baja de 0.4 para cualquier partícula durante la animación. Aquí está un demo que comienza moviéndose a través del espacio. Intenta cambiar el número, color u opacidad de las partículas para ver su efecto.

Forma y Tamaño

Particles.js tiene cinco diferentes valores para crear formas básicas. Una simple forma como circle genera una partícula circular, triangle genera partículas triangulares y edge genera cuadrados. Puedes usar el valor polygon para crear un polígono de nb_sides, en donde proporcionas el valor de nb_sides. Para crear formas de estrella, puedes establecer el tipo de forma a star. El parámetro stroke agrega un delineado de un color dado y anchura alrededor de las partículas. El código JSON debajo creará hexágonos.

También es posible mostrar imágenes en lugar de formas básicas. Primero, deberás especificar el tipo de forma como image. Después de eso, puedes establecer la fuente de la imagen y su altura y anchura deseados. Vale la pena tener en mente que la anchura y altura no determinan el tamaño de partículas de imagen sino su relación de aspecto. Aquí algún JSON para crear partículas con imágenes de asteroide.

La librería también te permite mezclar múltiples formas juntas. Por ejemplo, podrías decidir crear círculos, cuadrados y hexágonos de manera simultánea. En ese caso, todo lo que tienes que hacer es pasar un arreglo con todas esas formas.

La propiedad de tamaño tiene todas las opciones de la propiedad opacity. Puedes establecer el tamaño al azar así como animar el tamaño de partículas individuales. Echa un vistazo cercano al siguiente código JSON.

Si estableces random a false, todas las partículas serán de tamaño 25. Cuando random es establecido a true, el tamaño sirve como el límite máximo para las partículas. Establecer sync a true dentro de la animación cambiará el tamaño de todos los elementos de manera simultánea. Deberías abrir el demo y probar diferentes valores para el número de lados del polígono, animación y otras propiedades para ver cómo afectan al resultado final.

Enlazando Partículas

Cuando las partículas están suficientemente cerca, puedes dibujar líneas de conexión entre ellas habilitando la propiedad line_linked.

Esta propiedad tiene cuatro valores adicionales. La propiedad distance especifíca la distancia máxima a la que las líneas pueden ser dibujadas. Puedes también establecer el color como una cadena HEX. La opacidad de la líneas varía basada en la distancia entre partículas. El valor que especificas como opacity es la opacidad de las líneas cuando las partículas están realmente cerca. Finalmente, width determina que tan anchas van a ser tus líneas. Aquí está el código JSON para acompañar el demo.

Puedes ver que las líneas desaparecen tan pronto la distancia entre partículas se vuelve más de 200 px.

Ideas Finales

He intentado cubrir todo lo que necesitas saber para cambiar la forma, tamaño color y casi cualquier otra propiedad física de las partículas. Los ejemplos en este tutorial claramente ilustran qué tan sencillo es usar esta librería. Si alguna vez necesitas una librería básica de partículas, definitivamente debería probar Particles.js.

El siguiente tutorial te enseñará cómo controlar el movimiento de las partículas y su interacción entre ellas así como contigo. Si tienes cualquier pregunta relacionada con este tutorial, por favor deja un comentario.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.