---
title: "PROYECTO FINAL: Espacios Vivos"
---

# Generalidades

Utiliza Processing para desarrollar un *prototipo* de **composición visual basada en múltiples elementos animados**.

La idea es considerar que esta composición visual exista como **parte de un espacio físico**, ya sea través de proyecciones, *video walls*, u otro tipo de *displays*.

Presentarás tu prototipo como video, y un *mockup* estático de cómo se vería en el espacio que elijas o diseñes.

Puedes trabajar **individualmente** o **en pareja**.

## Inspiración

Algunos ejemplos de *displays* creativos, *video walls* y proyecciones que pueden darte ideas de cómo contextualizar tu composición.

* [Harcourt Wall x Sosolimited](https://www.sosolimited.com/work/harcourt-wall/)
* [Patterned by Nature x Sosolimited](https://www.sosolimited.com/work/patterned-by-nature/)
* [IAC Video Wall](https://www.youtube.com/watch?v=VhsDZM_4euc)
* [Centro de Cultura Digital](https://www.youtube.com/watch?v=Am4Y6IMO5us)
* [Epson PowerLite L Laser Projectors | Projection Mapping at Temple House](https://www.youtube.com/watch?v=K4MZ-K_VA3Q)

# Aspectos técnicos del código

El tamaño de lienzo de tu composición ha de tener **al menos 1200px de ancho**.

La composición visual ha de consistir primordialmente de **múltiples instancias animadas** de algún **elemento que diseñes**.

El código ha de estar desarrollado utilizando las siguientes herramientas:

* **Arreglos** numéricos
* **Ciclos** `while` o `for`
* **Función propia** de dibujo con **parámetros**
* **Animación**

Queda a tu consideración elegir qué parámetros de dibujo animarás, cuáles dejarás fijos pero serán diferentes entre cada instancia, y cuáles serán constantes en todas las instancias. Por ejemplo:

* Posiciones
* Dimensiones
* Colores
* Rotaciones
* Etc.

**Opcionalmente**, si lo deseas incorpora algún aspecto de **interactividad con mouse o teclado**, que sirva para *simular* alguna interacción que podría suceder en el espacio físico. Por ejemplo: la composición cambia cuando alguien está cerca, la composición sigue la posición horizontal de una persona, etc.

# Procedimiento sugerido

Los siguientes pasos son una aproximación a un proceso creativo que parte de una idea general y va construyendo cada elemento desde la base.

1. Realiza **boceto(s)** de la composición visual que quieres desarrollar.
	* Identifica cuál sería el **elemento base** que se repite
	* Identifica qué **parámetros** de ese elemento serían **distintos** en cada instancia, y cuál(es) estarían animados (y de qué manera)
2. Realiza **boceto(s)** del **elemento base** que repetirás en la composición
	* Toma en cuenta los **parámetros** que decidiste
3. Construye una **función de dibujo con parámetros** que dibuje a una instancia de ese elemento de acuerdo a parámetros dados.
	* Recuerda los ejemplos que hemos realizado utilizando con `pushMatrix();`, `translate(x,y);` y `popMatrix();` dentro de la función de dibujo para poder colocar al dibujo en cualquier posición del lienzo.
4. **Prueba** tu función de dibujo llamándola desde un *sketch* de Processing, asegurándote de que los parámetros cambien lo que diseñaste.
	* Por ejemplo, si la función tiene parámetros `x,y` para dibujar el elemento en una posición específica, prueba llamarla con diferentes valores numéricos para asegurarte de que sea así.
5. Declara y crea **un arreglo por cada parámetro que quieres que sea distinto** entre elementos, de acuerdo a lo que identificaste previamente.
6. **Inicializa** los arreglos en `setup()` como consideres adecuado según tu diseño: manualmente, elementos iguales, aleatorios, siguiendo algún patrón.
7. Utiliza un ciclo para **leer**  (y **modificar**, si están animados) los valores de los arreglos dentro de `draw()`, usándolos como parámetros de tu función de dibujo.
8. Ajusta lo que consideres necesario:
	* La función de dibujo
	* Los arreglos a utilizar
	* Las técnicas de animación
	* etc
9. Captura tu resultado y utilízalo para realizar un *mockup*

# 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 Final tus referencias, avances, bocetos, código, resultados, dudas, comentarios, etc. al final de cada sesión de trabajo.

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 última sesión del curso.

Utiliza entre 5 y 10 minutos para compartirnos:

* Descripción general de tu proyecto: título, descripción, contexto
* Demostración del proyecto: imágenes y videos resultantes, *mockups*
* 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/diapositivas en PDF a entregar a más tardar al finalizar la última sesión del curso, en la sección correspondiente de Actividades.

Incluye en este documento/diapositivas:

* Descripción general de tu proyecto: título, descripción, contexto
* Demostración del proyecto: imágenes resultantes, enlaces a videos resultantes, *mockups*
* 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 14**: Planeación, concepto, referencias visuales, bocetos en papel y primeras pruebas en Processing
* **Sesión 15**: Desarrollo general del proyecto.
* **Sesión 16**: Presentaciones y entrega

*Recuerda: publica en el foro tus avances durante los últimos minutos de las sesiones 14 y 15*

# Recomendaciones

**Documenta frecuentemente** tu proceso: Te recomiendo guardar **versiones distintas** del código cada vez que hagas cambios significativos, y hacer **capturas de imagen y/o video** 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**!

# Notas relevantes

## Arreglos

* [[Arreglos: Fundamentos]](/notas/arreglos.html)

## Ciclos

* [[Ciclos while y for]](/notas/ciclos.html)
* [[Repeticiones alternadas: Ciclos, módulo y condicionales]](/notas/ciclos-modulo.html)
* [[Ciclos anidados: Repetición en dos dimensiones]](/notas/ciclos-anidados.html)

## Animación

* [[Animación básica con acumuladores]](/notas/animacion-basica.html)
* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)

## Dibujo

* [[Dibujo de polígonos]](/notas/poligonos.html)
* [[Transformaciones]](/notas/transformaciones.html)
* [[Funciones de dibujo]](/notas/funciones-dibujo.html)
* [[Coordenadas polares]](/notas/coordenadas-polares.html)
* [Tutorial: Copos y flores (Funciones y transformaciones)](/tutoriales/c3-copos-flores.html)
