Saltearse al contenido
Sistemas Físicos Interactivos 1

Unidad 1

Introducción

El objetivo de la esta unidad es puedas responder según tus intereses y perfil profesional esta pregunta: ¿Este curso para qué me sirve?

Esta unidad tiene un total de 16 actividades. Se estima un tiempo de 30 minutos por actividad; sin embargo, dependiendo de tu ritmo de trabajo, dificultades, saberes previos o nivel de interés algunas actividades pueden tomarte un poco más de tiempo.

¿Qué aprenderás en esta unidad?

El objetivo de esta fase (SET) es establecer la relevancia del curso Sistemas Físicos Interactivos 1 en el contexto del programa de Ingeniería en Diseño de Entretenimiento Digital y tus aspiraciones profesionales. Despertar tu
curiosidad y motivación intrínseca.

Actividad 01

Conectando con el Entretenimiento Digital

Enunciado: describe tres ejemplos de sistemas interactivos presentes en la industria del entretenimiento digital. Para cada ejemplo, identifica los dispositivos de entrada y salida utilizados, y explica cómo contribuyen a la experiencia del usuario. Piensa en videojuegos, instalaciones interactivas, experiencias de realidad virtual o aumentada, etc. Finalmente, reflexiona sobre cómo el conocimiento de sistemas físicos interactivos podría enriquecer tus proyectos en el futuro como ingeniero en diseño de entretenimiento digital.

Entrega: un texto corto con la descripción de los tres ejemplos, incluyendo los dispositivos de entrada/salida y la reflexión final.

🚀 Tu solución:

Mi solución a la actividad

Ejemplos.

1. Los Videojuegos.

hacen un uso de los sistemas interactivos a la hora de conectarse con el usuario mediante las acciones y toma de decisiones que conllevan generalmente a una salida, desde el movimiento más mínimo hasta acciones signifcativas en el mismo juego. Desde hace algunos años se han estado implementando el uso de la realidad virtual como una entrade en el que se prioriza la experiencia del usuario adentrandolo al un mundo a través de gestos y movimientos intuitivos. Entrada y Salida de datos: Una operación de Entrada y Salida de Datos (E/S) se define como el conjunto de acciones necesarias para la transferencia de un conjunto de datos, es decir, una transferencia completa de todos los datos. En los videojuegos ese puente entre el jugador y el juego se logra con el uso de botones intuitivos como lo puede ser un joystick que al ser de libre movimiento da a entender que se usa para realizar una acción de ese tipo como salida, para el caso de la realidad aumentada se hace uso de gestos que se recopilan mediante un sensor que reconoce al cuerpo del usario como una entrada para despues interpretarlo y mostrar un resultado en pantalla.

2. Instalaciones interactivas en museos y exposiciones.

En muchos museos o exposiciones interactivas, los visitantes pueden interactuar con pantallas táctiles, sensores de movimiento o incluso dispositivos de realidad aumentada. Por ejemplo, un sistema puede utilizar una pantalla táctil como entrada para seleccionar información sobre una obra de arte, mientras que los sensores de movimiento pueden detectar la proximidad del usuario y activar contenidos adicionales en pantallas cercanas. Los dispositivos de salida serían, en este caso, las pantallas, sonidos o incluso luces que se activan según la interacción. Esta tecnología fomenta una experiencia personalizada y dinámica, haciendo que el usuario participe activamente en su descubrimiento.

3. Experiencias de Realidad Virtual (VR) La VR ofrece una inmersión total en mundos virtuales, utilizando dispositivos como cascos de realidad virtual, guantes o controladores de movimiento. Los dispositivos de entrada en este caso son los sensores de movimiento de los controladores, que permiten al usuario interactuar con el entorno virtual, y la cámara o los sensores dentro del casco que detectan los movimientos de la cabeza. Los dispositivos de salida son los propios cascos que muestran el entorno virtual y los sonidos que lo acompañan. La interacción real con el entorno virtual genera una experiencia inmersiva, donde el usuario puede realizar acciones y obtener respuestas inmediatas dentro de ese mundo digital.

¿Qué aprendo como ingenierio de entretenimiento digital?

Conocer cómo los sistemas físicos interactivos afectan la experiencia del usuario me permitiría diseñar productos más intuitivos y emocionales en el ámbito del entretenimiento digital. La clave está en comprender cómo los dispositivos de entrada y salida que trabajan en conjunto para crear experiencias sensoriales que faciliten la inmersión del usuario. Como ingeniero en diseño de entretenimiento digital, integrar estos conocimientos en mis proyectos no solo mejoraría la interacción, sino que también abriría puertas a nuevas formas de contar diversas historias y construir una via que me permita llegar al público.

Actividad 02

Mi Visión Interactiva

Enunciado: imagina un proyecto de entretenimiento digital que te gustaría desarrollar en el futuro. Describe brevemente el proyecto y luego enfócate en cómo podrías integrar sistemas físicos interactivos para mejorarlo. ¿Qué tipo de dispositivos de entrada/salida utilizarías? ¿Qué tipo de interacción con el mundo físico te gustaría lograr? ¿Qué problemas crees que podrías encontrar al implementar estos sistemas? Conecta tu visión con la descripción del curso y los conceptos que se mencionan.

