Actividad 01

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

👣 Pasos:

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

🚀 Tu solución:

Reflexiones sobre la Metodología Input-Process-Output (I-P-O)

Roles de cada componente en el esquema I-P-O

Móvil (Input):
El móvil será una de las fuentes principales de datos, enviando información a través de Socket.IO al servidor Node.js. Los inputs del móvil pueden ser interacciones como toques, desplazamiento o gestos, que se traducirán en eventos que el cliente p5.js utilizará para crear interacciones visuales.
Micro:bit (Input):
El micro:bit también genera entradas que llegan al servidor mediante el puerto serial. Los datos del acelerómetro o botones del micro:bit permitirán controlar aspectos de la visualización en el cliente p5.js, como la manipulación de objetos en pantalla o efectos especiales.
Servidor Node.js (Puente):
Aunque el servidor no realiza ningún procesamiento directo de los datos, su papel es crucial para retransmitir la información entre el móvil y el cliente p5.js. Es el mediador que mantiene la comunicación en tiempo real entre los diferentes dispositivos involucrados.
Cliente p5.js (Process & Output):
En este componente, se realiza el procesamiento de los inputs provenientes del móvil, micro:bit y entradas locales del teclado/mouse. p5.js es donde aplico la lógica creativa, como decidir cómo se modifican los objetos en la pantalla, si deben moverse o cambiar de color, por ejemplo. Además, es donde se genera la visualización final del proyecto.

El rol del servidor Node.js

Aunque el servidor Node.js no realiza procesamiento de datos, su papel sigue siendo esencial. Actúa como el puente que conecta el móvil con el cliente p5.js. Sin este servidor, la comunicación entre el móvil y la computadora sería extremadamente difícil de manejar debido a las limitaciones de los puertos y protocolos utilizados por los dispositivos.

Narrativa I-P-O

La narrativa de este sistema será esencial para diseñar las interacciones de manera coherente. Una posible narrativa podría ser que el usuario interactúa con el móvil para controlar un objeto visual en la pantalla de la computadora, con el micro:bit funcionando como un sensor que modifica el comportamiento del objeto dependiendo de los movimientos o pulsaciones. Este proceso se guía por los inputs recibidos, pero se finaliza con la salida visual de la interacción.

Al integrar estos elementos, mi idea inicial es crear una experiencia visual dinámica y en tiempo real, como un juego o una instalación interactiva donde la interacción entre los dispositivos tenga un impacto directo en la visualización.

Pregunta

¿Qué piensas sobre la estructura y cómo encajan los componentes en este flujo?

Actividad 02

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

👣 Pasos:

Selecciona 2 ejemplos: elige dos casos de estudio.
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?
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?

🚀 Tu solución:

Análisis I-P-O de Ejemplos Inspiradores

✨ Ejemplo 1: Philharmonie Luxembourg – Patrik Hübner

Input

Tipo de datos: Interacción humana mediante el desplazamiento por el sitio web (scroll), clics, y visualización del contenido.
Fuentes: Navegador web (comportamiento del usuario), posiblemente también tiempo o fecha.
Múltiples inputs: Sí; se combinan datos del scroll, clics y contexto visual.

Process

La lógica procesa el comportamiento del usuario para decidir qué animaciones y transformaciones se deben activar.
La experiencia se adapta dinámicamente dependiendo del ritmo de navegación del usuario.
Este procesamiento probablemente ocurre en el cliente (navegador) usando JavaScript para respuestas inmediatas.

Output

Resultado visual: Transiciones suaves, transformaciones gráficas, animaciones sincronizadas con el desplazamiento.
Tiempo real: Sí, la visualización responde inmediatamente al comportamiento del usuario.

Narrativa/Concepto

Explora cómo la arquitectura y el diseño pueden ser vividos digitalmente a través de una narrativa visual interactiva, dando al usuario la sensación de recorrer físicamente un espacio musical.

✨ Ejemplo 2: Brute – Estudio creativo

Input

