Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Bouncing Balls en el lienzo HTML5

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 comienzo de la creación de demos como esta al proporcionar un montón de cosas que normalmente deberían construirse a mano: un bucle de animación, contexto de dibujo, etc. También proporciona algunas buenas funciones matemáticas, como random(), que verás que estoy usando por todas partes.
Revisaré brevemente el código para darle una idea de cómo funciona y cómo puede editarlo o hacer el suyo. Puede seguir en la pestaña JS anterior.
Primero, estoy configurando algunas variables: una particlesmatriz particleCount, y una Particlefunción. La particlesmatriz contendrá 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 predeterminada para cada partícula que creo. Cuando creo una nueva partícula, le paso las coordenadas x e y en las que 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 dibujo dibuja la partícula a la pantalla en su nueva ubicación.
La sketchfunción tiene tres funciones internas: setupupdatedraw.
Setupse llama automáticamente cuando se carga la página. Se repite particleCountvarias veces y crea una nueva partícula.
Updatecorre automáticamente cada cuadro. Recorre las partículas y ejecuta cada una de sus updatefunciones internas (que a su vez actualiza la posición de esa partícula).
Drawse llama automáticamente por sketch.js después updateRecorre 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:
  • Partículas: aumenta / disminuye 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!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas