El destello del paso anterior es sencillo pero poco realista. Ahora vamos
a crear una lluvia de chispas: cuando el cohete explote, que se generen
60 puntos que salgan disparados en todas direcciones, que caigan por la gravedad
y se desvanezcan poco a poco hasta desaparecer.
Para ello necesitamos dos herramientas nuevas: push() para añadir
elementos a un array, y splice() para eliminarlos.
Añadimos una propiedad nueva al objeto: cohete.chispas, que es un
array vacío. Cada chispa será a su vez un objeto con posición, velocidad
y vida:
functionsetup(){createCanvas(windowWidth,windowHeight);cohete.x=width/2;cohete.y=height;cohete.vx=random(-2,2);cohete.vy=random(-10,-5);cohete.explotado=false;cohete.tono=random(360);cohete.chispas=[];// array vacío: se llenará al explotar}
Cuando el cohete alcanza su punto más alto, llenamos el array de chispas
con push(). Cada llamada a push() añade un elemento al final del
array. Las 60 chispas se crean de golpe en un bucle for:
Nota
Compara el for del bloque de código anterior con este:
¿Son iguales? ¿Qué diferencias ves? ¿Cuál te parece más claro y fácil de entender?
En cada fotograma movemos todas las chispas, reducimos su vida y
las dibujamos. Cuando vida llega a 0 las eliminamos del array con
splice().
El bucle recorre el array al revés (de length-1 hasta 0)
para que al eliminar una chispa no se salten las siguientes:
¿Por qué al revés?
Si recorriéramos el array de 0 hacia adelante y elimináramos el
elemento i, el siguiente elemento pasaría a ocupar la posición
i y el bucle lo saltaría. Recorriendo al revés, los índices que
aún no hemos visitado no cambian al eliminar uno.
Nota
splice() recibe dos parámetros: el índice del elemento a
eliminar y el número de elementos a eliminar.
En nuestro caso, siempre eliminamos un solo elemento,
así que el segundo parámetro es 1.
La función pop() también elimina elementos de un array,
pero solo el último.
Cambia el número de chispas de 60 a 120. ¿Qué efecto tiene?
Prueba también a cambiar ch.vida-=4 a ch.vida-=8:
¿las chispas duran más o menos?
Prueba a cambiar el modo de color de RGB a HSB, necesitarías
una nueva variable para variar el tono de las chispas.
¿Podrías hacer que cada chispa tenga un color distinto?
