Aquí hay una demostración divertida que armé usando HTML5 canvas, ayudado por el excelente framework sketch.js . Estoy creando cientos de bolas semitransparentes y las reboto en la pantalla. La demostración definitivamente requiere un navegador moderno (Chrome / Firefox / IE9 +).
Sketch.js simplifica el inicio de la construcción de demostraciones como esta al proporcionar un montón de cosas que normalmente tendrían que construirse a mano: un ciclo de animación, un contexto de dibujo, etc. También proporciona algunas funciones matemáticas agradables, como las random()que verás que estoy usando por todas partes.
Repasaré el código brevemente para darte una idea de cómo funciona y cómo puedes editarlo o crear el tuyo. Puedes seguirlo en la pestaña JS arriba.
Primero, estoy configurando algunas variables: una particlesmatriz particleCounty una Particlefunción. La particlesmatriz mantendrá cada partícula que creo, mientras que particleCountes la cantidad de partículas que voy a crear. Particlees una función que actúa como mi valor predeterminado para cada partícula que creo. Cuando creo una nueva partícula, le paso las coordenadas x e y donde quiero que aparezca. El resto se establece internamente: radio, color (en rgba) y velocidad en ambas direcciones (vx y vy).
También doy Particleun par de funciones internas: actualizar y dibujar. La función de actualización actualiza las coordenadas x / y de esa partícula. Si golpea el borde de la pantalla, invierte la dirección. La función de dibujar dibuja la partícula en la pantalla en su nueva ubicación.
La sketchfunción tiene tres funciones internas: setup, updatey draw.
SetupSe llama automáticamente cuando se carga la página. Recorre particleCountvarias veces y crea una nueva partícula.
UpdateSe ejecuta automáticamente cada fotograma. Recorre las partículas y ejecuta cada una de sus updatefunciones internas (que a su vez actualiza la posición de esa partícula).
Drawes llamado automáticamente por sketch.js después update. Recorre las partículas y llama a su drawfunción (que atrae la partícula a la pantalla).
¡Y eso es todo lo que necesitamos! Sketch.js maneja el resto del trabajo sucio.
Edite la demostración en CodePen para ver qué cambios puede hacer. Las cosas divertidas para cambiar incluyen:
  • Cuenta de partículas: aumentar / disminuir el número de partículas.
  • this.radius: cambiar los números dentro de la función aleatoria cambiará el tamaño de las partículas creadas.
  • this.rgba: cambiar los números dentro de las cuatro funciones aleatorias dentro cambiará los colores creados.
  • this.vx y this.vy: cambiar esos números cambia las velocidades que pueden tener las partículas.
Si creas algo interesante, ¡asegúrate de compartirlo en los comentarios!