Tipo de datos: Parámetros tipográficos generados a partir de la interacción humana o valores predeterminados.
Fuentes: Usuario elige palabras, estilos, intensidades de distorsión (posiblemente a través de sliders o controles interactivos).
Múltiples inputs: Sí, combina selección textual + parámetros de estilo y distorsión.

Process

Algoritmos transforman la forma de las letras según los parámetros definidos.
Procesamiento gráfico que modifica geometrías tipográficas y genera una identidad visual única para cada palabra.
Probablemente ocurre en el cliente (navegador) usando WebGL, p5.js o una librería similar.

Output

Resultado visual: Tipografía dinámica y visualmente distorsionada.
Tiempo real: Sí, los cambios aparecen conforme el usuario modifica los parámetros.

Narrativa/Concepto

Una herramienta que convierte palabras en experiencias visuales únicas, destacando cómo el significado puede alterarse a través de la forma y el movimiento.

💡 Reflexión para mi Proyecto Final

Estos ejemplos me inspiran a:

Combinar múltiples fuentes de input, como los datos del micro:bit y el móvil, para generar una experiencia interactiva rica y dinámica.
Centrarme en una narrativa visual clara, donde cada interacción tenga un impacto comprensible y estéticamente interesante.
Usar procesamiento local en p5.js para mantener una respuesta en tiempo real.
Implementar outputs visuales responsivos que reflejen claramente los cambios generados por el input (como en Philharmonie), o incluso outputs más abstractos que expresen un concepto, como en Brute.

Quiero explorar una narrativa en la que el micro:bit represente el “estado emocional” del sistema y el móvil actúe como un “control externo” o “intención”, y así el cliente p5.js interprete ambas cosas para generar una visualización viva, sensible y reactiva.

Actividad 03

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

👣 Pasos:

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)”.
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.
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.

🚀 Tu solución:

🧠 Actividad 03 – Proyecto I-P-O: Definición Conceptual

🌩️ Brainstorming Integrador – 3 Ideas Iniciales

💡 Idea 1: Jardín emocional interactivo

Narrativa: Un paisaje que refleja el estado emocional del usuario. El micro:bit capta el nivel de movimiento (ansiedad o calma), mientras que el móvil envía mensajes de ánimo o presión.
Inputs:
- Micro:bit (acelerómetro): mide nivel de movimiento (agitación).
- Móvil (toques o pulsaciones): actúan como interrupciones o influencias externas.
Proceso: Si el micro:bit detecta mucha agitación, el jardín se vuelve oscuro y tormentoso. Si el móvil envía una vibración o toque suave, el entorno intenta calmarse.
Output: Un paisaje animado que se transforma dinámicamente.

💡 Idea 2: Escultura sonora colectiva

Narrativa: Varias personas contribuyen a una escultura de sonido y visual, donde los datos del micro:bit y el móvil modifican sus formas.
Inputs:
- Micro:bit (botón A/B): cambia de forma o añade capas.
- Móvil (acelerómetro o inclinación): cambia el ritmo o la textura del sonido.
Proceso: Cada input transforma un parámetro de la escultura, sumando elementos a tiempo real.
Output: Visualización 3D o abstracta + sonido modificado en tiempo real.

💡 Idea 3: Carrera emocional de avatares

Narrativa: Dos avatares corren por una pista que representa el estado emocional y físico del usuario. El micro:bit mide calma física, y el móvil representa distracciones digitales.
Inputs:
- Micro:bit (nivel de quietud): mientras más quieto, el avatar avanza.
- Móvil (toques): cada toque representa una distracción y ralentiza el avance.
Proceso: El sketch evalúa el equilibrio entre foco (quietud) y distracción.
Output: Carrera visual entre dos personajes con efectos gráficos y medallas según el rendimiento.

⭐ Concepto I-P-O Final

🎮 Título Provisional: Avatar Mind Balance

📖 Narrativa/Concepto Central

