+525564535330

Partículas seguidoras

Este script es realmente muy sencillo, se basa en un sistema de partículas (un montón de puntitos en la pantalla) que se desplazan hacia un punto definido de la misma que en un inicio es el punto de coordenadas (0, 0) y que equivale a la esquina superior izquierda de la pantalla. El usuario puede interaccionar con el diseño y puede hacer que las partículas  cambien el punto al que se dirigen mediante el mouse de la computadora o con un ligero toque en el celular. La velocidad de las partículas es directamente proporcional a la distancia que tienen respecto al puntero, es decir, entre más se acerquen al puntero más lentas se harán. Para hacer que las partículas generen ese efecto de ondas se adicionoó una componente senoidal a la velocidad en el eje x. 

Para agregarle mayor versatilidad al proyecto se incluyeron varios sliders para controlar la cantidad de partículas que se generaran en el próximo click y para controlar el grosor mínimo y máximo de las mismas. 

Para generar un efecto de sobra en el avanzar de las partículas se agrego un fondo negro a cada cuadro de la animación con una opacidad muy baja. 

¿Qué puedo hacer con este diseño?

  • Al iniciar la animación las partículas se impulsaran hacia la esquina superior izquierda.
  • Un primer click detendrá la animación momentáneamente.
  • Un segundo click creará nuevas partículas, estas se moverán hacia el punto donde se dio este click. 
  • La velocidad y dirección de las partículas cambia en función de la posición del puntero sobre el lienzo.
  • El tamaño de las partículas es aleatorio, sin embargo, se puede configurar el rango, es decir,  el tamaño mínimo y máximo. Si el tamaño mínimo supera al máximo, todas las partículas tomarán el valor máximo. 
  • Un doble click limpia el lienzo completamente.
  • Para exportar una imagen teclea la letra s o toca con dos o más dedos la pantalla de tu celular.

¡Disfruta nuestro recurso!

Ver Código Fuente
Ver Código Fuente
Regresar a Sandink-lab

Prueba nuestros diseños

Scroll to Top