w3.unpo<code>todo

Que queremos conseguir

Queremos crear una especie de fuente, donde todas las partículas emanan de un punto con una cierta velocidad, dejando que la gravedad haga el rest

See the Pen Fuente de partículas #2 by Gabi (@enxaneta) on CodePen.

El constructor

La función Particula es un constructor, o sea un método utilizado para crear un prototipo de partícula.

function Particula() {
  this.x = cx;
  this.y = 3 * ch / 4;
  this.r = 5;
  this.pn = ~~(Math.random() > .5 ? 1 : -1); //positivo o negativo
  this.deriva = randomIntFromInterval(5, 15) / 10;
  this.velocidad = -randomIntFromInterval(4, 7); //lanzamiento vertical
}

Las partículas emanan todas de un punto dado, cuyas coordenadas son x e y:

this.x = cx;
this.y = 3 * ch / 4;

donde cx representa la coordenada en x del centro del canvas y ch representa la altura del canvas.

La velocidad de cada partícula tiene al inicio un valor negativo, por lo cual las partículas son proyectadas hacia arriba. Es importante que las partículas tengan una velocidad escogida al azar dentro de un intervalo de valores dado, en este caso entre 4 y 7.

this.velocidad = -randomIntFromInterval(4, 7);

donde la función randomIntFromInterval genera un integro dentro de un intervalo de valores dado.

function randomIntFromInterval(minimo, maximo) {
  return ~~(Math.random() * (maximo - minimo + 1) + minimo);
}

Otra propiedad, la deriva, hace que las partículas tengan un movimiento lateral, hacia la derecha, si pn > 0, o hacia la izquierda, si pn < 0;

this.pn = ~~(Math.random() < .5 ? 1 : -1); //positivo o negativo
this.deriva = this.pn*randomIntFromInterval(5, 15) / 10;

Las partículas

Para mantener las cosas sencillas, las partículas son, en este caso, unos cuadraditos pequeños cuya anchura, respectivamente altura es this.r = 5. Para dibujarlos utilizamos el método fillRect();

Particula.prototype.dibujar = function() {
  ctx.beginPath();
  ctx.fillRect(this.x, this.y, this.r, this.r);
}

La animación

Lea más acerca de animaciones en canvas utilizando el método requestAnimationFrame.

var particulas = [];

function Animacion() {
  elId = window.requestAnimationFrame(Animacion);
  fotogramas++;
  ctx.clearRect(0, 0, cw, ch);
  if (particulas.length < numParticulas) {
    var o = new Particula();
    particulas.push(o);
  }
  for (var p = 0; p < particulas.length; p++) {
    particulas[p].actualizar();
    particulas[p].dibujar();
  }
}		

La animación crea 50 partículas y las recupera una a una, una vez salidas de la pantalla. Veamos cómo:
Primero la animación crea una a una las partículas, en total 50 ( numParticulas ) cuadraditos, y guarda estas partículas en el array particulas.

if (particulas.length < numParticulas) {
   var o = new Particula();
   particulas.push(o);
}

También actualiza los parámetros de cada partícula:

Particula.prototype.actualizar = function() {
  if (this.y > -this.r &&
    this.y < ch &&
    this.x > -this.r &&
    this.x < cw
  ) {
    this.velocidad += gravedad;
    this.y += this.velocidad;
    this.x += this.deriva;
  } else {
    this.x = cx;
    this.y = 3 * ch / 4;
    this.pn = ~~(Math.random() < .5 ? 1 : -1);
    this.velocidad = -randomIntFromInterval(4, 7);
  }
}

Si la partícula se encuentra en el canvas:

if (this.y  > -this.r 
  && this.y < ch
  && this.x > -this.r &&
  && this.x < cw 
)...

entonces a la velocidad de cada partícula le sumamos la gravedad. Como que la velocidad inicial tiene un valor negativo y la gravedad tiene un valor positivo, esto frena la partícula hasta un punto donde la velocidad = 0. Desde este punto la velocidad crece a valores positivos, y la partícula "cae" y finalmente sale del canvas.

this.velocidad += gravedad;
this.y += this.velocidad;
this.x += this.deriva;

Una vez fuera del canvas recuperamos la partícula colocándola de nuevo en el punto de partida.

this.x = cx;
this.y = 3 * ch / 4;
this.pn = ~~(Math.random() < .5 ? 1 : -1);
this.velocidad = -randomIntFromInterval(4, 7);

De esta manera parece que un gran número de partículas son creadas continuamente, cuando de hecho hay solo 50 cuadraditos que se reciclan sin parar.

See the Pen Fuente de partículas #2 by Gabi (@enxaneta) on CodePen.