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

Particles.js: Movimiento e Interacción

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called An Introduction to Particles.js.
Particles.js: Control Particle Count and Shape

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

En el último tutorial de Particles.js, aprendiste como crear partículas con las formas y tamaños que deseabas. Mientra se sintió bien ver todas las partículas moviéndose, aún hay lugar para mejoras. Actualmente, no hay interacción entre varias partículas. Solo pasan a través de ellas como si las otras partículas no existieran.

Este tutorial te enseñará como mover partículas de la manera que quieras controlando su dirección, velocidad y mucho más. También aprenderás sobre varios modos de interacción y eventos.

Controlando el Movimiento de Partículas

No todas las partículas en cada sistema de partículas se mueve en direcciones aleatorias. Incluso si lo hacen, hay algunas otras fuerzas en acción. Por ejemplo, podrían acelerar cuando se aproximan unas a otras o rebotan después de colisiones. Todas estas opciones pueden ser controladas por varias propiedades disponibles bajo move.

Si no quieres que las partículas se muevan en absoluto, puedes hacerlo estableciendo enable a false. Puedes especificar la velocidad de partículas usando el parámetro speed. Para mover cada partícula con alguna velocidad al azar, establece random a true. Por otro lado, si las mueves en direcciones aleatorias, especifica direction como none.

Tarde o temprano, al menos una de las partículas se moverá al límite de nuestro sistema. Ya sea que la partícula rebote de regreso o salga de otra dirección es decidido por el valor del parámetro out_mode. Cuando se establece a out, las partículas se mueven fuera del canvas. Cuando se establece a bounce, las partículas rebotan de regreso al golpear el límite.

Parece poco natural cuando las partículas se atraviesan unas a otras sin ningún cambio en la velocidad. Para cambiar la velocidad de las partículas en cada colisión, puedes establecer bounce a true. De manera interesante, esto funcionará solo si las propiedades line_linked o attraction están habilitados. Las partículas invierten su dirección cada vez que colisionan, incluso si la colisión no es de frente.

Finalmente, me gustaría discutir la atracción. Una vez que haz habilitado la atracción, las partículas cambiarán su velocidad siempre que están en las inmediaciones de otras partículas. El cambio puede ser positivo o negativo dependiendo del valor de otros parámetros. La atracción en cada dirección es inversamente proporcional al valor de los respectivos parámetros, rotateX y rotateY. Los valores por defecto son bastante altos para observar alguna atracción notable. Por otro lado, si quieres hacer tus valores demasiado bajos, las partículas ganarán velocidades muy altas después de algún tiempo.

El JSON responsable del movimiento de las partículas de abajo es:

Deberías tener en mente que cuando estableces straight a true y direction a none al mismo tiempo, las partículas no se moverán en absoluto.

Eventos y Modos de Interacción

Hasta aquí todo bien, pero te estarás preguntando si las partículas pueden también interactuar con el usuario, y si pueden, cómo interactúan.

Para responder tu primer pregunta, las partículas pueden interactuar con el usuario. Particles.js puede responder a tres eventos: hover, click y resize. Sin embargo, primero deberías saber qué eventos pueden ser detectados en el canvas o en la ventana misma estableciendo el valor del parámetro detect_on. Ahora todos estos eventos serán disparados cada vez que pases el ratón, hagas clic o re-dimensiones el canvas/ventana.

Cuando estableces resize a true, las partículas se ajustan a sí mismas en el espacio restante sin ninguna distorsión. Cuando resize se establece a false, las partículas cambiarán su forma para acomodar cualquier cambio en tamaño de canvas.

Probablemente te estés preguntando lo que hace el parámetro mode en el código de arriba. Este parámetro define cómo las partículas interactuarían con el usuario. La librería ha definido cinco modos de interacción. Estos son grabbubblerepulsepush, y remove.

El modo grab crea líneas de conexión entre tu punto de hover o clic y partículas cercanas con una distancia específica que estableces tu mismo. Este modo solo funciona con el evento hover. El JSON de abajo dibuja un línea con opacidad de 1 para conectar todas las partículas dentro de 800 px.

El modo bubble cambia el tamaño y opacidad de todas las partículas que están dentro de una distancia específica para una duración que decidas. El modo repulse hace que la partícula se aleje de la ubicación del clic. Ambos modos pueden ser agregados ya sea a hover o click. La duración es aplicable solo en los eventos clic en ambos casos.

Deberías intentar cambiar varios parámetros para hacer el demo incluso mejor.

El modo push agrega cierto número de partículas en cada clic del ratón. Las partículas serán agregadas en la ubicación del clic. De manera similar, el modo remove remueve las partículas del canvas. Las partículas a ser removidas son decididas de manera aleatoria.

Ideas Finales

Los tres tutoriales en esta serie cubrieron todo lo que Particles.js tiene que ofrecer. También he mencionado unas cuantas cosas de vez en cuando para que no tengas que rascarte la cabeza después por problemas como partículas que no rebotan entre sí, etc.

Si necesitas saber más sobre todos los parámetros que hemos discutido, por favor ve a la documentación de esta librería. Además, si te atoras en algún punto mientras usas la librería o algo no se comporta como debería, sugeriría que leas el código fuente para ver que pasa bajo el capó.

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.