Entrega: un texto corto con la descripción del proyecto imaginario, la integración de sistemas físicos interactivos, los posibles dispositivos y la reflexión sobre los desafíos.

🚀 Tu solución:

Mi proyecto

Descripción del proyecto

Consta de un juego MMO RPG Mundo con bellos paisajes, que cuente con la capacidad de transmitir diversos sentimientos en el usuario por medio de diferentes sensores y neurotransmisores. en dicho juego el objetivo es mezclar el videojuego con la realidad, obteniendo una forma de que el jugador experimente emociones y sentimientos genuinos.

¿Cómo podría lograrlo?

Sensores emocionales (entrada):

  • Frecuencia cardíaca: Para medir el estrés o la excitación.
  • EEG: Para captar la actividad cerebral y adaptar el juego a las emociones.
  • Sensores de piel: Para medir la respuesta emocional.
  • Eye tracking: Para conocer en qué el jugador está enfocando su atención.

Interacción física:

  • Guantes y trajes hápticos: Para simular sensaciones táctiles.
  • Sensores de movimiento: Para controlar el juego mediante el movimiento físico del cuerpo.

Dispositivos de Salida:

  • Pantallas y AR/VR:

  • Realidad Virtual (VR): Para una experiencia inmersiva, ajustando imágenes según el estado emocional del jugador.

  • Realidad Aumentada (AR): Para integrar el entorno del jugador con el juego.

  • Sonido adaptativo:

  • Un sistema de sonido 3D integrado que cambie en función de las emociones del jugador.

Estimulación sensorial:

  • Dispositivos que alteren la temperatura o la textura (como viento o vibraciones) según lo que ocurre en el juego. Interacción Física con el Mundo: Lograr una experiencia que mezcle el mundo físico y digital, mediante:

  • Estimulación sensorial: Cambios en el entorno físico del jugador (temperatura, vibraciones) basados en las emociones del juego. Respuestas emocionales: El juego responde al estado emocional del jugador, ajustando su entorno en consecuencia.

Posibles Problemas

1- Precisión de los sensores: Medir las emociones de forma precisa es un reto.

2- Interacción natural: Los dispositivos deben ser cómodos y no intrusivos.

3- Accesibilidad: Los dispositivos avanzados pueden no ser accesibles para todos.

4- Sobrecarga sensorial: Demasiados estímulos pueden hacer la experiencia incómoda.

5- Desarrollo y costos: La tecnología avanzada puede ser costosa y difícil de implementar.

Investigación

El objetivo de esta fase (SEEK) es indagar y comprender los fundamentos del Diseño Generativo y su relevancia en el contexto del entretenimiento digital, específicamente en relación con los sistemas físicos interactivos.

Actividad 03

Definición y conceptos clave

Enunciado: indaga y define con tus propias palabras qué es el diseño generativo. Identifica al menos tres conceptos clave asociados a esta disciplina (ej. algoritmos, parámetros, datos). Describe cómo estos conceptos se relacionan entre sí.

Recurso: vas a leer sobre los conceptos básicos de diseño generativo en el sitio web del diseñador alemán Patrik Hübner.

Entrega: un breve glosario con la definición de Diseño Generativo y los tres conceptos clave, incluyendo la descripción de su interrelación.

🚀 Tu solución:

Actividad 3

Diseño innovador

El proceso implica establecer reglas, parámetros y condiciones que permitan a la máquina producir diversos resultados, en lugar de requerir que un diseñador defina cada aspecto del proyecto. El objetivo de este enfoque es identificar soluciones innovadoras basadas en datos iniciales en campos como la arquitectura, el arte, el diseño de productos y la moda.

Principios básicos del diseño generativo

¿Cuál es el propósito de lo siguiente? Algoritmos

El uso de algoritmos de diseño generativo permite la creación de formas, estructuras o soluciones a partir de datos o parámetros iniciales, lo que genera resultados complejos a través de pasos repetitivos y adaptativos.

¿Cuál es el propósito del segundo? Parámetros

Se pueden incluir medidas físicas, características estéticas, colores, formas y comportamientos.

Los parámetros son necesarios para que el algoritmo tenga la capacidad de brindar soluciones.

¿Cuál es el propósito de lo antes mencionado? Los datos

El diseño puede verse influenciado por una variedad de fuentes, como análisis de tendencias del mercado, datos de usuarios o factores ambientales o contextuales.

La capacidad del algoritmo para proporcionar soluciones relevantes o personalizadas depende de los datos que obtiene.

Correlación entre ideas

Los algoritmos se basan en los datos y utilizan parámetros para generar una amplia gama de soluciones de diseño. El proceso de diseño generativo es capaz de ofrecer diversos resultados basados ​​en condiciones establecidas, haciendo que cada resultado sea único y adaptado a las necesidades individuales.

Esto no sólo simplifica el proceso de diseño, sino que también permite la exploración de nuevas ideas que quizás no hubieran sido posibles con los métodos tradicionales.

Actividad 04

El rol del diseñador

Enunciado: basado en este texto sobre diseño generativo analiza cómo cambia el rol del diseñador en este nuevo paradigma. ¿De qué manera el diseñador se convierte en “conductor” en lugar de “artesano”? ¿Qué nuevas habilidades se requieren en este contexto?

Entrega: un texto sobre la transformación del rol del diseñador en el contexto del Diseño generativo, incluyendo las nuevas habilidades necesarias.

