Unidad 1

Introducción 📜

El objetivo de esta unidad será mostrarte el potencial de los sistemas físicos interactivos. En esta unidad voy a mostrarte un panorama introductorio de estos en el contexto del arte y el diseño generativos. Adicionalmente, me gustaría que aprovecharas esta unidad para reflexionar sobre las posibilidades de lo que te mostraré en tu perfil profesional. Aspiro que puedas responder a la pregunta: ¿Este curso a qué podría aportar a mi perfil profesional?

Rúbrica de evaluación de la unidad 📝

Requisito de salida (condición necesaria)

Rúbrica analítica

Criterio (peso)	Cumple plenamente (5.0)	Se cumple medianamente (4.0)	Problemas importantes (3.0)	Falta comprensión básica (2.0)	No hay evidencia (0.0)
1. Aplicación + bitácora (40%)	La app se ejecuta sin fallos en el entorno acordado. Evidencia completa y verificable en bitácora. Todo consistente con lo mostrado en la demo.	La app funciona y cumple lo esencial. La bitácora permite verificar, pero hay 1–2 vacíos menores	La app funciona parcialmente o depende de condiciones no declaradas. Bitácora con vacíos importantes o incompleta.	La app no corre o no demuestra lo requerido. La bitácora no permite verificación de la app.	No se entregaron evidencias o no se puede acceder a ellas
Evaluación
2. Sustentación (60%)	Responde a las preguntas con precisión, conectando: (a) lo que se ve, (b) cómo está hecho, y (c) por qué. Usa su bitácora para justificar decisiones. Reconoce límites/errores y propone cómo probar/mejorar.	Respuestas correctas pero con imprecisiones menores o justificación superficial. Usa parcialmente la bitácora para sustentar.	Responde solo “qué hizo” pero le cuesta explicar “cómo” o “por qué”. Necesita guía para conectar con su propia evidencia/bitácora.	No logra responder de forma coherente o responde sin relación con lo presentado/documentado. Evidencia falta de comprensión básica del trabajo entregado.	No se entregaron evidencias o no se puede acceder a ellas
Evaluación

Set: ¿Qué aprenderás en esta unidad? 💡

Aprenderás acerca de las posibilidades que ofrecen los sistemas físicos interactivos. Te mostraré ejemplos aplicados al arte y al diseño generativos. Además, reflexionarás sobre cómo estas prácticas pueden relacionarse con tu perfil profesional.

Actividad 01

¿Qué es un sistema físico interactivo?

Te voy a proponer que hagamos un ejercicio juntos. Te voy a mostrar algunos videos y quiero que me digas qué es lo que ves.

Moment Factory Projects
Moment Factory youtube channel
Proyecto IDED: TDAxis, trabajo de grado en entretenimiento digital
Location based VR: The VOID
Location based VR: sandboxvr, The VOID
Mario Kart
Haptic VR Gloves
iPad drawing into StreamDiffusion
Real Time Tracking & Projection Mapping (Full ver.)
Excurio: immersive expedition.
Profundiza en LBVR
Lugares de memoria, Captura: pasajes de memoria
Real time video world models: Daydream AI
Artista Colombiano, Juan Franco: Becoming, Demo
UPB Emanuel Quintero Castaño: Proyección Full dome para planetario

Actividad 02

¿Qué es el diseño y el arte generativos?

Vamos a revisar juntos este material del diseñador Alemán Patrick Hübner, que nos ayudará a entender mejor el concepto de diseño generativo.

Patrick Hübner propone una forma de diseño basada en un método muy simple: input-process-output.

Seek: Investigación 🔎

Ahora que ya tienes una idea general de las posibilidades de los sistemas físicos interactivos y una aplicación al arte y al diseño generativos, es momento de profundizar en el tema, deconstruir algunos ejemplos y reflexionar sobre su relevancia en el contexto del entretenimiento digital.

Actividad 03

Herramientas y tecnologías

