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

Generando un sistema de partículas con JavaScript

by
Read Time:11 minsLanguages:

Spanish (Español) translation by Marjan (you can also view the original English article)

Si alguna vez has visto un efecto de fuegos artificiales, creado en Flash, ¡te mostraré cómo reproducir el efecto usando JavaScript puro! ¿Por qué dejar que los desarrolladores de Flash se diviertan?


Configuración de tu espacio de trabajo

Requisitos

Conocimiento de la notación de objetos de JavaScript. Si pudieras usar algo de capacitación en esta área, no hay problema, Leigh Kaszick tiene un tutorial en profundidad sobre los conceptos básicos de JavaScript orientado a objetos.

Conocimientos básicos de Raphael.js. Una vez más, si es nuevo en esto, puedes consultar Introducción a la biblioteca JS de Raphael por Damian Dawber.


¿Qué es un sistema de partículas?

Un sistema de partículas, en términos de gráficos por computadora, se relaciona con replicar el comportamiento de un sistema de partículas naturales en un modelo 3D como explosiones, fuego, nubes y una plétora de otros fenómenos que son realmente difíciles de implementar usando técnicas de programación convencionales.

Un sistema de partículas básico consta de:

  • Un emisor: el punto en el espacio donde se originaron las partículas.
  • El escenario: el lugar que contiene el sistema de partículas.
  • Fuerzas: son fuerzas externas que influyen en el movimiento de las partículas. En nuestro tutorial, será la gravedad.

Paso 1

Comenzaremos creando nuestra imagen de partículas.

Abre Photoshop y crea un lienzo de 25 px por 25 px.

Crea una nueva capa.

Selecciona un pincel redondo de 23px con una dureza del 100%. En este tutorial usamos el color blanco, pero puedes elegir cualquier forma o color de pincel que desees.

Ahora debemos ocultar la capa de fondo, y luego, usando la opción guardar para web y dispositivos, guardarla como "partículas_img" en formato png-24.


Paso 2

Ahora, comencemos con la codificación. Para comenzar, pega el siguiente código.

Este es un simple fragmento de código HTML que consta de:

  • Importando raphael.js y sps.js, en el que trabajaremos con el código JavaScript de nuestro Sistema de Partículas.
  • Importando raphael.js y sps.js, en el que trabajaremos con el código JavaScript de nuestro Sistema de Partículas.
  • La etiqueta del cuerpo también consta de una función startSystem () que se llamará en el evento onload. Lo definiremos más adelante en nuestro archivo JavaScript.

Paso 3

A continuación, crearemos nuestro sps.js, en el que escribiremos el código real para nuestro sistema de partículas.


Paso 4

Como estamos trabajando con un modelo 2D, para evitar un montón de variables x, y en el script, crearemos una clase Vector que se encargará de las coordenadas por nosotros.

Nota: No usaremos coordenadas Z ya que no nos preocupa la distancia de las partículas desde la vista de la cámara (ojos), la coordenada Z se ocupa principalmente de los atributos de escala y opacidad.


Paso 5

Necesitaremos funciones para establecer los valores de las variables y sumarlas, por lo que declararemos las siguientes funciones en nuestra clase Vector.

Nota: asegúrate de agregar Z en los parámetros de función establecidos, si lo estás utilizando.


Paso 6

Creemos un objeto Vector que contendrá las coordenadas donde se originan las partículas; Además, declararemos un objeto Raphael global y una variable de temporizador que usaremos más adelante.


Paso 7

Necesitamos crear una clase para nuestros objetos de partículas, consistirá en propiedades básicas como:

  • Color y forma: propiedades básicas de la partícula.
  • Tamaño: el tamaño de la partícula.
  • Ubicación: su punto de origen.
  • Velocidad: la velocidad (aquí, se referirá a la propagación de las partículas en el escenario).
  • Aceleración: aumento de la velocidad.
  • Duración: la vida de la partícula.

En el mundo de JavaScript, cambiaremos ligeramente algunas variables, como el color y el tamaño que ya estaban definidos cuando creamos la imagen en Photoshop.

En JavaScript, las clases se declaran usando la función y sus variables se declaran usando esta.

  • Queremos que el tamaño de las partículas se genere aleatoriamente, y entre 15 y 25.
  • Particle es el objeto de imagen de Raphael con el nombre, las coordenadas y el tamaño de la imagen, como parámetros.
  • loc es la ubicación de la partícula.
  • acc es la aceleración.
  • vel es la velocidad.
  • la vida útil es el período en el que la partícula vive en el escenario.

Paso 8

Necesitaremos crear funciones para las siguientes condiciones:

  • Crear una partícula en el lienzo con las propiedades declaradas anteriormente.
  • Actualizando constantemente su posición con respecto a su aceleración.
  • Comprobando si la partícula está muerta, entonces tenemos que quitarla de nuestro lienzo, de lo contrario nuestro escenario estará lleno de partículas muertas :).

Paso 9

Primero, declararemos la función init, que usaremos para inicializar nuestras partículas.