🚀 Tu solución:

El Diseñador

El papel del diseñador se altera significativamente en el diseño generativo. En el pasado, el diseñador era visto como un artesano, encargado de crear y definir el producto terminado de una manera única y artesanal. Sin embargo, en el diseño generativo, el diseñador actúa como un facilitador, siendo el principal responsable de establecer reglas, definir objetivos y seleccionar resultados dentro de un sistema generativo. El diseñador ahora gestiona una interacción dinámica entre datos, tecnología y sistemas generativos, lo que permite la creatividad autónoma a través de la colaboración entre máquinas.

Nuevas habilidades necesarias

Este cambio requiere la adquisición de nuevas habilidades. El diseñador debe tener conocimientos sobre:

  • Programación
  • Uso de datos
  • Diseño basado en algoritmos

Además, debe poseer la capacidad de:

  • Interpretar y gestionar datos
  • Cumplir con los principios de participación (interacción con los usuarios)
  • Mantener al mismo tiempo la narrativa y la identidad de la marca en mente.

Este nuevo enfoque también requiere la comprensión de sistemas reactivos y adaptativos, que pueden generar variaciones en tiempo real basadas en el contexto o la interacción. El diseñador se convierte en un estratega creativo que puede explorar y guiar procesos automatizados, lo que da como resultado una experiencia de diseño más flexible, dinámica y en constante evolución.

Conclusión

En esencia, el diseño generativo reimagina al diseñador como un maestro de la orquestación, dirigiendo el proceso creativo a través de la interacción con nuevas tecnologías y sistemas, lo que permite una mayor flexibilidad y adaptabilidad en la creación de experiencias y narrativas de marca.

Actividad 05

Input/Output en el Diseño Generativo

Enunciado: investiga el concepto de “input/output” en el contexto del Diseño Generativo. Busca ejemplos de proyectos que utilicen datos como input para generar outputs visuales o interactivos.Describe cómo funciona el flujo de información en uno de los ejemplos encontrados.

Recursos: los siguientes recursos pueden servirte de inspiración:

Entrega: descripción de un proyecto de Diseño Generativo que utilice el modelo input/output, explicando el flujo de información y su impacto en el resultado final.

🚀 Tu solución:

Entrada-Salida en Diseño Generativo: El caso de Brute

En el diseño generativo, el concepto de entrada-salida se utiliza para describir la entrada, que es procesada por un sistema generativo para producir resultados (outputs), como experiencias dinámicas o imágenes interactivas. El diseño puede ser flexible y cambiar según los datos que se reciben a través de este modelo.

El proyecto Brute de Patrik Hübner es un excelente ejemplo. En este proyecto, se utilizan movimientos, gestos, sonidos y otras entradas de interacción del usuario como datos. Se emplea un algoritmo generativo para crear resultados visuales, como patrones y animaciones, que varían según las interacciones.

El flujo de información:

  • Entrada: Los datos de entrada pueden ser movimientos generados por el usuario, sonido o datos ambientales.
  • Procesamiento: Los datos se procesan mediante un algoritmo que tiene en cuenta parámetros de color, forma y ritmo.
  • Salida: Las animaciones en las pantallas están influenciadas por los cambios en el entorno y las interacciones.

El impacto:

Este enfoque permite una experiencia única para todos los usuarios, ya que la salida visual cambia constantemente según las entradas. El carácter interactivo y dinámico de la instalación permite una adaptación en tiempo real, convirtiéndola en una experiencia más envolvente y personalizada.

El proyecto Brute ilustra cómo el modelo entrada-salida se puede utilizar para crear experiencias interactivas y visuales que respondan directamente a los datos generados por los usuarios o el entorno.

Actividad 06

Herramientas y tecnologías

Enunciado: en este curso vas a explorar los conceptos usando principalmente dos herramientas: micro:bit y p5.js. En esta actividad vas a conocer estas herramientas implementando tu primer sistema físico interactivo. Ten presente que esta actividad es introductoria y no busca que domines estas herramientas. Vas a seguir los siguientes pasos:

  1. Abre una versión actualizada de Google chrome o Microsogt edge.
  2. Abre en una pestaña este sitio micro:bit editor.
  3. 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)
  1. Conecta el micro:bit a un puerto USB del computador.
  2. Al lado del botón Send to micro:bit hay tres puntos. Selecciona Connect.
  3. Selecciona el puerto USB lógico asignado por el sistema operativo al micro:bit. En este caso mbed Serial Port.
  4. 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.
  5. Ahora abre en otra pestaña el editor de p5.js.
  6. 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.
  7. 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>
  1. 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');
}
  1. Dale click a Play sketch.
  2. Dale ahora click a Connect to micro:bit
  3. Selecciona el puerto mbed Serial Port.
  4. Presiona los botones A y B del micro:bit.
  5. Sacude el micro:bit. ¿Qué pasa?
  6. Presiona el botón Send Love. ¿Qué pasa?

Entrega: vas a tratar de analizar todos los pasos anteriores usando los conocimientos que tienes hasta este punto de la carrera. No te asustes con esta actividad, la idea es que intentes, estamos explorando y en las próximas unidades vas a poder entender muy bien todo. Por ahora, solo quiero que intentes.

  1. Describe qué pasa en el punto 15 y cómo crees que esto se logre.
  2. Describe qué pasa en el punto 16 y cómo crees que esto se logre.
  3. Describe qué pasa en el punto 17 y cómo crees que esto se logre.

