---
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

* [[Ciclo de animación]](/notas/draw.html)
* [[Interactividad con mouse y teclado]](/notas/interactividad.html)
* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
* [[Animación básica con acumuladores]](/notas/animacion-basica.html)