Un avatar recorre un mundo mental donde el equilibrio entre calma y distracción determina el avance. El usuario debe mantenerse quieto (meditación) para que el avatar progrese, pero cada interacción desde el móvil representa una interrupción que lo frena o desvía. La visualización busca hacer reflexionar sobre el foco y el entorno digital.

🔌 Inputs Específicos

Fuente	Dispositivo	Variable	Justificación
Micro:bit	Acelerómetro	Nivel de movimiento (X/Y/Z promedio o magnitud)	Representa el estado físico/mental del usuario. Más quietud = más foco.
Móvil	Socket.IO	Toques/clicks	Representan interrupciones o distracciones externas.
Computador	Teclado/mouse	Opcional (pausar/reiniciar)	Control local del sketch por el usuario.

🧠 Process – Lógica en p5.js (Cliente)

Recepción de Datos:
- Desde Serial (micro:bit): Se recibe el valor de aceleración.
- Desde Socket.IO (móvil): Se reciben eventos de toque o clic.
Transformación:
- Si la aceleración es baja por cierto tiempo, foco++ y el avatar avanza.
- Si hay una señal del móvil, distracción++ y el avatar se ralentiza o se desvía.
- Variables de estado clave:
  - nivelFoco (int)
  - nivelDistraccion (int)
  - posAvatar (float)
  - estado (calmo, distraído, equilibrado)
Reglas:
- Cada segundo de quietud suma 1 punto de foco.
- Cada toque en el móvil resta 2 puntos o genera un obstáculo en la ruta.
- El balance determina la velocidad o dirección del avatar.

🎨 Output Deseado (p5.js)

Visualización:
- Un avatar recorriendo un mundo abstracto.
- Elementos visuales que cambian según el estado (foco, distracción).
- Obstáculos/distractores generados por el móvil.
- Progreso mostrado en una barra o medalla animada.
Interacción:
- El usuario puede observar cómo su comportamiento físico y digital afecta el recorrido.
- Una opción para pausar/reiniciar la experiencia.

✍️ Boceto (descripción visual)

Actividad 04

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

👣 Pasos:

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).
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.
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).
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).
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().

🚀 Tu solución:

🧠 Actividad 04

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

Diagrama de Arquitectura

_{Puedes reemplazar esta imagen con una hecha en herramientas como Excalidraw, Lucidchart o Figma.}

Tecnologías de Comunicación

Origen Destino Tecnología Protocolo/Formato Micro:bit Cliente p5.js Web Serial API ASCII (valores separados por coma, ej. “ax,ay,az,btnA,btnB”) Móvil Servidor Node.js Socket.IO (web) JSON (ej: { “tap”: true }) Servidor Node.js Cliente p5.js Socket.IO (web) JSON (idéntico al que recibe) Teclado/Mouse Cliente p5.js Eventos locales JS events (keyPressed, mousePressed)

##Protocolos de Datos Micro:bit → p5.js (Serial - ASCII): Ejemplo de mensaje:

"0.25,0.12,0.98,1,0\n"
Formato:

ax,ay,az = acelerómetro

btnA, btnB = estado de botones (0 o 1)

Móvil → Servidor → p5.js (Socket.IO - JSON):

Ejemplo:

{ "tap": true }

tap: detecta toque que puede activar un “boost” o “obstáculo”

Este mensaje se envía sin modificación desde el servidor

🧩 Esquema Lógico del Servidor Puente (Node.js)

// Pseudocódigo simplificado de server.js

const io = require('socket.io')(server);

io.on('connection', (socket) => {
  socket.on('mobileInput', (data) => {
    // Solo reenvía sin modificar
    io.emit('mobileInput', data);
  });
});

✅ No guarda estado

✅ No modifica datos

✅ Solo retransmite

🧠 Esquema Lógico del Cliente p5.js (sketch.js)

// Pseudocódigo resumido del cliente

// Variables de estado
let acelX, acelY, acelZ;
let btnA, btnB;
let tap = false;
let velocidad = 0;
let avance = 0;
let semana = 1;

