Saltearse al contenido
Sistemas Físicos Interactivos 1

Unidad 8

Introducción 📜

¿Qué aprenderás y demostrarás en esta unidad? 💡

Actividad 01

Retomando la metodología de diseño Input-Process-Output para el proyecto final

👣 Pasos:

  1. Refresca tu memoria sobre I-P-O:
    • Revisa tus notas de la Unidad 1 y el texto de Hübner.
    • Reflexiona: ¿Cómo ha evolucionado tu comprensión de I-P-O ahora que has manejado múltiples inputs y outputs?
  2. I-P-O con Procesamiento en el Cliente:
    • Inputs: identifica las fuentes de datos (Móvil vía Socket/Node, Micro:bit vía Serial, Computador local p5.js - teclado/mouse).
    • Puente (Node.js): entiende su rol limitado, es decir, solo retransmitir mensajes entre el móvil y el cliente p5.js. No procesa ni almacena estado significativo.
    • Process (Cliente p5.js): reconoce que aquí es donde combinarás los datos recibidos (del micro:bit directamente, del móvil vía Node.js, y locales), aplicarás tu lógica creativa y tomarás decisiones.
    • Output (Cliente p5.js): la visualización que resulta de tu proceso local.
  3. La intención guía la integración: discute cómo el modelo I-P-O te ayuda a diseñar la lógica de integración que correrá en tu cliente p5.js, asegurando que la combinación de inputs sirva a un propósito o narrativa.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Investigación y Diseño Conceptual 🔎

Actividad 02

Inspiración I-P-O - análisis aplicado de ejemplos

👣 Pasos:

  1. Selecciona 2 ejemplos: elige dos casos de estudio.
  2. Análisis I-P-O aplicado: para cada proyecto seleccionado, describe detalladamente:
    • Input(s): ¿Qué datos específicos usa? ¿De qué fuentes (sensores físicos, datos web, interacción humana)? ¿Hay múltiples tipos de input integrados?
    • Process: ¿Cuál parece ser la transformación clave? ¿Cómo se relacionan los inputs y cómo influyen en el resultado? Infiere la lógica o reglas. Intenta imaginar dónde podría estar ejecutándose esta lógica (¿En un servidor centralizado, en cada cliente, en el propio dispositivo físico?).
    • Output(s): ¿Cómo se materializa el resultado? (visualización, sonido, objeto físico, etc.). ¿Es reactivo en tiempo real?
    • Narrativa/Concepto: ¿Qué historia cuenta o qué idea explora el proyecto a través de esta estructura I-P-O?
  3. Reflexión para tu proyecto: ¿Cómo estos ejemplos te inspiran para tu proyecto final? ¿Qué ideas te dan sobre cómo manejar y combinar datos de diferentes fuentes dentro de p5.js? ¿Qué enfoques de Outputs visuales/interactivos te atraen?

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 03

Tu proyecto I-P-O - definición conceptual

👣 Pasos:

  1. Brainstorming integrador:
    • Piensa en cómo tu sketch p5.js puede recibir datos del micro:bit (Serial) y del móvil (vía Node/Socket.IO) y combinarlos con inputs locales (teclado/mouse).
    • Genera al menos 3 ideas conceptuales distintas que integren inputs de al menos dos fuentes externas (móvil, micro:bit), especificando cómo la lógica en p5.js los combinaría para una narrativa. Ej: “Un jardín zen digital donde las ondas (Output) son generadas por el movimiento suave del micro:bit (Input Serial), pero perturbadas por toques bruscos en el móvil (Input Socket)”.
  2. Selecciona y refina tu concepto final: elige la idea que te resulte más significativa, interesante y factible técnicamente para implementar la lógica en p5.js.
  3. Documenta tu Concepto I-P-O (Proceso en Cliente):
    • Título provisional:
    • Narrativa/Concepto central:
    • Inputs específicos: (lista detallada de cada input, su dispositivo y justificación, incluyendo al menos micro:bit y móvil).
    • Process (descripción conceptual - Lógica en p5.js): describe claramente cómo tu sketch p5.js recibirá, interpretará y combinará los diferentes inputs para transformar la información y tomar decisiones. ¿Qué variables de estado necesitará mantener? ¿Qué tipo de cálculos o reglas aplicará?
    • Output deseado (Descripción/Boceto): describe la visualización/interacción resultante en la pantalla del computador (generada por p5.js). Incluye un boceto claro.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 04

