jardinBit/src/actividades/c2-graficos-interactivos.md

5.7 KiB

title
PROYECTO PARCIAL: Gráficos Interactivos

Generalidades

Realiza una composición visual en Processing que use expresiones condicionales (if...else) para alternar entre dos o más estados.

Ejemplos de composiciones que podrías realizar:

  • Escena en dos estados
  • Setup de VJ
  • Herramienta de dibujo
  • Personaje en mundo 2D

Abajo se detallan más posibilidades de cada una.

Entrega

La entrega del proyecto consistirá en tres partes:

  • Avances del proceso
  • Presentación en vivo
  • Dossier en PDF

Avances del proceso

Publica en el foro del Proyecto Parcial tus referencias, avances, bocetos, código, resultados, dudas, comentarios, etc. al final de cada sesión (8, 9 y 10).

Hacerlo te permitirá tener retroalimentación oportuna y te facilitará tener registrado tu proceso creativo para los otros dos puntos.

Si gustas publicar más seguido, ¡adelante!

Presentación en vivo

Presentarás tu proyecto al grupo en la sesión 11.

Utiliza entre 5 y 8 minutos para compartirnos:

  • Descripción general de tu proyecto: título, descripción, contexto
  • Demostración del proyecto: imágenes y videos resultantes, demostración de interacciones en vivo o pregrabadas
  • Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
  • Conclusiones: lecciones, posible trabajo a futuro

Dossier en PDF

Complementa tu presentación con un documento PDF a entregar a más tardar al finalizar la sesión 11, en la sección correspondiente de Actividades.

Incluye en este documento:

  • Descripción general de tu proyecto: título, descripción, contexto
  • Demostración del proyecto: imágenes resultantes, enlaces a video(s) que lo muestren en funcionamiento.
  • Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
  • Conclusiones: lecciones, posible trabajo a futuro
  • Código fuente completo y documentado con comentarios

Puedes utilizar este dossier como apoyo visual para tu presentación en vivo

Cronograma de trabajo propuesto:

La idea es realizar el proyecto en su totalidad durante las sesiones en vivo. Es tiempo suficiente siempre y cuando definamos bien el alcance del proyecto.

  • Sesión 8: Planeación y concepto, prototipos, definición del alcance del proyecto y obstáculos a superar.
  • Sesión 9: Desarrollo general del proyecto
  • Sesión 10: Resolución de dudas, finalización del proyecto, captura de resultados visuales, preparación de documentación y presentación.
  • Sesión 11: Presentaciones y entrega

Recuerda: publica en el foro tus avances durante los últimos minutos de las sesiones 8 y 9

Recomendaciones

Documenta frecuentemente tu proceso: Te recomiendo guardar versiones distintas del código cada vez que hagas cambios significativos, y hacer capturas de imagen en todas las etapas.

Estaré presente en las sesiones para asesoría y resolución de dudas a nivel individual y grupal. ¡No dudes en compartir tus preguntas!

Descripción de ejemplos

Estas son posibles sugerencias en las cuales basarte para tu proyecto.

1) Escena en dos estados

Una escena que se muestra de cierta manera, y al recibir interacción (como un click o una tecla) se muestra de otra forma.

Posibles ejemplos:

  • Interior con / sin iluminación
  • Paisaje de día / de noche
  • Mundo con / sin basura (?)
  • etc

A considerar:

  • ¿Hay partes del dibujo que se muestren siempre?
  • ¿Lo que cambia entre cada estado es el color o también figuras?
  • Puedes hacer todo el dibujo dentro del if, copiarlo al else, y ahí hacer las modificaciones.

Posibilidades extra a implementar:

  • ¿Y si agregas animaciones sencillas en cada estado?
  • ¿Y si la interacción con el mouse sucede solo en cierta área del canvas? (e.g. la luz se enciende al dar click en una pared)

2) Setup de VJ

Un sketch que muestre diferentes visuales / animaciones según la tecla que se presione.

Posibles ejemplos:

  • Pantalla de diferente color
  • Diseños con diferentes figuras (líneas, rectángulos, elipses)
  • Animaciones sencillas en una u otra dirección
  • Animaciones de cambio de brillo o color

Posibilidades extra a implementar:

  • ¿Y si usas teclas para modificar parámetros de las animaciones, como la velocidad de movimiento?
  • ¿Y si agregas animaciones que dependan de alguna forma del movimiento del mouse?

3) Herramienta de dibujo

Un sketch que te permita dibujar con alguna figura sobre el canvas.

Posibles ejemplos:

  • Deja marca con el mouse cuando lo presiones (y si no, no)
  • Deja marca con un puntero que se controla con el teclado

Posibilidades extra:

  • ¿Y si usas teclas para cambiar la figura, tamaño y/o color con los que dibujas?
  • ¿Y si agregas alguna acción para "borrar" el dibujo?
  • ¿Y si el color con el que dibujas cambia solo?
  • ¿Y si agregas alguna acción para "guardar" el dibujo?

4) Personaje en mundo 2D

Un sketch que muestre a una fracción de un mundo 2D que puedas recorrer con un personaje controlado por el mouse o teclado.

Posibles ejemplos:

  • Laberinto
  • Isla pequeña
  • Espacio exterior

Posibilidades extra:

  • ¿Y si componentes del mundo 2D están animados?
  • ¿Y si juegas con el orden de dibujo para que tu personaje pueda estar detrás o adelante de objetos?
  • ¿Y si cambias el aspecto del personaje mientras se mueve?
  • ¿Y si cambias el aspecto del personaje según a dónde se mueva?

Por el momento no te preocupes por lo que se llama "detección de colisiones"

Notas relevantes