// Setup
function setup() {
  createCanvas(800, 600);
  conectarSerialMicrobit(); // Web Serial
  conectarSocket();         // Socket.IO
}

// Procesamiento Serial
function recibirDatosSerial(data) {
  let valores = data.split(',');
  acelX = float(valores[0]);
  acelY = float(valores[1]);
  acelZ = float(valores[2]);
  btnA = int(valores[3]);
  btnB = int(valores[4]);
}

// Procesamiento de Socket
socket.on('mobileInput', (data) => {
  tap = data.tap;
});

// Eventos Locales
function keyPressed() {
  if (key == ' ') {
    velocidad += 1 + semana * 0.5; // aumenta dificultad por semana
  }
}

// Loop principal
function draw() {
  background(220);

  // Reglas del juego (Process)
  if (btnA) velocidad += 0.2;
  if (tap) velocidad *= 0.9; // penalización
  avance += velocidad;
  velocidad *= 0.95; // fricción

  // Dibujar output
  fill(0);
  textSize(32);
  text("Distancia: " + nf(avance, 1, 2), 50, 50);

  // Mostrar avatar
  ellipse(100 + avance, height/2, 50, 50);
}

✅ Conclusiones El servidor Node.js solo retransmite datos móviles (tap).

La lógica y visualización se concentra totalmente en p5.js.

La entrada del micro:bit, móvil y teclado se combinan para un solo proceso coherente y con retroalimentación visual.

El output visual en p5.js refleja directamente el estado procesado (avance del personaje en función del input combinado).

Actividad 05

Inputs y el puente Node.js

👣 Pasos:

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).
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.
Implementa el servidor puente (Node.js):
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.
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.

🚀 Tu solución:

Actividad 05

Inputs y el puente Node.js

Estructura del Proyecto

/mi-proyecto
├── public
│   ├── desktop
│   │   └── sketch.js       # Cliente p5.js
│   └── mobile
│       └── sketch.js       # Cliente móvil (touch input)
├── server.js               # Servidor puente
└── index.html              # Archivo HTML para desktop

📡 Fragmentos Clave 🧱 server.js (Servidor Node.js Puente)

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('🟢 Cliente conectado');

  socket.on('mobileInput', (data) => {
    console.log('📲 Input móvil recibido:', data);
    io.emit('mobileInputForwarded', data);
  });
});

http.listen(3000, () => {
  console.log('Servidor corriendo en http://localhost:3000');
});

📱 public/mobile/sketch.js (Cliente móvil)

let socket;

function setup() {
  createCanvas(windowWidth, windowHeight);
  socket = io();

  // Simulación de toque
  createButton('Enviar toque').position(100, 100).mousePressed(() => {
    socket.emit('mobileInput', { tap: true });
  });
}

🧠 public/desktop/sketch.js (Cliente p5.js)

let socket;
let serial;  // Objeto Web Serial
let serialData = '';

function setup() {
  createCanvas(600, 400);
  connectSerial();
  connectSocket();
}

function connectSocket() {
  socket = io();

  socket.on('mobileInputForwarded', (data) => {
    console.log('📲 Datos desde el móvil:', data);
  });
}

function connectSerial() {
  serial = new p5.SerialPort();

  serial.on('list', console.log);
  serial.on('connected', () => console.log('🔌 Conectado a Web Serial'));
  serial.on('data', () => {
    serialData = serial.readLine().trim();
    console.log('🎛 Datos desde micro:bit:', serialData);
  });

  serial.list();  // Mostrar lista de puertos
  serial.openPrompt(); // Solicitar conexión al usuario
}

🔧 Código micro:bit (MakeCode / JavaScript)

basic.forever(function () {
    let ax = input.acceleration(Dimension.X)
    let ay = input.acceleration(Dimension.Y)
    let az = input.acceleration(Dimension.Z)
    let btnA = input.buttonIsPressed(Button.A) ? 1 : 0
    let btnB = input.buttonIsPressed(Button.B) ? 1 : 0
    serial.writeLine("" + ax + "," + ay + "," + az + "," + btnA + "," + btnB)
    basic.pause(100)
})

