12. Hazlo tuyo y entrega

Paso 4/4 de práctica 2 "Partículas conectadas"

El programa está completo. Ahora es tu turno de tomar decisiones para diferenciarlo. Aquí tienes ideas ordenadas de menor a mayor dificultad.

Color

Cambia el fondo a negro y las partículas a blanco: las líneas de conexión quedan con un aspecto completamente distinto:

background(0);
fill(255);
stroke(255);

Para añadir color a las partículas puedes usar el modo HSB que viste en Paso 6/8 (práctica1 Lienzo interactivo) — Cambio de color. Asigna a cada partícula un tono aleatorio al inicializarla y úsalo al dibujarla.

Haz que las líneas sean más transparentes cuanto mayor sea la distancia entre las partículas. El cuarto parámetro de stroke() es el alfa (0 = transparente, 255 = opaco):

stroke(0, map(d, 0, dMin, 200, 0));

Advertencia

Vigila dónde colocar cada línea de código

Movimiento autónomo

Puedes usar frameCount con sin() para hacer que las partículas «palpiten», variando su tamaño de forma cíclica. Es el mismo recurso que viste en Paso 8/8 — Entrega y reto extra de la práctica 1:

../_images/javascript-eg-208.png 
// El tamaño oscila entre 4 y 12 píxeles de forma continua
let pulso = map(sin(frameCount * 0.05), -1, 1, 4, 12);
circle(px[i], py[i], pulso);

Varía dMin con la posición horizontal del ratón para que las líneas de conexión cambien en tiempo real:

dMin = map(mouseX, 0, width, 30, 200);

Interacción con el teclado

Añade la función keyPressed() para que al pulsar una tecla todas las partículas vuelvan al centro con velocidades nuevas, como si se regeneraran:

../_images/javascript-eg-209.png

Mientras no se pulse ninguna tecla, las partículas siguen moviéndose con normalidad. Al pulsar cualquier tecla, se reinician desde el centro.

Entrega

Cuando tu composición esté terminada:

  • Guarda el proyecto en el editor (necesitas cuenta para guardarlo online).

  • Copia el enlace del proyecto (botón Share en el editor).

  • Entrega el enlace respondiendo a las preguntas de esta ficha:

Título de tu composición

¿Hasta qué paso llegaste?

¿Qué efecto produce cambiar dMin? Describe un valor concreto que hayas probado.

¿Qué variación añadiste respecto al programa base?

¿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

let px = []

Declara un array vacío para guardar una lista de valores.

px[i]

Accede al elemento i del array (el índice empieza en 0).

for (let i = 0; i < nb; i = i + 1)

Repite el bloque nb veces, con i tomando los valores 0, 1, 2…

if (x < 0 || x > width)

Ejecuta el bloque si x sale por cualquiera de los dos bordes.

random(a, b)

Devuelve un número aleatorio entre a y b.

dist(x1, y1, x2, y2)

Calcula la distancia en píxeles entre dos puntos.

For anidado

Un bucle for dentro de otro: compara cada partícula con todas las demás.

keyPressed()

Función que se ejecuta automáticamente al pulsar cualquier tecla.