En las actividades anteriores exploramos los conceptos. En esta actividad vamos a introducirnos en algunas herramientas que te permitirán prototipar un sistema físico interactivo básico.

Usaremos dos herramientas: micro:bit y p5.js. En esta actividad vas a conocer estas herramientas. Te voy a mostrar un ejemplo de un sistema físico interactivo implementado con estas herramientas. Luego, vas a intentar replicar este ejemplo.

Ten presente que esta actividad es introductoria y no busca que domines estas herramientas. Vas a seguir los siguientes pasos:

Abre una versión actualizada de Google chrome o Microsogt edge.
Abre en una pestaña este sitio micro:bit editor.
Copia en el editor el siguiente código:

from microbit import *

uart.init(baudrate=115200)
display.show(Image.BUTTERFLY)

while True:
    if button_a.is_pressed():
        uart.write('A')
        sleep(500)
    if button_b.is_pressed():
        uart.write('B')
        sleep(500)
    if accelerometer.was_gesture('shake'):
        uart.write('C')
        sleep(500)
    if uart.any():
        data = uart.read(1)
        if data:
            if data[0] == ord('h'):
                display.show(Image.HEART)
                sleep(500)
                display.show(Image.HAPPY)

Conecta el micro:bit a un puerto USB del computador.
Al lado del botón Send to micro:bit hay tres puntos. Selecciona Connect.
Selecciona el puerto USB lógico asignado por el sistema operativo al micro:bit. En este caso mbed Serial Port.
Si no hay errores. Presiona Send to micro:bit y espera que aparezca una mariposa en el display de este. Eso quiere decir que el programa anterior ya estará cargado en la memoria del micro:bit.
Ahora abre en otra pestaña el editor de p5.js.
Observa que al lado del nombre del archivo: sketch.js hay una flecha. Si das click podrás observar tres archivos: index.html, sketch.js, style.css.
Abre el archivo index.html e incluye la siguiente línea antes de la tag link. Esta línea permite incluir una biblioteca que facilita la comunicación USB serial entre el computador y el micro:bit.

<script src="https://unpkg.com/@gohai/p5.webserial@^1/libraries/p5.webserial.js"></script>

Ahora en el archivo sketch.js copia el siguiente código:

let port;
let connectBtn;

function setup() {
    createCanvas(400, 400);
    background(220);
    port = createSerial();
    connectBtn = createButton('Connect to micro:bit');
    connectBtn.position(80, 300);
    connectBtn.mousePressed(connectBtnClick);
    let sendBtn = createButton('Send Love');
    sendBtn.position(220, 300);
    sendBtn.mousePressed(sendBtnClick);
    fill('white');
    ellipse(width / 2, height / 2, 100, 100);
}

function draw() {

    if(port.availableBytes() > 0){
        let dataRx = port.read(1);
        if(dataRx == 'A'){
            fill('red');
        }
        else if(dataRx == 'B'){
            fill('yellow');
        }
        else{
            fill('green');
        }
        background(220);
        ellipse(width / 2, height / 2, 100, 100);
        fill('black');
        text(dataRx, width / 2, height / 2);
    }


    if (!port.opened()) {
        connectBtn.html('Connect to micro:bit');
    }
    else {
        connectBtn.html('Disconnect');
    }
}

function connectBtnClick() {
    if (!port.opened()) {
        port.open('MicroPython', 115200);
    } else {
        port.close();
    }
}

function sendBtnClick() {
    port.write('h');
}

Dale click a Play sketch.
Dale ahora click a Connect to micro:bit
Selecciona el puerto mbed Serial Port.
Presiona los botones A y B del micro:bit.
Sacude el micro:bit. ¿Qué pasa?
Presiona el botón Send Love. ¿Qué pasa?

Actividad 04

Interacción básica con micro:bit

Vamos a crear juntos un programa en p5.js que interactúe con un micro:bit. La idea es que el programa en p5.js muestre un cuadrado en la pantalla que cambie de color al presionar un botón del micro:bit y regrese a su color original al soltar el botón.

