Saltearse al contenido
Sistemas Físicos Interactivos 2

Unidad 7

Introducción 📜

¿Qué aprenderás en esta unidad? 💡

Actividad 01

Preparación del entorno de desarrollo

👣 Pasos:

  1. Revisa tu Blueprint: lee de nuevo tu blueprint algorítmico de la Unidad 6. Asegúrate de tener claros los inputs, el proceso, los outputs y la posible necesidad de simulación y/o servidor.
  2. Crea la estructura de carpetas: en tu computador, crea una carpeta principal para tu proyecto de Unidad 7. Dentro de ella, organiza las subcarpetas necesarias.
  3. Crea archivos iniciales: dentro de las carpetas correspondientes, crea los archivos básicos:
    • Cliente(s) p5.js: index.html, sketch.js, style.css. Si tienes múltiples clientes, replica esta estructura o planifica cómo gestionarlos.
    • Servidor (basado en Unidad 3): server.js, package.json.
  4. Configura el HTML Básico: en index.html, incluye la estructura HTML mínima y enlaza las librerías necesarias (p5.js, p5.sound, y socket.io-client o p5livemedia si los usas).
  5. Configura el setup() y draw() iniciales: en sketch.js, escribe las funciones setup() y draw() vacías o con la configuración mínima del canvas.
  6. (Servidor) configura package.json y server.js básico: crea el package.json (puedes usar npm init -y) e instala dependencias (npm install express socket.io si aplica). Escribe la estructura básica del servidor en server.js para que pueda iniciarse (similar a lo visto en Unidad 3).

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Investigación 🔎

Actividad 02

Implementando el núcleo del proceso y la simulación

👣 Pasos:

  1. Codifica la lógica del Proceso:
    • Dentro de sketch.js (probablemente en la función draw() o en funciones auxiliares llamadas desde draw()), traduce las reglas, pasos y lógica descritos en la sección “Proceso” de tu blueprint a código p5.js.
    • Enfócate primero en la transformación central, incluso si aún no usas los inputs/outputs finales. Define las variables clave que representarán el estado interno de tu sistema.
  2. Implementa la simulación de Inputs:
    • Basándote en tu Plan de simulación (Unidad 6), escribe el código para generar los datos simulados.
    • Usa random(), noise(), sliders en pantalla (requiere añadir elementos al HTML y usar createSlider() en p5.js), u otros métodos que hayas planeado.
    • Almacena estos valores simulados en variables globales o pásalos a las funciones relevantes. Considera una variable booleana usarSimulacion para activarla/desactivarla fácilmente.
  3. Conecta simulación al Proceso (inicial): haz que la lógica del proceso que codificaste en el paso 1 utilice los datos simulados como si fueran los inputs reales.
  4. Prueba inicial: ejecuta tu sketch. Usa print() o console.log() para verificar que los datos simulados se generan como esperas y que la lógica del proceso los está utilizando y calculando valores intermedios correctamente. Aún no te preocupes demasiado por el output visual final.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 03

Estableciendo la comunicación

👣 Pasos:

  1. Configura el servidor (Node.js/Socket.IO):
    • En server.js, configura Express y Socket.IO para escuchar conexiones.
    • Implementa los manejadores de eventos básicos de Socket.IO (connection, disconnect).
    • Define los nombres de los mensajes (socket.on('nombreMensaje', ...) y socket.emit('nombreMensaje', ...) o io.emit(...)) que planeas usar según tu diseño IPO, pero manten la lógica dentro de ellos muy simple por ahora (ej: solo imprimir en consola que se recibió/envió el mensaje).
  2. Configura el cliente (p5.js/Socket.IO):
    • En sketch.js (o un archivo JS separado), inicializa la conexión de Socket.IO al servidor.
    • Implementa los manejadores socket.on('nombreMensaje', ...) para recibir mensajes del servidor o de otros clientes. Por ahora, solo imprime en la consola del navegador que se recibió el mensaje.
    • Implementa funciones básicas para enviar mensajes (socket.emit('nombreMensaje', datos)) desde el cliente (ej: al hacer clic con el mouse), enviando datos muy simples.
  3. Prueba la conexión: ejecuta el servidor y abre el/los cliente(s) en el navegador. Verifica en las consolas (servidor y navegador) que la conexión se establece y que los mensajes básicos se envían y reciben correctamente en ambas direcciones.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Aplicación 🛠

