If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

Una sola partícula

Antes de que podamos crear un ParticleSystem (sistema de partículas en inglés) completo, tenemos que crear un objeto que describirá una sola partícula. La buena noticia: ya hicimos esto. Nuestro objeto Mover de la sección de Fuerzas sirve como la plantilla perfecta. Para nosotros, una partícula es un cuerpo independiente que se mueve sobre la pantalla. Tiene location (ubicación), velocity (velocidad) y acceleration (aceleración), un constructor para inicializar esas variables y las funciones display() para ser desplegado y update() para actualizar su ubicación.
// Un objeto Particle sencillo
var Particle = function(position) {
  this.acceleration = new PVector();
  this.velocity = new PVector();
  this.position = position.get();
};

Particle.prototype.update = function(){  //función para actualizar
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
};

Particle.prototype.display = function() {  //función para desplegar
  stroke(0, 0, 0);
  fill(175, 175, 175);
  ellipse(this.position.x, this.position.y, 8, 8);
};
Esto es lo más sencillo que puede ser una partícula. De aquí podríamos llevar a nuestra partícula en varias direcciones. Podríamos agregar un método applyForce() (aplicarFuerza) para afectar el comportamiento de la partícula (haremos precisamente esto en un ejemplo futuro). Podríamos agregar variables para describir el color y la forma, o usar image() para dibujar la partícula. Por ahora, sin embargo, vamos a enfocarnos en agregar solo un detalle adicional: lifespan (duración).
Los sistemas de partículas típicos involucran algo llamado un emisor (emitter en inglés). El emisor es la fuente de las partículas y controla la configuración inicial de las partículas, su ubicación, su velocidad, etc. Un emisor puede emitir una sola ráfaga de partículas, o un flujo continuo de partículas, o ambos. El punto es que para una implementación típica como esta, una partícula nace en el emisor pero no vive para siempre. Si viviera para siempre, nuestro programa eventualmente se paralizaría a medida que, con el tiempo, el número de partículas aumentara a un número difícil de manejar. Cuando nacen nuevas partículas, necesitamos dejar morir a las partículas viejas. Esto crea la ilusión de un flujo infinito de partículas, y el rendimiento de nuestro programa no sufre.
Hay muchas maneras diferentes para decidir cuando muere una partícula. Por ejemplo, podría entrar en contacto con otro objeto, o simplemente podría dejar la pantalla. Para nuestro primer objeto Particle, sin embargo, simplemente vamos a añadir una propiedad timeToLive (tiempo de vida). Actuará como un cronómetro, contando desde 255 hasta 0, momento en el que consideraremos que la partícula está "muerta". Así que extendemos el objeto Particle como sigue:
// Un objeto Particle sencillo
var Particle = function(position) {
  this.acceleration = new PVector();
  this.velocity = new PVector();
  this.position = position.get();
  this.timeToLive = 255;
};

Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
  this.timeToLive -= 2;
};

Particle.prototype.display = function() {
  stroke(255, 255, 255, this.timeToLive);
  fill(127, 127, 127, this.timeToLive);
  ellipse(this.position.x, this.position.y, 8, 8);
};
La razón por la cual decidimos iniciar timeToLive en 255 y contar regresivamente hasta 0 es por conveniencia. Con esos valores, también podemos utilizar timeToLive como la transparencia alfa para la elipse. Cuando la partícula esté “muerta” también se habrá desvanecido en la pantalla.
Con la incorporación de la propiedad timeToLive, también necesitaremos un método adicional: una función a la que se le pueda consultar (para una respuesta true o false) si la partícula está viva o muerta. Esto va a ser útil cuando estemos escribiendo el objeto ParticleSystem, cuya tarea será administrar la lista de las propias partículas. Escribir esta función es bastante fácil; solo necesita regresar true si el valor de timeToLive es menor que 0.
Particle.prototype.isDead = function() {
  return this.timeToLive < 0;
};
Antes de llegar al siguiente paso de hacer muchas partículas, vale la pena tomarse un momento para asegurarnos de que nuestra partícula funcione correctamente y crear un boceto con un solo objeto Particle. Aquí está el código completo, con dos pequeñas adiciones. Agregamos un método de conveniencia llamado run() que simplemente llama tanto a update() como a display(). Además, a la partícula le damos una velocidad inicial aleatoria, así como una aceleración hacia abajo (para simular la gravedad).
Ahora que tenemos un objeto para describir una sola partícula, estamos listos para el siguiente gran paso. ¿Cómo podemos llevar un seguimiento de muchas partículas, cuando no podemos asegurar exactamente cuántas partículas podemos tener en un momento dado?

¿Quieres unirte a la conversación?

¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.