8. Entrega y reto extra

Paso 8/8 de práctica 1 "Lienzo interactivo"

Con todo lo que has aprendido, es el momento de tomar tus propias decisiones. Aquí tienes la estructura mínima que debe tener tu versión:

function setup() {
  createCanvas(600, 400);
  // Opcional: colorMode(HSB, 360, 100, 100);
}

function draw() {
  background( /* tu color de fondo */ );

  // Al menos una variable calculada con map()
  let ??? = map(mouseX, 0, width, ???, ???);

  // Al menos dos formas distintas
  // Forma principal:
  fill( /* tu color */ );
  ellipse( /* o rect() */ );

  // Forma secundaria:
  fill( /* tu color */ );
  ellipse( /* o rect() */ );
}

Lista de decisiones que debes tomar

1. ¿Qué modo de color usas: RGB o HSB?

2. ¿Cuál es el color de tu fondo? ¿Oscuro o claro?

3. ¿Qué formas usas: círculos, cuadrados, rectángulos, mezcla?

4. ¿Qué controla mouseX: el color, el tamaño, la posición de una forma?

5. ¿Qué controla mouseY: el mismo concepto o algo diferente?

6. ¿Cuántas formas tienes en pantalla al mismo tiempo?

7. ¿Tu fondo borra el fotograma anterior o deja rastro (alpha)?

Entrega

Cuando tu composición esté terminada:

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

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

• Entrega el enlace respondiendo a las siguientes preguntas:

Título de tu composición
¿Qué hace mouseX en tu programa?
¿Qué hace mouseY en tu programa?
¿Qué modo de color usaste y por qué?
¿Qué fue lo más difícil de esta práctica?
¿Qué cambiarías si tuvieras más tiempo?

Reto extra (opcional)

¿Quieres ir más allá? Aquí van unas cuantas ideas:

• frameCount con sin() / cos(): añade frameCount a tu código para crear movimiento autónomo sin necesidad del ratón:

  // sin() devuelve un valor que oscila entre -1 y 1
  // map() lo convierte al rango que necesites
  let oscilacion = map(sin(frameCount * 0.05), -1, 1, 20, 150);
  ellipse(width / 2, height / 2, oscilacion, oscilacion);
  

• mouseIsPressed: haz que tu composición reaccione también al botón del ratón. Usa mouseIsPressed (true/false) para cambiar algo cuando se pulsa el botón.

• Lienzo más grande: cambia el tamaño del lienzo a 800x600 y añade una tercera forma que use tanto mouseX como mouseY de una forma que no hayas usado antes.

Resumen de lo aprendido en esta práctica

Elemento	Para qué sirve
setup()	Se ejecuta una vez. Aquí se crea el lienzo con createCanvas().
draw()	Se ejecuta en bucle continuo. Aquí se dibuja cada fotograma.
background()	Borra el lienzo (o lo oscurece si se añade transparencia).
ellipse() / rect()	Dibujan formas en las coordenadas indicadas.
fill() / stroke()	Establecen el color de relleno y borde antes de dibujar.
mouseX / mouseY	Variables que guardan la posición actual del ratón.
map()	Convierte un valor de un rango a otro proporcionalmente.
colorMode(HSB,...)	Cambia el modelo de color a Tono / Saturación / Brillo.