Diseño técnico - arquitectura, flujos y protocolos

👣 Pasos:

  1. Diagrama de arquitectura:
    • Dibuja los componentes de la aplicación: Móvil, Micro:bit, Computador (Cliente p5.js - INCLUYE PROCESO Y OUTPUT), Computador (Servidor Node.js - SOLO PUENTE).
    • Incluye Dev Tunnels si es necesario para conectar Móvil <-> Servidor Puente.
    • Dibuja flechas claras:
      • Micro:bit -> Cliente p5.js (Serial).
      • Móvil -> Servidor Puente (Socket.IO).
      • Servidor Puente -> Cliente p5.js (Socket.IO - reenviando datos del móvil).
      • Computador Local -> Cliente p5.js (Eventos p5.js - teclado/ratón).
  2. Tecnologías de Comunicación:
    • Micro:bit -> Cliente p5.js: Web Serial API.
    • Móvil -> Servidor Puente: Socket.IO.
    • Servidor Puente -> Cliente p5.js: Socket.IO.
  3. Protocolos de Datos Precisos: Define formatos exactos:
    • Micro:bit -> Cliente p5.js (Serial): Formato ASCII o binario.
    • Móvil -> Servidor Puente (Socket.IO): el evento (ej: touch) y el formato JSON (ej: { "touchX": ..., "touchY": ... }).
    • Servidor Puente -> Cliente p5.js (Socket.IO): mismo JSON que recibió del móvil. (El servidor no lo modifica).
  4. Esquema Lógico del Servidor (¡Muy Simple!):
    • Describe en pseudocódigo/diagrama cómo server.js:
      • Recibe evento del móvil.
      • Inmediatamente, emite (broadcast o io.emit) el evento.
      • (No almacena estado, no procesa datos).
  5. Esquema Lógico del Cliente p5.js (Process + Output):
    • Describe en pseudocódigo/diagrama cómo desktop/sketch.js:
      • Conecta y lee datos del Micro:bit (Web Serial), parsea.
      • Conecta al Servidor Puente (Socket.IO).
      • Escucha eventos del móvil, parsea JSON.
      • Maneja inputs locales (teclado/ratón).
      • Implementa la lógica del Process: almacena estado necesario, combina/interpreta datos de todas las fuentes (Serial, Socket, Local), aplica reglas/cálculos.
      • Usa los resultados del proceso para actualizar variables de dibujo/interacción.
      • Genera el Output visual/interactivo en draw().

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Aplicación e Implementación 🛠

Actividad 05

Inputs y el puente Node.js

👣 Pasos:

  1. Configura el Entorno:
    • Estructura de carpetas para el proyecto. Puedes usar la misma estructura que en la unidad 7.
    • Configura server.js básico (Express, HTTP, Socket.IO, static files).
  2. Implementa código de inputs:
    • micro:bit: programa el envío de datos por serial según tu protocolo.
    • cliente móvil: adapta/crea public/mobile/sketch.js. Código para conectar al servidor puente, captura inputs y envío.
  3. Implementa el servidor puente (Node.js):
  4. Prepara el Cliente p5.js (Receptor):
    • En public/desktop/sketch.js:
      • Configura la conexión Socket.IO al servidor puente.
      • Implementa la estructura básica para Web Serial (conectar, leer).
      • Añade los listeners socket.on('mobileInputForwarded', (data) => { ... }); y el código para parsear los datos seriales.
      • Usa console.log dentro de estos listeners y en la lectura serial para verificar que los datos crudos llegan al cliente p5.js.
  5. Prueba y Depura Flujo de Datos Crudos:
    • Verifica: ¿El Micro:bit envía datos? ¿El cliente p5.js los lee por Serial?
    • Verifica: ¿El móvil envía datos al servidor puente? ¿El servidor los reenvía? ¿El cliente p5.js los recibe por Socket.IO?
    • Enfócate SÓLO en que los datos lleguen correctamente al cliente p5.js. Aún no implementes el Process.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 06