🚀 Tu solución:

Preguntas y respuestas

Describe qué pasa en el punto 15 y cómo crees que esto se logre.

  • Al momento de oprimir los botones A y B cambia el color de un circulo en la pantalla e intercala entre rojo y amarillo
  if(port.availableBytes() > 0){
        let dataRx = port.read(1);
        if(dataRx == 'A'){
            fill('red');
        }
        else if(dataRx == 'B'){
            fill('yellow');

Se hace uso de un condicional en donde se definen unas entradas que se encuentran el microbit, siel usuario presiona A se lee los datos y arroja una salida, en este caso un color, que es el rojo si se oprime B entonces se rellena por el color amarillo.

Describe qué pasa en el punto 16 y cómo crees que esto se logre.

  • Al momento de Sacudir el microbit el circulo que se encontraba en el canvas pasará a ser verde.
else{
            fill('green');
        }
        background(220);
        ellipse(width / 2, height / 2, 100, 100);
        fill('black');
        text(dataRx, width / 2, height / 2);

Creo que esto se logra debido a que en el microbit el acelerometro es por así decirlo un botón c y como se logra observar en el código si recibe otra entrada diferente de A y B entonces se rellenará de verde.

Describe qué pasa en el punto 17 y cómo crees que esto se logre.

  • Al oprimir el botón “Send Love” en el microbit se logra ver una carita feliz
 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);

Se crea el boton Send love al oprimirlo se almacena en memoria y cuando se llama se ejecuta una función que hace hace una cara feliz y listo.

Aplicación

El objetivo de esta fase (APPLY) es aplicar los conceptos de Diseño Generativo y los conocimientos básicos de programación en p5.js y micro:bit para crear prototipos sencillos de sistemas interactivos.

Actividad 07

Diseño Generativo en Entretenimiento Digital

Enunciado: busca ejemplos concretos de cómo se aplica el Diseño Generativo en la industria del entretenimiento digital (videojuegos, experiencias interactivas, etc.). Describe un caso de estudio y analiza cómo el Diseño Generativo contribuyó a la experiencia final.

Entrega: describe el caso de estudio de Diseño Generativo aplicado al entretenimiento digital, analizando su impacto en la experiencia del usuario.

🚀 Tu solución:

Caso de Estudio: “La serie interminable, el espacio interminable, la leyenda interminable”

La serie Infinite Amplitude Studios presenta títulos como Space Endless y Endless Legend, ambos juegos de estrategia 4X que exploran, expanden, explotan y eliminan. Los mundos y mapas del juego se crean de manera procesal utilizando un diseño generativo, lo que da como resultado una experiencia única en cada partida.

El proceso de creación de mapas

Este método de creación procedural garantiza una experiencia diversa e innovadora, previniendo la repetición del juego.

Ubicación y rasgos de las facciones:

  • La distribución de las facciones, ya sea cercanas o distantes, influye en las interacciones entre ellas, lo que lleva a diferentes tácticas de expansión y conquista.

Distribución de recursos:

  • Los recursos se distribuyen según las facciones, exigiendo a los jugadores adaptar sus decisiones de exploración, expansión y combate según la ubicación de estos.

Eventos aleatorios:

  • El número de eventos aleatorios es de 4. Estos eventos introducen un nivel de sorpresa, obligando a los jugadores a adaptarse a situaciones inesperadas.

La fruta como sustancia regenerativa:

  • La fruta se presenta como una sustancia altamente regenerativa, lo que motiva a los jugadores a participar en varias rondas de juego y ajustar sus estrategias según nuevos desafíos.

Desafíos adaptativos

Los jugadores no pueden seguir un plan preestablecido, lo que agrega complejidad y mantiene la experiencia dinámica.

Promoción de la creatividad estratégica

El juego fomenta la creatividad estratégica, alentando a los jugadores a pensar de manera innovadora y flexible.

Experiencia personalizada

El diseño generativo de la serie Endless mejora la rejugabilidad, ofreciendo una experiencia desafiante y siempre cambiante. La necesidad constante de adaptación a mapas, facciones y recursos generados aleatoriamente asegura sesiones de juego únicas y emocionantes. Esto crea una experiencia rica y dinámica que mantiene a los jugadores comprometidos y les permite explorar sus opciones con mayor precisión.

Actividad 08

Conexión con sistemas físicos

Enunciado: reflexiona sobre cómo el Diseño Generativo puede combinarse con sistemas físicos interactivos para crear experiencias innovadoras en el entretenimiento digital. ¿Qué tipo de dispositivos de entrada/salida podrían utilizarse? ¿Qué posibilidades creativas se abren con esta combinación?

Entrega: un brainstorming de ideas sobre la combinación de Diseño Generativo y sistemas físicos interactivos en el entretenimiento digital, incluyendo posibles dispositivos y experiencias.

🚀 Tu solución:

Propósitos de los Conceptos Presentados

Juegos Físicos Basados en la Estrategia

  • Concepto: Un juego de mesa digital donde los componentes del tablero físico interactúan con el tablero virtual.
  • Dispositivos: Tableros interactivos con pantallas táctiles, sensores de movimiento y piezas con chips RFID.
  • Propósito: Fomentar la creatividad a través de la alteración del mapa o las facciones en tiempo real, lo que resulta en un juego único y dinámico, basado en movimientos físicos.

Simulaciones de Realidad Virtual

  • Concepto: Juegos de exploración que incorporan el mundo físico en el mapa generado procedimentalmente.
  • Dispositivos: AR HoloLens, Magic Leap y gafas móviles mejoradas con ARKit/ARCore.
  • Propósito: Fomentar la creatividad entre los jugadores, explorando nuevas áreas o desafíos en entornos del mundo real que se integran al mundo virtual del juego.

Juegos Musicales Excepcionales Basados en la Física

  • Concepto: La música se crea mediante un proceso procedimental a través de interacciones físicas con objetos o superficies.
  • Dispositivos: Sensores de movimiento como Leap Motion, superficies táctiles y sensores integrados en dispositivos.
  • Propósito: Proporcionar una experiencia musical dinámica, donde los movimientos o toques alteran la composición musical en tiempo real, ofreciendo una plataforma creativa e interactiva.

Exploración Emocionante en Realidad Virtual

  • Concepto: Entornos virtuales que se personalizan según los movimientos del jugador, como caminar o hacer gestos.
  • Dispositivos: Gafas de realidad virtual, gafas VR y controladores en vivo.
  • Propósito: Ofrecer experiencias de exploración únicas y personalizadas, donde el espacio virtual cambia y se adapta a las acciones físicas del jugador, incentivando la creatividad.

Sensores de Movimiento para Juegos de Acción

  • Concepto: Juegos en los que los saltos, golpes y desplazamientos impactan el progreso o el mundo generado procedimentalmente.
  • Dispositivos: Kinect, cámaras 3D, trajes hápticos y plataformas de movimiento.
  • Propósito: Hacer que el rendimiento físico del jugador sea un factor crucial para determinar los resultados del juego, favoreciendo la interacción y la adaptación en tiempo real.

Actividad 09

Generando patrones visuales

Enunciado: crea un programa en p5.js que genere patrones visuales aleatorios utilizando funciones matemáticas simples (ej. random(), sin(), cos()). Experimenta con diferentes parámetros para modificar los patrones generados. No es necesario conectar con micro:bit en esta actividad.

Entrega: código del programa en p5.js y una captura de pantalla del patrón visual generado. Describe brevemente las funciones utilizadas y cómo modificaste los parámetros.

🚀 Tu solución: 

function setup() {
  createCanvas(400, 400);
  noFill();
  stroke(0);
}


function draw() {
  background(255);


  let numShapes = 20;  // Número de formas
  let centerX = width / 2;  // Centro de la pantalla
  let centerY = height / 2;


  for (let i = 0; i < numShapes; i++) {
    let angle = map(i, 0, numShapes, 0, TWO_PI);  // Ángulo para cada forma
    let offsetX = cos(angle + frameCount * 0.01) * 100;  // Desplazamiento en X
    let offsetY = sin(angle + frameCount * 0.01) * 100;  // Desplazamiento en Y


    // Dibujar una elipse que se mueve de acuerdo a las funciones seno y coseno
    ellipse(centerX + offsetX, centerY + offsetY, random(20, 60), random(20, 60));
  }
}

Actividad 10

Interacción básica con micro:bit

Enunciado: crea un programa en p5.js que muestre un cuadrado en la pantalla. Conecta un micro:bit y programa un botón para que, al presionarlo, cambie el color del cuadrado en p5.js. Recuerda que ya exploraste una actividad en la cuál al presionar botones pasan cosas en el programa en p5.js. ¿Recuerdas?

Nota: esta actividad puede requerir combinar dos sesiones de 30 minutos, todo depende de tu ritmo de trabajo.

Entrega: código del programa en p5.js y el código para micro:bit. Describe el proceso de conexión y comunicación entre ambos dispositivos.

🚀 Tu solución:

Código Cuadrado

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);
    fill('white');
    rect(width / 2 - 50, height / 2 - 50, 100, 100); // Dibuja un cuadrado en el centro
}