Actividad 04

Integrando Inputs y Outputs al flujo

👣 Pasos:

  1. Conectar Inputs al Proceso:
    • Modifica el código del “Proceso” (Actividad 02) para que ahora utilice activamente los valores de los inputs (sean los simulados de Actividad 02, o los recibidos por red de Actividad 03, o inputs directos del navegador como mouseX, mouseY).
    • Asegúrate de que los cambios en los inputs provoquen cambios en las variables internas o en el flujo lógico del proceso, tal como lo diseñaste.
  2. Generar Outputs desde el Proceso:
    • Basándote en la sección “Outputs” de tu blueprint, escribe el código (principalmente en draw() o funciones llamadas desde ahí) para generar los elementos visuales o sonoros.
    • Utiliza las variables y resultados calculados por el “Proceso” para controlar las propiedades dinámicas de los outputs (posición, tamaño, color, tono, volumen, etc.). El objetivo es que el output refleje el estado interno del algoritmo, el cual es influenciado por los inputs.
  3. Implementar interacción básica: la interacción directa del usuario (clics, teclado, sliders), implementa los manejadores de eventos correspondientes (mousePressed(), keyPressed(), etc.) para que capturen esos inputs y los integren al flujo.
  4. Prueba el flujo completo: ejecuta tu prototipo. Interactúa con los inputs (o deja correr la simulación/comunicación). Observa si los outputs cambian dinámicamente como respuesta, siguiendo la lógica Input -> Process -> Output que diseñaste. Usa console.log para rastrear valores si algo no funciona como esperas.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 05

Refinamiento, pruebas y depuración

👣 Pasos:

  1. Pruebas sistemáticas: ejecuta tu prototipo y pruébalo intencionadamente bajo diferentes condiciones, basándote en los escenarios “qué pasaría si” que exploraste en la Unidad 6:
    • ¿Qué pasa con inputs extremos?
    • ¿Qué pasa al combinar ciertos inputs?
    • ¿Funciona como esperabas o hay comportamientos inesperados?
  2. Identificación de errores (depuración):
    • Si encuentras errores (código que falla, comportamiento visual/sonoro incorrecto), utiliza console.log() estratégicamente para rastrear los valores de las variables clave en diferentes puntos del código y entender dónde se origina el problema.
    • Revisa la consola del navegador y del servidor en busca de mensajes de error explícitos.
    • Comenta secciones de código temporalmente para aislar el problema.
  3. Corrección de errores: una vez identificado el origen del error, modifica el código para corregirlo.
  4. Refinamiento estético y de comportamiento:
    • Ajusta parámetros (colores, velocidades, tamaños, rangos de sonido, etc.) para que el resultado visual/sonoro sea más cercano a lo que imaginaste.
    • Suaviza transiciones o movimientos si es necesario.
    • Asegúrate de que la respuesta a la interacción sea fluida y clara.
  5. Iteración: repite los pasos de prueba, depuración y refinamiento hasta que estés razonablemente satisfecho con el funcionamiento y la apariencia del prototipo.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Consolidación y metacognición 🤔

Actividad 06

Revisión y limpieza del Código