🧪 Evidencia: Logs de la Consola (Cliente p5.js)

🎛 Datos desde micro:bit: -13,1023,-7,0,0
📲 Datos desde el móvil: { tap: true }

Desafíos Encontrados

Problema Solución Aplicada Web Serial no disponible en Firefox Cambié a Google Chrome para usar Web Serial API El servidor no reenviaba datos Verifiqué que los nombres de eventos coincidan (mobileInput, mobileInputForwarded) El micro:bit enviaba líneas vacías Añadí .trim() en serial.readLine() para ignorar líneas vacías Error CORS desde el móvil Usé Dev Tunnels (Visual Studio Code) o ngrok para exponer el servidor a internet si se usaba móvil real

Conclusión

El micro:bit envía datos por Serial y se registran correctamente en sketch.js.

El cliente móvil emite eventos con Socket.IO que son reenviados por el servidor.

El cliente p5.js recibe ambos tipos de datos y los muestra en consola, lo que confirma que los inputs están conectados correctamente.

La estructura de comunicación básica ya está funcionando y lista para integrar el “Process”.

Actividad 06

Proceso y Output en p5.js

👣 Pasos:

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

Actividad 07

Documentación final

👣 Pasos:

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.
Redacta y revisa: completa cada sección asegurando claridad y coherencia con la implementación final. Verifica las instrucciones de ejecución.

🚀 Tu solución:

🛰️ Proyecto Final Interactivo – Curso Interacción Físico-Digital

🧩 Título del Proyecto

“EmoSphere: Esfera Emocional Interactiva”

📝 Resumen

Este proyecto propone una esfera visual en p5.js que representa el estado emocional de un personaje ficticio. Recibe datos de sensores de movimiento y botones de un micro:bit, interacciones táctiles desde un móvil, y entradas desde teclado o mouse del usuario en el computador. Estos inputs se procesan y combinan en tiempo real, generando una visualización interactiva que reacciona con color, tamaño y estado textual. La arquitectura sigue el modelo I-P-O (Input – Process – Output) e integra múltiples plataformas mediante un servidor puente usando Socket.IO y comunicación serial.

📊 Concepto I-P-O

🧠 Narrativa

La esfera refleja el “estado emocional” de un personaje invisible. A mayor interacción y movimiento, más “feliz” y activa. La falta de interacción la vuelve “neutral” o incluso “estresada”. Es un espejo emocional del entorno físico-digital.

🔽 Inputs

Fuente	Input
Micro:bit	Acelerómetro eje Z, Botón A
Móvil	Toques detectados y enviados por Socket
PC local	Presión de la tecla espacio

⚙️ Process (Implementado en `draw()` y funciones en p5.js)

El eje Z del acelerómetro controla el nivel de actividad.
El botón A disminuye la energía (relajación).
Los toques móviles aumentan la energía (motivación).
La tecla espacio cambia el color base del personaje.
Se aplican límites y reglas de cambio de estado según umbrales.

Estados posibles: "neutral", "feliz", "estresado", "relajado".

🖥️ Output

Cambios de color del canvas y esfera central.
Tamaño dinámico de la esfera.
Texto indicativo del estado emocional.
(Opcional) Sonido o vibración si se desea agregar en móvil.

🧱 Diseño Técnico: Arquitectura Final

📐 Diagrama (Representación textual aquí; puede adjuntarse imagen)

Micro:bit —> Serial —> Servidor Node.js <— Socket.io —> Móvil | +—> Cliente p5.js (visualización)

markdown Copiar Editar

🔧 Tecnologías y Protocolos

Hardware: Micro:bit v2
Lenguajes: JavaScript (p5.js, Node.js)
Protocolos: WebSocket (Socket.IO), Serial (p5.serialport)
Entorno: Navegador Web para p5.js, Terminal Node.js

🔧 Implementación

Componentes