Aquí hemos envuelto el código dentro de with (this) que se refiere al objeto de partícula actual.

  • Particle.rotate () se utiliza para rotar el objeto aleatoriamente entre 0 y 360 grados. En este caso, no importa ya que estamos usando un objeto redondo, sin embargo, con otros objetos, como las estrellas, sí importa, ya que parece extraño que todas las partículas tengan los mismos ángulos geométricos.
  • Estableceremos la aceleración inicial en 0,0.5, porque queremos ilustrar cómo las partículas están unidas a la gravedad; por eso hemos inicializado la coordenada y. A medida que aumentamos el valor de la aceleración, aumenta la velocidad de las partículas más rápidas.
  • Aquí, vel se refiere a la propagación de las partículas en el escenario, es decir Math.random () * 4 -2 generará números en el rango de -2 a 2.
  • loc toma los valores iniciales de la partícula.

Cabe señalar algunos puntos:

  1. Condición para la aceleración
    • Los valores positivos aumentan la aceleración.
    • Para una etapa libre de gravedad, aceleración = 0.
    • Para la gravedad inversa, deben usarse valores negativos.
  2. Condiciones para vel
    • Para aumentar la propagación, usaremos un valor mayor del rango generado a partir de Math.random ().
    • Para emitir partículas en un lado en particular, podemos lograrlo multiplicando por el número máximo positivo o negativo.

Paso 10

Ahora crearemos una función para actualizar los valores de la partícula a su nueva posición.

Aquí, cada vez que se llama a la función de actualización, se agrega aceleración al vel, y eso se agrega a la ubicación. Por último, la partícula se actualiza a su nueva ubicación.  Cuando se agrega una aceleración constante, daremos la impresión de que la partícula está sometida a alguna fuerza, ya que tiene que recorrer más distancia por unidad de tiempo. Además, cada vez que se llama a la actualización, su vida útil se reduce en 1.


Paso 11

Finalmente, para la clase de partículas, crearemos una función para verificar si la vida útil de una partícula ha finalizado o no.


Paso 12

Nuestra clase de partículas se ve así:


Paso 13

Ahora crearemos una clase de sistema de partículas. Comencemos declarando la variable miembro.

Aquí, las partículas son una matriz de los objetos Particles que crearemos pronto.


Paso 14

Ahora necesitamos crear las funciones para inicializar y ejecutar nuestro sistema de partículas; así que comenzamos creando nuestra función init.

Primero, tomamos el número de partículas que se crearán como parámetros de función. Luego, usando el bucle for, creamos los objetos de partículas y los inicializamos llamando a su función init.


Paso 15

Ahora, crearemos una función de ejecución que ejecutará nuestro sistema de partículas.

Aquí nuestro código está envuelto dentro del bloque with (this), que se refiere al objeto del sistema de partículas actual. Ahora, dado que nuestras partículas necesitan actualizarse constantemente a la siguiente ubicación, llamamos a la función update () de la partícula dentro de una función setInterval () que ejecuta la función en un intervalo de tiempo definido.  Actualizamos el posicionamiento de todas las partículas iterando a través de la matriz de partículas.

Ahora también queremos comprobar si la partícula está muerta o no. Logramos esta tarea llamando a la función dead () de la partícula. Si una partícula está muerta, hacemos lo siguiente:

  • Elimínalo de nuestra matriz.
  • desplazar elementos hacia atrás en uno, comenzando desde la posición después del índice de la partícula muerta.
  • Empuja una nueva partícula al final de la matriz.

El código anterior es la solución óptima, pero cuando implementamos eso en el mundo de JavasSript, la emisión es tan espontánea que los motores se paran.  Es por eso que hemos utilizado el código alternativo para aumentar la complejidad y renderizar una animación más fluida. Puedes probarlo tú mismo;).

Dado que el período de tiempo está en el orden de milisegundos, es por eso que a pesar de utilizar un algoritmo más complejo, obtenemos una emisión espontánea.


Paso 16

En este punto, nuestra clase ParticleSystem se ve así.


Paso 17

Ahora declararemos nuestra función startSystem () que iniciará el sistema de partículas.

Inicializamos nuestro objeto raphael con ID de escenario, ancho y alto. Luego, creamos nuestro objeto de sistema de partículas y creamos un objeto vectorial con las coordenadas de origen.  Luego, estamos inicializando nuestro sistema de partículas llamando a init, que a su vez, inicializa las partículas. También proporcionamos 20 como el número de partículas en los parámetros.

El número de partículas debe estar entre 20 y 30 para un efecto de animación suave. ¡Proporcionar un número mayor bloqueará el navegador o lo bloqueará!


Paso 18

Así es como se ve el código de nuestro archivo sps.js en este momento.

Finalmente, hemos terminado. Este pequeño proyecto es compatible con todos los navegadores, incluso en Internet Explorer, aunque IE6 tiene algunos problemas de transparencia.  Este sistema de partículas se puede usar prácticamente en cualquier lugar que desees, incluidos fondos, efectos de explosión, intros de logotipos y encabezados, etc.  He producido tres demostraciones, que son versiones modificadas del código anterior. Uno de ellos implementa diferentes sistemas de partículas, como el humo, el polvo y el sistema de partículas bokeh. ¡Disfrútalo y gracias por leer!

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.