👣 Pasos:

  1. Lectura crítica del código: lee tu propio código (sketch.js, server.js, HTML, CSS) como si fueras otra persona que necesita entenderlo.
    • ¿Son los nombres de las variables y funciones claros y descriptivos?
    • ¿Está la lógica organizada de forma razonable (ej: uso de funciones auxiliares)?
    • ¿Hay bloques de código repetido que podrían simplificarse?
    • ¿Hay código comentado que ya no es necesario?
  2. Renombrar variables/funciones: si encuentras nombres poco claros, re-nómbralos para mejorar la legibilidad.
  3. Añadir comentarios útiles: agrega comentarios para explicar las partes más complejas o importantes de la lógica, el propósito de ciertas variables o las decisiones de diseño clave. No comentes lo obvio, sino lo que ayuda a la comprensión.
  4. Formateo y organización: asegúrate de que el código esté bien indentado y formateado de manera consistente. Elimina líneas en blanco innecesarias o código muerto (comentado y ya no útil).
  5. Verificación final: ejecuta el código una última vez después de la limpieza para asegurarte de que no introdujiste errores accidentalmente.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 07

Autoevaluación de la implementación

👣 Pasos:

Reflexiona sobre el prototipo implementado y tu experiencia en esta unidad, y responde:

  1. Coincidencia diseño-implementación: ¿Qué tan fielmente lograste implementar la visión y la lógica descritas en tu blueprint algorítmico de la Unidad 6? ¿Hubo desviaciones significativas? ¿Por qué?
  2. Funcionamiento del prototipo: ¿Consideras que el prototipo funciona de manera robusta? ¿Responde a los inputs y genera los outputs de forma coherente y fluida según lo esperado? ¿Identificas alguna limitación o comportamiento no ideal que persiste?
  3. Desafíos técnicos superados: ¿Cuál fue el mayor desafío técnico que enfrentaste durante la implementación (codificar una lógica específica, depurar un error difícil, configurar la comunicación, etc.)? ¿Cómo lo superaste?
  4. Aprendizaje técnico: ¿Qué habilidad o concepto técnico específico (de p5.js, JS, Node, depuración, etc.) sientes que fortaleciste más en esta unidad?
  5. Confianza en el código: ¿Qué tan cómodo y confiado te sientes ahora con el código que has escrito para este proyecto? ¿Hay partes que todavía te resultan confusas?

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 08

Planificación para la documentación final (Unidad 8)

👣 Pasos:

  1. Revisa los requisitos de la unidad 8: asegúrate de entender exactamente qué componentes debe incluir tu documentación final (concepto, narrativa, explicación IPO, video demo, tutorial de reproducción).
  2. Planifica el contenido: para cada componente requerido:
    • Concepto y narrativa: ¿Qué textos clave de la Unidad 5 reutilizarás o adaptarás?
    • Explicación IPO: ¿Cómo resumirás tu diseño IPO (Blueprint de Unidad 6) de forma clara para alguien externo? ¿Qué diagramas o fragmentos de código clave incluirás?
    • Video demo: ¿Qué aspectos clave del prototipo necesitas mostrar en el video? ¿Cómo capturarás la interacción y la generatividad? ¿Qué software usarás para grabar y editar (si es necesario)? (Recuerda: ¡Embebido, no enlace!)
    • Tutorial de reproducción: ¿Qué pasos exactos necesita seguir alguien para clonar/descargar tu código, instalar dependencias (si las hay) y ejecutar el prototipo? Sé muy detallado/a.
  3. Organiza los materiales: haz una lista de los “artefactos” que ya tienes y que necesitarás para la Unidad 8 (código final, blueprint, notas de unidades anteriores, etc.). Identifica lo que aún necesitas crear (el video, la redacción final del tutorial).
  4. Actualiza tu gestión del tiempo: Revisa tu plan de la unidad anterior. ¿Cómo gestionaste el tiempo en la Unidad 7 (implementación)? La Unidad 8 implica escribir, grabar y organizar. ¿Cómo planificarás tu tiempo para completar la documentación final de alta calidad? Define pasos o bloques de tiempo concretos.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío