17. Hazlo tuyo: fuegos artificiales¶

Paso 5/5 de práctica 3 "Fuegos artificiales"

El programa está completo. Ahora es tu turno de tomar decisiones para diferenciarlo. Ordena las ideas de menor a mayor dificultad.

Color¶

El código ya usa colorMode(HSB). Experimenta con los valores de saturación y brillo de cada chispa para conseguir efectos distintos: chispas pálidas (baja saturación) o muy brillantes (brillo 100).

Haz que las chispas cambien de tono según su vida, usando map() como viste en la práctica 1 Color que cambia con el ratón:

// El tono va del naranja (30) al rojo (0) conforme la chispa se apaga
let tonoChispa = map(ch.vida, 0, 255, 0, 60);
stroke(tonoChispa, 90, 100, ch.vida);

Comportamiento¶

Cambia el fondo de background(0, 0, 0, 40) a background(240, 30, 10, 40) para un cielo oscuro con toque azulado.

Haz que la potencia del cohete dependa de la posición vertical del clic: cuanto más abajo hagas clic, más sube el cohete:

vy: map(mouseY, 0, height, -4, -10)

Lanza un cohete automáticamente cada 90 fotogramas, además de los cohetes manuales. Puedes usar frameCount como viste en la Entrega y reto extra de la práctica 1 de la práctica 1:

// En draw(), antes del bucle de cohetes:
if (frameCount % 90 === 0) {
  cohetes.push({
    x:         random(width),
    y:         height,
    vx:        random(-2, 2),
    vy:        random(-10, -6),
    tono:      random(360),
    explotado: false,
    chispas:   []
  });
}

Ampliación¶

Añade una propiedad tipo a cada cohete ("estrella" o "cascada") y cambia la distribución de velocidades de las chispas según el tipo. En "cascada" las chispas tienen vy siempre positiva, de modo que caen hacia abajo desde el punto de explosión:

// En explotar(), según el tipo:
vy: c.tipo === "cascada" ? random(1, 5) : random(-4, 4)

Entrega¶

Cuando tu composición esté terminada:

Guarda el proyecto en el editor de p5.js (necesitas cuenta para guardarlo online).
Copia el enlace del proyecto (botón Share en el editor).
Entrega el enlace respondiendo a las preguntas de la ficha:

Título de tu composición
¿Qué diferencia notaste al usar un objeto en lugar de variables sueltas?
¿Qué variación añadiste en «Hazlo tuyo»?
¿Qué fue lo más difícil de esta práctica?
¿Qué añadirías si tuvieras más tiempo?

Resumen de lo aprendido en esta práctica¶

Elemento	Para qué sirve
`{ }`	Agrupa propiedades relacionadas en un objeto literal.
`objeto.propiedad`	Accede o modifica una propiedad con notación de punto.
`array.push({ })`	Añade un objeto nuevo al final del array.
`array.splice(i, 1)`	Elimina el elemento en la posición `i` del array.
`vida` / alfa	Hace las chispas más transparentes conforme se apagan.
`explotado`	Booleano que actúa como interruptor de un solo uso en `draw()`.
`mousePressed()`	Se ejecuta cada vez que se hace clic; aquí lanza un cohete nuevo.
Bucle al revés	Recorrer el array de `length-1` a `0` permite borrar elementos sin saltarse ninguno.
Función auxiliar	Extraer lógica repetida a una función hace `draw()` más corto y el código más fácil de ampliar.