function draw() {
    // Verifica si hay datos disponibles desde el micro:bit
    if (port.availableBytes() > 0) {
        let dataRx = port.read(1); // Lee un byte de datos
        if (dataRx == 'A') {
            fill('red'); // Cambia el color del cuadrado a rojo
        } else if (dataRx == 'B') {
            fill('yellow'); // Cambia el color del cuadrado a amarillo
        } else {
            fill('green'); // Cambia el color del cuadrado a verde
        }
        background(220); // Limpia el fondo
        rect(width / 2 - 50, height / 2 - 50, 100, 100); // Redibuja el cuadrado
    }


    // Actualiza el texto del botón de conexión
    if (!port.opened()) {
        connectBtn.html('Connect to micro:bit');
    } else {
        connectBtn.html('Disconnect');
    }
}


function connectBtnClick() {
    if (!port.opened()) {
        port.open('MicroPython', 115200); // Abre la conexión serial
    } else {
        port.close(); // Cierra la conexión serial
    }
}

¿Cuál es el proceso de conexión?

1. Conexión entre el micro:bit y p5.js

  • micro:bit: El micro:bit se programa para enviar datos a través de su puerto serial cuando se presionan los botones A o B.
  • p5.js: Usa la biblioteca p5.webserial para establecer una conexión serial con el micro:bit y leer los datos enviados.