🧲 Micro:bit

Envia datos por puerto serial: x,y,z,botonA,botonB
Código en MakeCode o Python

📱 Móvil

Página web móvil con interfaz táctil
Envía eventos tap mediante socket.emit() al servidor puente

🌉 Servidor puente (Node.js)

Recibe datos del micro:bit y del móvil
Reenvía eventos al cliente p5.js

🧠 Cliente p5.js

Recibe datos en tiempo real desde el servidor
Lógica de procesamiento implementada en draw() y procesarEstado()
Renderiza visualización dinámica

▶️ Instrucciones para ejecutar

Conectar micro:bit vía USB a la computadora.
Abrir terminal y ejecutar el servidor:
Ventana de terminal
```
node server.js
```

Abrir el archivo index.html del cliente p5.js en navegador de escritorio.

Desde un móvil conectado a la misma red, abrir la interfaz móvil (si aplica).

Interactuar: mover micro:bit, tocar móvil, presionar espacio.

✅ Confirmado: las instrucciones han sido probadas con éxito.

✅ Resultados Sistema funcional de múltiples entradas (micro:bit + móvil + PC).

Output dinámico en canvas que cambia en tiempo real.

Interacción intuitiva y estética.

Comunicación estable a través de servidor puente.

Actividad 08

Reflexión final del curso

👣 Pasos:

Recorre el camino: revisa tus trabajos y notas de unidades anteriores.
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?
Evalúa tu transformación:
- Revisa el resultado de aprendizaje específico del curso. ¿Llegaste al resultado esperado? ¿Cómo lo sabes?
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?
Metarreflexión:
- ¿Qué consejo le darías a un compañero que vea por primera vez el curso para aprovecharlo al máximo?

🚀 Tu solución:

🌟 Reflexión Final – Curso Sistemas Físicos Interactivos 1

🛤️ 1. Recorrido del Curso

A lo largo de las Unidades 1 a 8, el curso me permitió transitar desde los conceptos más básicos de interacción física (como entradas y salidas simples con p5.js y micro:bit) hasta la integración compleja de múltiples dispositivos y protocolos de comunicación en un sistema interactivo funcional. Cada unidad aportó una pieza clave del rompecabezas: desde lógica básica hasta conectividad y visualización.

🤔 2. Reflexión: Integración de Habilidades en el Proyecto Final

Mi proyecto final consolidó todo lo aprendido. Utilicé el enfoque I-P-O (Input – Process – Output) para estructurar el sistema:

Inputs: sensores del micro:bit, toques desde el móvil, y teclado en la PC.
Process: lógica en p5.js que interpreta y fusiona estas entradas.
Output: visualización dinámica del estado emocional de un personaje.

Cada parte del sistema requirió habilidades específicas de unidades anteriores:

Unidad 2: lógica condicional en p5.js.
Unidad 4: lectura de sensores desde micro:bit.
Unidad 6: diseño de flujo I-P-O.
Unidad 7: servidor puente con Node.js y comunicación Socket.IO.

Mayor desafío:
El mayor reto fue la comunicación entre dispositivos. Sincronizar datos del micro:bit, móvil y servidor sin conflictos ni retrasos fue complejo. Aprendí a manejar múltiples flujos de datos en tiempo real y depurar problemas de conectividad.

🔍 3. Evaluación de mi Transformación

Resultado de Aprendizaje Específico:

“Diseñar, implementar y evaluar un sistema físico interactivo que integre entradas de sensores, lógica de proceso y salidas visuales o físicas, utilizando protocolos de comunicación apropiados.”

✔️ Sí, llegué al resultado esperado.
Mi proyecto final es una prueba concreta: implementé un sistema con múltiples sensores y tecnologías, que responde a interacciones físicas, visualiza salidas coherentes y se comunica mediante protocolos estándar como WebSockets y serial.

Me siento más capaz de diseñar sistemas interactivos con un enfoque modular y técnico, combinando software y hardware.

🚀 4. Proyección Futura