Proceso y Output en p5.js

👣 Pasos:

  1. Implementa el Process en Cliente p5.js:
    • Maneja también inputs locales (teclado/ratón) si forman parte de tu concepto, actualizando variables de estado.
    • Crea la lógica principal del Process: escribe funciones o código (puede ser dentro de draw() o en funciones separadas llamadas desde draw()) que lean las variables de estado (con los últimos datos de todas las fuentes), las combinen, apliquen tus reglas/cálculos definidos en el concepto I-P-O, y determinen los parámetros para el output (ej: tamaño, color, posición, sonido).
  2. Implementa el Output en Cliente p5.js:
    • En la función draw(): usa los parámetros calculados por tu lógica de Process para dibujar en el canvas, modificar elementos visuales, controlar sonido, etc.
    • Asegúrate de que el output refleje visual o interactivamente la combinación de los inputs según tu narrativa.
  3. Pruebas de Integración (End-to-End con proceso local):
    • Ejecuta todo: servidor puente, móvil, conecta micro:bit, escritorio (p5.js).
    • Interactúa con todos los inputs.
    • Observa si el Output en p5.js reacciona como esperabas, reflejando la lógica de combinación y procesamiento que implementaste ahí mismo.
    • Depura la lógica del Process dentro de p5.js usando console.log para ver valores intermedios y el resultado del procesamiento antes de dibujar.
  4. Refinamiento: ajusta la lógica del proceso, la estética del output, la sensibilidad a los inputs, etc., para lograr el efecto deseado y comunicar tu concepto eficazmente.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Consolidación y Metacognición 🤔

Actividad 07

Documentación final

👣 Pasos:

  1. Estructura el Reporte Final (Arquitectura Corregida): Organiza un documento con:
    • Título, resumen.
    • Concepto I-P-O: narrativa, Inputs, Process (descripción de la lógica implementada en p5.js), Output.
    • Diseño técnico: diagrama de arquitectura final. Tecnologías y protocolos detallados (actualiza si realizaste cambios).
    • Implementación: descripción breve de componentes (Micro:bit, Móvil, servidor puente, Cliente p5.js: incluye recepción, proceso, output). Instrucciones claras y probadas para ejecutar (incluyendo iniciar el servidor puente y abrir el cliente p5.js).
    • Resultados: el video.
    • Reflexión crítica: decisiones de diseño (¿Por qué esta arquitectura?). Desafíos. Aprendizajes. Mejoras futuras.
  2. Redacta y revisa: completa cada sección asegurando claridad y coherencia con la implementación final. Verifica las instrucciones de ejecución.

📝 Actividad pendiente por iniciar

El archivo student.md está vacío

Actividad 08

Reflexión final del curso

👣 Pasos:

  1. Recorre el camino: revisa tus trabajos y notas de unidades anteriores.
  2. Reflexión:
    • ¿Cómo tu proyecto final integró habilidades previas?
    • ¿Cuál fue el mayor desafío: la comunicación entre dispositivos, la lógica del proceso, o la visualización del output?
  3. Evalúa tu transformación:
    • Revisa el resultado de aprendizaje específico del curso. ¿Llegaste al resultado esperado? ¿Cómo lo sabes?
  4. Proyecta el Futuro:
    • ¿Cómo aplicarás estas habilidades de diseño I-P-O, integración hardware-software mediante protocolos de comunicación en otros contextos? Describe 2 ideas.
    • ¿Qué te gustaría explorar ahora que terminaste el curso?
  5. Metarreflexión:
    • ¿Qué consejo le darías a un compañero que vea por primera vez el curso para aprovecharlo al máximo?

📝 Actividad pendiente por iniciar

El archivo student.md está vacío