2. Flujo de Comunicación

  • Cuando el micro:bit detecta que se presiona un botón, envía un carácter (A, B o C) a través del puerto serial.
  • En p5.js, el programa verifica si hay datos disponibles en el puerto serial. Si los hay, lee el carácter y cambia el color del cuadrado en función del valor recibido:
    • A: Cambia el color a rojo.
    • B: Cambia el color a amarillo.
    • C: Cambia el color a verde.

3. Interfaz en p5.js

  • Botón de conexión: Permite conectar o desconectar el micro:bit. Cuando se conecta, se abre el puerto serial.
  • Dibujo del cuadrado: Se dibuja un cuadrado en el centro del lienzo. Su color cambia según los datos recibidos del micro:bit.

4. Biblioteca WebSerial

  • Para que p5.js pueda comunicarse con el micro:bit, es necesario incluir la biblioteca p5.webserial en el archivo index.html: 
    <script src="https://unpkg.com/@gohai/p5.webserial@^1/libraries/p5.webserial.js"></script>
  • Esta biblioteca permite la comunicación serial entre el navegador y dispositivos como el micro:bit.

5. Pasos para Ejecutar el Proyecto

  1. Programar el micro:bit: se debe Usar MakeCode para cargar el código que envía datos seriales al presionar los botones.
  2. Conectar el micro:bit: se conecta al computador mediante USB.
  3. Ejecutar p5.js: se abre el programa en un servidor local.
  4. Conectar en p5.js: procedemos a hacer clic en el botón “Connect to micro:bit” para establecer la conexión.
  5. Interactuar: y por último se presionan los botones A o B en el micro:bit para cambiar el color del cuadrado en p5.js.

Actividad 11

Control de movimiento con micro:bit

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

Nota: Esta actividad puede requerir combinar dos sesiones de 30 minutos.

Entrega: Código del programa en p5.js y el código para micro:bit. Describe cómo es posible mapear los botones al movimiento del círculo.

🚀 Tu solución:

Circulo en movimiento

let port;
let connectBtn;
let circleX = 200; // Posición inicial del círculo en el eje x


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); // Limpia el fondo en cada frame
    fill('blue');
    noStroke();
    ellipse(circleX, height / 2, 50, 50); // Dibuja el círculo en la posición actual


    // Verifica si hay datos disponibles desde el micro:bit
    if (port.availableBytes() > 0) {
        let dataRx = port.read(1); // Lee un byte de datos
        if (dataRx == 'A') {
            circleX -= 5; // Mueve el círculo a la izquierda
        } else if (dataRx == 'B') {
            circleX += 5; // Mueve el círculo a la derecha
        }
        // Limita el movimiento del círculo dentro del canvas
        circleX = constrain(circleX, 25, width - 25);
    }


    // Actualiza el texto del botón de conexión
    if (!port.opened()) {
        connectBtn.html('Connect to micro:bit');
    } else {
        connectBtn.html('Disconnect');
    }
}


function connectBtnClick() {
    if (!port.opened()) {
        port.open('MicroPython', 115200); // Abre la conexión serial
    } else {
        port.close(); // Cierra la conexión serial
    }
}

Microbit

basic.forever(function () {
    if (input.buttonIsPressed(Button.A)) {
        serial.writeString("A") // Envía 'A' cuando se presiona el botón A
    } else if (input.buttonIsPressed(Button.B)) {
        serial.writeString("B") // Envía 'B' cuando se presiona el botón B
    }
    basic.pause(100) // Espera 100ms para evitar enviar datos demasiado rápido
})

Descripción del Proceso

1. Comunicación entre el micro:bit y p5.js

  • El micro:bit envía un carácter (A o B) a través del puerto serial cuando se presionan los botones A o B.
  • En p5.js, el programa lee estos caracteres y ajusta la posición del círculo en el eje x:
    • Si recibe A, el círculo se mueve 5 píxeles a la izquierda.
    • Si recibe B, el círculo se mueve 5 píxeles a la derecha.

2. Mapeo de los botones al movimiento

  • Botón A: Envía el carácter A, que en p5.js se traduce en una disminución de la coordenada x del círculo.
  • Botón B: Envía el carácter B, que en p5.js se traduce en un aumento de la coordenada x del círculo.
  • La función constrain() en p5.js asegura que el círculo no se salga de los límites del canvas.

3. Interfaz en p5.js

  • Botón de conexión: Permite conectar o desconectar el micro:bit.
  • Círculo: Se dibuja en la posición actual (circleX, height / 2) y se actualiza su posición en cada frame.

Actividad 12

Generando de imágenes en micro:bit

Enunciado: crea un programa en p5.js que permita seleccionar 4 imágenes diferentes en el micro:bit.

Entrega: código del programa en p5.js y el código para micro:bit. Describe cómo solucionaste el problema.

🚀 Tu solución:

Cargar una imagen

let port;
let connectBtn;
let currentImage;
let images = [];
let imageIndex = 0;