Este programa lo crearemos paso paso mediante un tutorial.

Para navegar por este tutorial debes ir dando click en el botón “Siguiente” o “Anterior”.

Creación del programa del micro:bit

Vamos a crear un programa en el micro:bit que tenga un input (un botón) y un output (enviar un mensaje por serial) que indique que se ha presionado el botón.

Lo primero que debes hacer es abrir el editor de micro:bit. Luego, importa de la biblioteca microbit todas las funciones que necesitas para interactuar con el micro:bit.

  from microbit import *

Lectura del botón

Ahora vamos a leer el estado del botón A del micro:bit. Para ello, utilizaremos un bucle que se ejecutará continuamente y verificará si el botón A ha sido presionado.

Observa que utilizamos button_a.was_pressed() para detectar si el botón ha sido presionado. También podrías usar button_a.is_pressed() si quieres saber si el botón está presionado en ese momento, pero was_pressed() es más adecuado para detectar eventos únicos como un clic. Si usas is_pressed(), el programa podría enviar múltiples mensajes si el botón se mantiene presionado. ¿Ves la diferencia?

  from microbit import *

  while True:
      if button_a.was_pressed():

Lectura del botón y envío del mensaje

Ahora que sabemos cuándo se presiona el botón, vamos a enviar un mensaje por el puerto serial del micro:bit. Esto nos permitirá recibir el mensaje en p5.js.

Nota que debes inicializar la comunicación serial con uart.init(baudrate=115200) antes de enviar mensajes. El baudrate es la velocidad de transmisión de datos, y 115200 es una velocidad comúnmente utilizada para la comunicación serial. Finalmente, utilizamos uart.write('A') para enviar el mensaje ‘A’ cuando se presiona el botón A.

  from microbit import *

  uart.init(baudrate=115200)

  while True:
      if button_a.was_pressed():
          uart.write('A')

Aplicación en p5.js - Biblioteca de conexión serial

Lo primero que debes hacer es añadir la biblioteca que te permite conectar el micro:bit con p5.js. Recuerda que esto lo haces en el archivo index.html de tu proyecto p5.js.

<script src="https://unpkg.com/@gohai/p5.webserial@^1/libraries/p5.webserial.js"></script>

Aplicación en p5.js - Configuración inicial

Vas a crear un par de variables globales (estas las creas por fuera de cualquier función). Al ser globales, podrás acceder a ellas desde cualquier parte del código. Estas variables te servirán para almacenar una referencia al objeto que te permitirá manipular el puerto serial y la otra variable te servirá para guardar una referencia al objeto que representa el botón con el cual podrías conectar y desconectar el micro:bit de la aplicación.

Observa la función connectBtnClick(). Esta función se ejecuta cuando el usuario hace click en el botón de conexión. A esto se le llama un “event handler” o manejador de eventos.

let port;
let connectBtn;

function setup() {
    createCanvas(400, 400);
    background(220);
    port = createSerial();
    connectBtn = createButton('Connect to micro:bit');
    connectBtn.position(80, 300);
    connectBtn.mousePressed(connectBtnClick);
}

function draw() {
}

function connectBtnClick() {
    if (!port.opened()) {
        port.open('MicroPython', 115200);
    } else {
        port.close();
    }
}

Aplicación en p5.js - Dibujar en cada frame

En draw() vas a dibujar un cuadrado en la pantalla todo el tiempo, pero tendrás que decidir en cada frame qué color debe tener. Entonces, antes de dibujarlo vas a leer el puerto serial y ver si hay algún mensaje disponible. Si hay un mensaje, lo vas a leer (debes siempre consumir el mensaje para que no se acumule) y cambiarás el color a rojo. Si no hay mensaje, el cuadrado será de color verde.