¿Cómo aplicaré lo aprendido?

Educación emocional interactiva: diseñar instalaciones educativas donde los estudiantes puedan interactuar con dispositivos que reflejen sus emociones en pantallas, colores o sonidos, usando sensores de micro:bit y visualización con p5.js.
Prototipos rápidos de dispositivos IoT: crear prototipos de interfaces tangibles para hogares inteligentes (por ejemplo, sensores que activan visualizaciones en una pantalla central) usando el modelo I-P-O para organizar entradas y salidas.

¿Qué me gustaría explorar ahora?

Comunicación inalámbrica con micro:bit vía Bluetooth directamente a móvil o PC.
Uso de actuadores físicos (motores, luces LED RGB) como outputs reales.
Visualizaciones 3D con Three.js o Unity WebGL para salidas más inmersivas.

🪞 5. Metarreflexión: Consejo para futuros compañeros

“Aprende haciendo. Este curso no se trata solo de teoría, sino de experimentar, equivocarte y volver a intentar. No temas conectar cosas, probar ideas, ni pedir ayuda. Documenta todo desde el inicio, incluso tus errores: ahí es donde más se aprende. Y sobre todo, no pierdas la curiosidad.”

🧾 Autor: [JUAN SEBASTIAN LOPEZ MARTINEZ]
📅 Fecha: Mayo 2025
🎓 Curso: 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

🚀 Tu solución:

Reflexiones sobre la Metodología Input-Process-Output (I-P-O)

Roles de cada componente en el esquema I-P-O

El rol del servidor Node.js

Narrativa I-P-O

Pregunta

Investigación y Diseño Conceptual 🔎

Actividad 02

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

🚀 Tu solución:

Análisis I-P-O de Ejemplos Inspiradores

✨ Ejemplo 1: Philharmonie Luxembourg – Patrik Hübner

Input

Process

Output

Narrativa/Concepto

✨ Ejemplo 2: Brute – Estudio creativo

Input

Process

Output

Narrativa/Concepto

💡 Reflexión para mi Proyecto Final

Actividad 03

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

🚀 Tu solución:

🧠 Actividad 03 – Proyecto I-P-O: Definición Conceptual

🌩️ Brainstorming Integrador – 3 Ideas Iniciales

💡 Idea 1: Jardín emocional interactivo

💡 Idea 2: Escultura sonora colectiva

💡 Idea 3: Carrera emocional de avatares

⭐ Concepto I-P-O Final

🎮 Título Provisional: Avatar Mind Balance

📖 Narrativa/Concepto Central

🔌 Inputs Específicos

🧠 Process – Lógica en p5.js (Cliente)

🎨 Output Deseado (p5.js)

✍️ Boceto (descripción visual)

Actividad 04

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

🚀 Tu solución:

🧠 Actividad 04

Diagrama de Arquitectura

Tecnologías de Comunicación

Aplicación e Implementación 🛠

Actividad 05

Inputs y el puente Node.js

🚀 Tu solución:

Actividad 05

Estructura del Proyecto

Desafíos Encontrados

Conclusión

Actividad 06

Proceso y Output en p5.js

Consolidación y Metacognición 🤔

Actividad 07

Documentación final

🚀 Tu solución:

🛰️ Proyecto Final Interactivo – Curso Interacción Físico-Digital

🧩 Título del Proyecto

📝 Resumen

📊 Concepto I-P-O

🧠 Narrativa

🔽 Inputs

⚙️ Process (Implementado en draw() y funciones en p5.js)

🖥️ Output

🧱 Diseño Técnico: Arquitectura Final

📐 Diagrama (Representación textual aquí; puede adjuntarse imagen)

🔧 Tecnologías y Protocolos

🔧 Implementación

Componentes

🧲 Micro:bit

📱 Móvil

🌉 Servidor puente (Node.js)

🧠 Cliente p5.js

▶️ Instrucciones para ejecutar

⚙️ Process (Implementado en `draw()` y funciones en p5.js)