function preload() {
    // Carga las 4 imágenes
    images[0] = loadImage('image1.png');
    images[1] = loadImage('image2.png');
    images[2] = loadImage('image3.png');
    images[3] = loadImage('image4.png');
    currentImage = images[0]; // Establece la imagen inicial
}


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);
    image(currentImage, 0, 0, width, height); // Muestra la imagen actual


    // Verifica si hay datos disponibles desde el micro:bit
    if (port.availableBytes() > 0) {
        let dataRx = port.read(1); // Lee un byte de datos
        if (dataRx == 'A') {
            imageIndex = 0; // Selecciona la primera imagen
        } else if (dataRx == 'B') {
            imageIndex = 1; // Selecciona la segunda imagen
        } else if (dataRx == 'C') {
            imageIndex = 2; // Selecciona la tercera imagen
        } else if (dataRx == 'D') {
            imageIndex = 3; // Selecciona la cuarta imagen
        }
        currentImage = images[imageIndex]; // Actualiza la imagen actual
    }


    // Actualiza el texto del botón de conexión
    if (!port.opened()) {
        connectBtn.html('Connect to micro:bit');
    } else {
        connectBtn.html('Disconnect');
    }
}


function connectBtnClick() {
    if (!port.opened()) {
        port.open('MicroPython', 115200); // Abre la conexión serial
    } else {
        port.close(); // Cierra la conexión serial
    }
}

Código para el micro:bit (MakeCode)

basic.forever(function () {
    if (input.buttonIsPressed(Button.A)) {
        serial.writeString("A") // Envía 'A' cuando se presiona el botón A
    } else if (input.buttonIsPressed(Button.B)) {
        serial.writeString("B") // Envía 'B' cuando se presiona el botón B
    } else if (input.isGesture(Gesture.Shake)) {
        serial.writeString("C") // Envía 'C' cuando se agita el micro:bit
    } else if (input.logoIsPressed()) {
        serial.writeString("D") // Envía 'D' cuando se presiona el logo
    }
    basic.pause(100) // Espera 100ms para evitar enviar datos demasiado rápido
})

Descripción del Proceso

1. Comunicación entre el micro:bit y p5.js

  • El micro:bit envía un carácter (A, B, C o D) a través del puerto serial cuando se presionan los botones A o B, se agita el micro:bit o se presiona el logo.
  • En p5.js, el programa lee estos caracteres y selecciona la imagen correspondiente:
    • A: Muestra la primera imagen.
    • B: Muestra la segunda imagen.
    • C: Muestra la tercera imagen.
    • D: Muestra la cuarta imagen.
Despueés se le asigna una imagen, hasta el momento así como esta. (no carga nada todavia)

Consolidación y metacognición

El objetivo de esta fase (REFLECT) es promover la metacognición, la autoevaluación y la conexión del aprendizaje con las metas personales y profesionales. Consolidar el conocimiento adquirido sobre Diseño Generativo y su aplicación en sistemas físicos interactivos.

Actividad 13

Análisis del proceso de aprendizaje

Enunciado: describe tu proceso de aprendizaje durante esta unidad. ¿Qué te resultó más fácil? ¿Qué te resultó más difícil? ¿Qué estrategias utilizaste para superar las dificultades? ¿Cómo te sentiste durante el proceso?

Entrega: una reflexión sobre el proceso de aprendizaje personal, incluyendo las facilidades, dificultades, estrategias y emociones experimentadas.

🚀 Tu solución:

Reflexión sobre mi proceso de aprendizaje durante esta unidad

Durante esta unidad, he experimentado un proceso de aprendizaje lleno de altibajos, momentos de motivación y otros de desánimo. A veces, me costaba completar las actividades, especialmente cuando no encontraba la motivación necesaria para seguir adelante. Sin embargo, cuando lograba conectar con el contenido, especialmente en las actividades prácticas con el microbit, todo se volvía mucho más divertido y enriquecedero.

¿Qué me resultó más fácil?
Lo que más fácil me resultó fue trabajar con el microbit en las actividades prácticas. La posibilidad de ver resultados tangibles y creativos, como programar luces o hacer pequeños proyectos interactivos, me motivaba mucho. Era emocionante ver cómo el código que escribía se traducía en algo real y funcional. Además, la retroalimentación inmediata que obtenía al probar mis programas me ayudaba a entender rápidamente si estaba en el camino correcto o si necesitaba ajustar algo.

¿Qué me resultó más difícil?
La parte más difícil para mí fue mantener la constancia y la motivación en las actividades teóricas o menos interactivas. A veces, me sentía abrumado por la cantidad de información o por la sensación de que no estaba avanzando lo suficiente. Hubo momentos en los que pospuse tareas porque no me sentía inspirado o porque no encontraba un propósito claro en lo que estaba haciendo. Esto me generaba frustración, ya que sabía que debía completar las actividades, pero no siempre lograba encontrar la energía para hacerlo.

¿Qué estrategias utilicé para superar las dificultades?
Para superar esos momentos de falta de motivación, intenté implementar algunas estrategias:

  1. Dividir las tareas en partes más pequeñas: En lugar de ver una actividad como un todo abrumador, la dividía en pasos más manejables. Esto me ayudaba a sentir que estaba avanzando, incluso si era poco a poco.
  2. Buscar conexiones con mis intereses: Trataba de relacionar las actividades con cosas que me gustaban. Por ejemplo, en el caso del microbit, me imaginaba creando algo que pudiera usar en mi vida diaria o que fuera divertido mostrar a mis amigos.
  3. Establecer metas pequeñas y celebrar los logros: Me propuse completar al menos una parte de la actividad cada día, y cuando lo lograba, me daba un pequeño premio, como un descanso o algo que me gustara hacer.
  4. Pedir ayuda cuando lo necesitaba: Hubo veces en las que me sentí atascado, y en esos momentos, pedí ayuda a mis compañeros o al profesor. Esto me ayudó a no quedarme estancado y a sentir que no estaba solo en el proceso.