Antes de terminar el frame vas a actualizar el estado del botón para que refleje el estado de conexión del micro:bit.

    let port;
    let connectBtn;

    function setup() {
        createCanvas(400, 400);
        background(220);
        port = createSerial();
        connectBtn = createButton("Connect to micro:bit");
        connectBtn.position(80, 300);
        connectBtn.mousePressed(connectBtnClick);
    }

    function draw() {
        background(220);

        if (port.availableBytes() > 0) {
            let dataRx = port.read(1);
            if (dataRx == "A") {
            fill("red");
            }
        } else {
            fill("green");
        }

        rectMode(CENTER);
        rect(width / 2, height / 2, 50, 50);

        if (!port.opened()) {
            connectBtn.html("Connect to micro:bit");
        } else {
            connectBtn.html("Disconnect");
        }
    }

    function connectBtnClick() {
        if (!port.opened()) {
            port.open("MicroPython", 115200);
        } else {
            port.close();
        }
    }

Aplicación en p5.js - Dibujar en cada frame

¿Notaste que la aplicación no funcionó? ¿Qué crees que podría estar mal?

ES MUY IMPORTANTE que reflexiones sobre esto antes de continuar. Piensa en esto. Cuando se presiona el botón A del micro:bit, se envía un mensaje por el puerto serial, este mensaje se lee en un frame. En ese frame se le cambia el color al cuadrado. Pero, al siguiente frame, se lee el puerto serial y no hay mensajes disponibles, por lo que el cuadrado vuelve a ser verde.

Te voy a mostrar una solución al problema, pero es fundamental que la analices y entiendas por qué funciona. Una vez entiendas el funcionamiento, podrías seguir incluyendo este código como punto de partida para tus programas que interactúan con el micro:bit. Pero ten presente que esto no es una receta, sino una solución a un problema específico. Cuando trabajas con sistemas físicos interactivos, es importante que entiendas cómo funcionan para que puedas adaptarlos a tus necesidades.

from microbit import *

uart.init(baudrate=115200)

while True:

    if button_a.is_pressed():
        uart.write('A')
    else:
        uart.write('N')

    sleep(100)

  let port;
  let connectBtn;
  let connectionInitialized = false;

  function setup() {
    createCanvas(400, 400);
    background(220);
    port = createSerial();
    connectBtn = createButton("Connect to micro:bit");
    connectBtn.position(80, 300);
    connectBtn.mousePressed(connectBtnClick);
  }

  function draw() {
    background(220);

    if (port.opened() && !connectionInitialized) {
      port.clear();
      connectionInitialized = true;
    }

    if (port.availableBytes() > 0) {
      let dataRx = port.read(1);
      if (dataRx == "A") {
        fill("red");
      } else if (dataRx == "N") {
        fill("green");
      }
    }

    rectMode(CENTER);
    rect(width / 2, height / 2, 50, 50);

    if (!port.opened()) {
      connectBtn.html("Connect to micro:bit");
    } else {
      connectBtn.html("Disconnect");
    }
  }

  function connectBtnClick() {
    if (!port.opened()) {
      port.open("MicroPython", 115200);
      connectionInitialized = false;
    } else {
      port.close();
    }
  }

Apply: Aplicación 🛠

Ahora vas a aplicar lo que has aprendido hasta ahora resolviendo un problema simple utilizando p5.js y micro:bit.

Actividad 05

Control de movimiento con micro:bit

Crea un programa en p5.js que muestre un círculo en la pantalla. Utiliza los botones A y B del micro:bit para controlar la posición en x del círculo en el canvas de p5.js.

Reflect: Consolidación y metacognición 🤔

Cerramos la unidad con una reflexión sobre lo aprendido y cómo se relaciona con tus metas personales y profesionales.

Actividad 06

Vas a repasar lo aprendido en esta unidad. Regresa a la actividad 4 y trata de explicar en tus propias palabras de la manera más detallada que puedas cómo funciona el sistema físico interactivo. Analiza cada parte del código y su función dentro del sistema. Si aún tienes dudas sobre alguna parte, aprovecha para aclararlas.