¿Cómo me sentí durante el proceso?
El proceso fue una montaña rusa de emociones. Hubo días en los que me sentí muy motivado y entusiasmado, especialmente cuando trabajaba en proyectos creativos con el microbit. Esas actividades me hacían sentir que estaba aprendiendo algo útil y divertido al mismo tiempo. Sin embargo, también hubo momentos de frustración y desánimo, especialmente cuando no lograba completar una tarea o cuando sentía que no estaba entendiendo algo. A pesar de eso, creo que esos momentos difíciles también fueron importantes, porque me enseñaron a ser más perseverante y a buscar soluciones en lugar de rendirme.

Actividad 14

Conexión con el objetivo de la unidad

Enunciado: retoma el objetivo de la unidad: “¿Este curso para qué me sirve?”. Con base en lo aprendido en esta unidad, responde a esta pregunta desde tu perspectiva personal y profesional. ¿Cómo se relaciona el contenido de la unidad con tus intereses y aspiraciones en el campo del entretenimiento digital?

Entrega: una respuesta argumentada a la pregunta “¿Este curso para qué me sirve?”, conectando el contenido de la unidad con las metas personales y profesionales.

🚀 Tu solución:

Aprendizaje del curso

Este curso me sirve para construir una base técnica sólida en programación de microcontroladores, una habilidad clave que conecta mi creatividad con la tecnología en el campo del entretenimiento digital.

Al aprender a programar dispositivos como el micro:bit , no solo domino herramientas para crear experiencias interactivas (como videojuegos, instalaciones artísticas o efectos en tiempo real), sino que también entiendo cómo materializar ideas innovadoras que fusionan arte, narrativa y tecnología.

Por ejemplo, en proyectos de realidad aumentada, videojuegos indie o parques temáticos, los microcontroladores son esenciales para controlar sensores, actuadores o interfaces físicas que hacen que las experiencias sean inmersivas y reactivas.

Esto se alinea con mi meta de diseñar proyectos que sorprendan y emocionen al público, ya que me permite transformar conceptos abstractos en prototipos funcionales. A nivel profesional, este conocimiento me posiciona como un creador versátil, capaz de colaborar en equipos multidisciplinarios (artistas, programadores, ingenieros) y aportar soluciones técnicas creativas.

Actividad 15

Autoevaluación de las actividades APPLY

Enunciado: revisa las actividades de la fase APPLY y evalúa tu propio desempeño en cada una de ellas. ¿Qué aprendiste en cada actividad? ¿Qué podrías haber hecho mejor? ¿Qué habilidades necesitas fortalecer?

Entrega: Una tabla de autoevaluación de las actividades APPLY, incluyendo una breve descripción del aprendizaje, áreas de mejora y habilidades a fortalecer.

🚀 Tu solución:

Cuadro Evaluativo

ActividadAprendizajeÁreas de MejoraHabilidades a Fortalecer
Control de Movimiento con micro:bitAprendí a conectar el micro:bit con p5.js para controlar elementos visuales en tiempo real, como mover un círculo usando botones.Podría haber explorado más interacciones, como usar el acelerómetro o el sensor de luz.Uso avanzado de sensores y optimización de código.
Selección de Imágenes con micro:bitAprendí a cargar y manipular imágenes en p5.js, cambiándolas dinámicamente con entradas del micro:bit.Podría haber añadido transiciones suaves o efectos visuales para mejorar la experiencia.Diseño visual y animación para interfaces más dinámicas.

En pocas palabras

  • Aprendí: A integrar hardware (micro:bit) con software (p5.js) para crear experiencias interactivas, tanto en movimiento como en selección de imágenes.
  • Áreas de mejora: Explorar más interacciones con sensores y mejorar el diseño visual de las interfaces.
  • Habilidades a fortalecer: Uso avanzado de sensores, diseño visual y animación.

Actividad 16

Proyección a futuro

Enunciado: ¿Cómo piensas aplicar lo aprendido en esta unidad en futuros proyectos? Describe una idea de proyecto que te gustaría desarrollar utilizando Diseño Generativo y sistemas físicos interactivos. ¿Qué nuevos conocimientos o habilidades necesitarías adquirir para llevar a cabo este proyecto?

Entrega: una descripción de una idea de proyecto futuro que integre los conocimientos de la unidad, incluyendo los nuevos conocimientos o habilidades necesarios para su desarrollo.

🚀 Tu solución:

Propuesta proyecto

Me gustaría crear un jardín digital interactivo donde las plantas virtuales crezcan y reaccionen a entradas físicas, como la luz, el tacto o el sonido, usando el micro:bit y p5.js. Por ejemplo, al acercar la mano a un sensor, las flores podrían abrirse, o al hacer ruido, los árboles podrían cambiar de color. Este proyecto combinaría diseño generativo (para crear formas orgánicas y patrones de crecimiento) y sistemas físicos interactivos (usando sensores y actuadores).