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:

SISTEMAS INTERACTIVOS EN EL ENTRETENIMIENTO DIGITAL

En la industria del entretenimiento digital es comun encontrar sistemas interactivos diseñados para el usuario, por la propia naturaleza de este formato se requieren estas herramientas para la entrega del producto, por esto mismo aqui van 3 ejemplos usados

CONSOLAS DE VIDEOJUEGOS

Son dispositivos enfocados al entretenimiento los cuales mediante su potente hardware corren juegos, novelas visuales, entre otros, aseguran un sistema interactivo con el usuario atraves de la conexion controlada por los “mandos” en los cuales estos devuelven una respuesta especifica en la pantalla en base a lo necesitado, todo esto provoca una experiencia comoda en el usuario el cual se familiariza con los botones del mando y la interfaz diseñada en la consola

SISTEMAS DE REALIDAD VIRTUAL

Son perifericos conectados a una propia consola o computadora los cuales estan diseñados para generar una experiencia donde se simula una “realidad” diferente a la propia y dependiendo de el producto se generan historias propias son controlados por los propios mandos de la consola o en algunos casos cuentan con sensores de movimiento propio los cuales se utilizan para facilitar aun mas la experiencia del usuario, devolviendo mediante estimulos y movimientos respuestas en la historia o “realidad” esto en el usuario genera una sensacion de inmersion mucho mas completa

EXPERIENCIAS INTERACTIVAS

Son propias experiencias reales diseñadas para interactuar con el usuario mediante las necesidades planeadas, ejemplos de esto son situaciones como los “escape room”, donde mediante una pantalla se plantea un puzzle y el usuario encerrado en una habitacion debe resolverlo para que al final la propia pantalla devuelva un mensaje de que fue completado o no, en el usuario genera confusion pero a su vez una sensacion de tranquilidad al saber que esta siendo guiado por pistas.

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:

PROYECTO DE DESARROLLO A FUTURO

”PUFFER DESTROYER”

Un videojuego plataformero enfocado en la dificutlad maxima donde se deba ir de un punto A a un punto B esquivando obstaculos y enemigos

Sistemas fisicos usados

Es un juego diseñado para computadoras donde se utiliza como metodo de entrada el teclado especificamente, usando las teclas “wasd” o las propias flechas de este para controlar al personaje y incentivarlo a completar cada nivel devolviendo como respuesta los niveles completados y la propia experiencia de control del personaje

Sensaciones y reacciones del usuario en la realidad

Con este proyecto se busca generar una primeriza frustracion en el usuario el cual mediante el constante fallo en los niveles se desespere, sin embargo tambien se busca generar una sensacion de placer al por fin pasar un nivel complicado

Posibles fallos encontrados

la implementacion de unos controles complejos y de rapida reaccion puede generar que no todos los usuarios esten preparados, a su vez esto puede generar problemas en teclados antiguos que no cuenten con la capacidad de procesar los rapidos movimientos.

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:

DISEÑO GENERATIVO

Se trata de una tecnica de creacion en la que principalmente se utiliza programacion y algoritmos para generar un monton de diseños que esten basados en los parametros y reglas necesitadas, facilitando asi el trabajo en momentos donde se requiere una cantidad muy grande de Diseños siendo completamente diferente del diseño tradicional el cual necesita de un proceso manual y específico para cada pieza, siendo este menos eficiente en terminos generales.

CONCEPTOS CLAVES IDENTIFICADOS

ALGORITMOS:

Son las instrucciones y reglas que definen como se crea el diseño, este a su vez funciona como una especie de “cerebro” del proceso generativo

PARAMETROS:

son las variables que el diseñador puede generar para influir en el resultado final, como dimensiones, colores o restricciones

DATOS:

Son la informacion de entrada que el algoritmo usa para generar diseños, pueden ser numericos (refiriendose a medidas), textuales (nombres), o datos sensoriales (como imagenes o sonidos), entre otros.

RELACIONES ENTRE ESTOS CONCEPTOS

Los datos alimentan al algoritmo, que los procesa para crear diseños siguiendo las reglas definidas. Los parámetros permiten controlar el comportamiento del algoritmo, guiándolo para que genere diseños específicos o explore soluciones variadas dentro de los límites establecidos. Juntos, estos tres elementos trabajan como un sistema interconectado que produce resultados únicos y personalizados de manera eficiente.

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 ROL DEL DISEÑADOR

El diseño generativo, como se explica en el sitio, transforma al diseñador en un “conductor” en lugar de un “artesano”. En este paradigma, el diseñador no crea manualmente cada pieza, sino que establece reglas, algoritmos y sistemas que generan resultados adaptativos y variados. Este enfoque requiere habilidades en programación, análisis de datos y diseño de sistemas, además de una comprensión profunda de los principios estéticos y conceptuales. La capacidad de colaborar con herramientas tecnológicas y refinar procesos se vuelve esencial.

Se destaca que el diseñador ya no realiza directamente las piezas finales, sino que define las reglas y algoritmos que guían la generación de múltiples resultados posibles.

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:

Casos de estudio de Patrik Hübner.
Caso de estudio: Brute.
Caso de estudio: Filarmónica de Luxemburgo

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:

EXPLICACION DEL CONCEPTO “INPUT/OUTPUT” EN EL CONTEXTO DEL DISEÑO GENERATIVO.

el modelo de entrada/salida (input/output) es fundamental. Este modelo implica que el sistema recibe datos de entrada (inputs), los procesa mediante algoritmos y produce resultados (outputs) que pueden ser visuales, estructurales o interactivos. Los inputs pueden variar desde parámetros numéricos hasta datos complejos como información ambiental o comportamientos de usuarios. Los outputs son las soluciones de diseño generadas que cumplen con los criterios establecidos.

EJEMPLO DE UN PROYECTO DE DISEÑO GENERATIVO:

PEDAL AUTOMOTRIZ

En este proyecto, se aplicó el diseño generativo para optimizar el diseño de un pedal de freno de automóvil, buscando mejorar su eficiencia estructural y reducir su peso.

se utilizan como entrada especificaciones técnicas (dimensiones, materiales y fuerzas) y restricciones mecánicas (áreas a evitar y límites de deformación). Un algoritmo genera múltiples iteraciones del diseño, que son analizadas mediante simulaciones para evaluar su rendimiento. El resultado final son varias opciones optimizadas en peso y eficiencia estructural, de las cuales se selecciona la mejor para su fabricación, combinando innovación y funcionalidad.

con todo esto se determina que el input en este caso es todo el trabajo de las especificaciones tecnicas y las restricciones mecaninas, mientras que el output se refiere al prototipo de los pedales generados con dichas especificaciones, para dar paso a la seleccion de los mas adecuados.

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:

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?

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.

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

🚀 Tu solución:

FUNCIONAMIENTO DEL MICROBIT

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

El microbit al estar enlazado a el pc envia señales que son controladas a partir de un codigo, en este caso las siguientes lineas controlan este punto

while True:
    if button_a.is_pressed():
        uart.write('A')
        sleep(500)
    if button_b.is_pressed():
        uart.write('B')
        sleep(500)

es un ciclo while infinito donde mediante un if se identifica el boton presionado y se “escribe” en pantalla la letra seleccionada y despues se da paso a un descanso en el cpu de medio segundo

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

las lineas que controlan este punto son:

if accelerometer.was_gesture('shake'):
        uart.write('C')
        sleep(500)

Es similar al punto anterior solo que en vez de controlar los botones presionados en el microbit, este controla la reaccion de un sensor del propio micro bit que reacciona al momento de sacudirlo, enviando la señal de que la letra “c”

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

las lineas que controlan este punto son:

if uart.any():
        data = uart.read(1)
        if data:
            if data[0] == ord('h'):
                display.show(Image.HEART)
                sleep(500)
                display.show(Image.HAPPY)

lo que pasa aqui es que mediante el uart el codigo envia señales a un dispositivo externo y analiza si el “data” es igual a “h”, de ser asi envia una señal al microbit para que mediante sus leds muestre “imagenes” como en este cas el corazon y la cara feliz.

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:

DISEÑO GENERATIVO EN EL ENTRETENIMIENTO DIGITAL

El diseño generativo en el mundo del entretenimiento digital no es algo nuevo, debido a las propias limitaciones de los desarrolladores y artistas en muchos casos es mucho mas viable para el estudio usar tecnicas de este tipo para disminuir costos y tiempo durante el proceso de diseño, por ende una herramienta como esta es muy util en momentos cuando se trada de creaciones de personajes, escenarios y visuales del propio proyecto

un gran ejemplo de esto es el caso de los videojuegos donde se crean entornos en forma “procedural” donde basicamente todo el mundo del juego es generado al momento de iniciar la partida en base a unas restricciones y patrones previamente marcados, ahorrando asi completamente el trabajo de creacion de un mundo y mejorando la experiencia del jugador al ser cada experiencia de juego distinta, ya que no se repiten sus entornos, juegos como:

Minecraft

No Man’s Sky

lethal company

usan este sistema, esto genera que existan mundos mas bastos y cada uno diferente al anterior, con sus propios recursos y distribucion.

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:

DISEÑO GENERATIVO COMBINADO CON LOS SITEMAS FISICOS INTERACTIVOS

El mejor ejemplo que se me ocurre es una especie de juego “sandbox” donde con el ejemplo de la actividad anterior teniendo en cuenta un proceso de generacion procedural se pueda buscar una union entre estos, donde se pueda controlar la generacion de un terreno mediante herramientas, digamos que creas el propio mundo donde va a desarrollarse tu partida, controlas las restricciones del terreno, alturas, clima etc, para despues dar paso a una generacion automatica, con esto se busca mejorar todavia mas la experiencia del jugador al darle el control de las restricciones de su mundo, con dispositivos de entrada como el teclado y mouse se controla y se da paso a una partida.

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:

programa en p5.js que genere patrones visuales aleatorios

function setup() {
  createCanvas(800, 800);
  noLoop();
  background(255);
}

function draw() {
  let cols = 20;
  let rows = 20;
  let cellWidth = width / cols;
  let cellHeight = height / rows;

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = i * cellWidth + cellWidth / 2;
      let y = j * cellHeight + cellHeight / 2;

      let circleSize = (sin(frameCount * 0.01 + i * j) * 0.5 + 0.5) * cellWidth * 0.8;

      let r = random(100, 255);
      let g = random(100, 255);
      let b = random(100, 255);

      fill(r, g, b, 150);
      noStroke();
      ellipse(x, y, circleSize, circleSize);
    }
  }
}

function mousePressed() {
  redraw();
}

Lo que hace el programa es primero mediante un “noLoop” evitar que se generen infinitamente las figuras, despues se determina un fondo blanco mediante el “background(255);” para luego pasar a dibujar las figuras con la function draw

Como funciona la function draw?

primero se determinan las filas y hileras de la cuadricula, en este caso son 20 y 20

 let cols = 20;
  let rows = 20;

despues se determina el ancho y largo de estas mismas

  let cellWidth = width / cols;
  let cellHeight = height / rows;

con las celdas creadas se da paso a un ciclo for donde se recorren cada una de ellas para determinar cuantas hay se empieza con una variable i que aumenta de a 1 siempre y cuando sea menor al numero de celdas (20)

 for (let i = 0; i < cols; i++)

despues se ubica cada celda y se posiciona en el centro de esta con:

let x = i * cellWidth + cellWidth / 2;

avanzan horizontal y verticalmente mediante i y j

por ultimo se generan circulos mediante la funcion seno y se definen colores aleatorios para estos mismos con:

  let circleSize = (sin(frameCount * 0.01 + i * j) * 0.5 + 0.5) * cellWidth * 0.8;


      let r = random(100, 255);
      let g = random(100, 255);
      let b = random(100, 255);

      fill(r, g, b, 150);
      noStroke();
      ellipse(x, y, circleSize, circleSize);

Patron generado

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:

Cuadrado en pantalla que cambia de color en el micro bit

codigo p5

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);
        rect(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');
}

codigo micro bit

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)

similar a la actividad 7 el microbit detecta la presion de botones mediante sus sensores y activa el cambio de color en la imagen generada, la unica diferencia es que se cambia el circulo por un cuadrado mediante un

rect(width / 2, height / 2, 100, 100);

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:

Programa en j5 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.

let xPos;

function setup() {
  createCanvas(400, 400);
  xPos = width / 2; // Posición inicial del círculo en el centro
}

function draw() {
  background(220);

  // Dibujar el círculo
  fill(0, 102, 255);
  ellipse(xPos, height / 2, 50, 50);
}

// Conectar el micro:bit y recibir datos
function keyPressed() {
  if (key === 'A') {
    xPos -= 10; // Mover a la izquierda
  } else if (key === 'B') {
    xPos += 10; // Mover a la derecha
  }
}

codigo para microbit

from microbit import *

while True:
    if button_a.is_pressed():
        uart.write("A\n")  # Enviar 'A' si se presiona el botón A
        sleep(200)  # Pequeña pausa para evitar múltiples pulsaciones rápidas

    if button_b.is_pressed():
        uart.write("B\n")  # Enviar 'B' si se presiona el botón B
        sleep(200)

El micro:bit detecta los botones

Cuando presionas el botón A, el micro:bit envía una señal con la letra “A”. Cuando presionas el botón B, el micro:bit envía una señal con la letra “B”. El micro:bit envía estos datos a la computadora

La computadora recibe estas letras a través del puerto serie (que es como un canal de comunicación). p5.js lee los datos y mueve el círculo

p5.js está constantemente revisando si recibe una “A” o una “B”. Si recibe una “A”, reduce la posición en X del círculo (moviéndolo a la izquierda). Si recibe una “B”, aumenta la posición en X del círculo (moviéndolo a la derecha).

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:

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

let images = [];
let currentImage = 0;

function preload() {
  images[0] = loadImage("img1.jpg");  // Reemplaza con tus imágenes
  images[1] = loadImage("img2.jpg");
  images[2] = loadImage("img3.jpg");
  images[3] = loadImage("img4.jpg");
}

function setup() {
  createCanvas(400, 400);
  noLoop();  // Solo dibuja cuando cambia la imagen

  // Conectar con el micro:bit usando Web Serial API
  navigator.serial.requestPort().then(port => {
    port.open({ baudRate: 115200 }).then(() => {
      let reader = port.readable.getReader();
      readLoop(reader);
    });
  });
}

function draw() {
  background(220);
  image(images[currentImage], 50, 50, 300, 300);
}

// Función para leer los datos del micro:bit
async function readLoop(reader) {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    let data = new TextDecoder().decode(value).trim();

    if (data === "1") currentImage = 0;
    else if (data === "2") currentImage = 1;
    else if (data === "3") currentImage = 2;
    else currentImage = 3;  // Imagen por defecto

    redraw();
  }
}

codigo microbit

from microbit import *

uart.init(baudrate=115200)  # Habilita la comunicación serial

while True:
    if button_a.is_pressed() and button_b.is_pressed():
        uart.write("3\n")  # Enviar "3" si se presionan A y B juntos
    elif button_a.is_pressed():
        uart.write("1\n")  # Enviar "1" si se presiona A
    elif button_b.is_pressed():
        uart.write("2\n")  # Enviar "2" si se presiona B
    else:
        uart.write("0\n")  # Enviar "0" si no se presiona nada

    sleep(200)  # Pausa para evitar envíos rápidos

Cómo solucioné el problema de seleccionar imágenes con el micro:bit en p5.js

Solucioné el problema haciendo que el micro:bit enviara un número por el puerto serie según el botón presionado (A, B o ambos). En p5.js, usé la Web Serial API para recibir estos datos y actualizar la imagen mostrada en pantalla. Dependiendo del número recibido, cambié la imagen usando image() y redraw(), permitiendo que los botones del micro:bit actúen como un control remoto para seleccionar imágenes en la web.

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:

PROCESO DE APRENDIZAJE

El proceso de aprender los conceptos más básicos hasta ahora ha sido bastante agradable, gracias a la metodología empleada en el curso y a la claridad en las explicaciones del docente. Esto permite comprender con facilidad qué hacer en cada etapa del aprendizaje, ya que la estructura de las lecciones está diseñada de manera progresiva, asegurando que cada nuevo conocimiento se construya sobre una base sólida. Además, el ambiente de estudio ha sido muy favorable, lo que ha hecho que el proceso de aprendizaje sea más ameno y llevadero.

En cuanto al uso del Micro:bit, fue muy interesante volver a interactuar con este dispositivo, especialmente porque ya tenía experiencia previa tanto con Micro:bit como con Arduino. Gracias a esto, las actividades resultaron bastante sencillas para mí, ya que muchos de los conceptos trabajados eran similares a los que había utilizado antes. Sin embargo, lo único que representó un verdadero desafío fueron algunas secciones del código, ya que estaban escritas en un lenguaje de programación con el que no estaba muy familiarizado. A pesar de ello, con el análisis y la práctica constante, el código se fue volviendo más comprensible con el tiempo. También fue útil el apoyo de compañeros y la posibilidad de consultar diferentes recursos en línea, lo que me permitió reforzar mi comprensión y mejorar mis habilidades en este nuevo lenguaje.

En general, fue una experiencia de aprendizaje muy enriquecedora y satisfactoria. No solo fortalecí mis conocimientos previos, sino que también adquirí nuevas habilidades que seguramente serán útiles en el futuro. Además, la oportunidad de trabajar con dispositivos como el Micro:bit me permitió recordar lo versátiles y prácticos que pueden ser para el aprendizaje de la programación y la electrónica. Sin duda, este curso ha sido un espacio de crecimiento y exploración en el que cada desafío ha representado una oportunidad para seguir mejorando.

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:

¿Este curso para qué me sirve?

Este curso me sirve como una introducción fundamental al mundo de los sistemas físicos interactivos, proporcionando las bases necesarias para comprender cómo la tecnología puede integrarse en experiencias interactivas. A lo largo de esta primera unidad, aprendí sobre P5.js, Java, Micro:bit y, en general, los conceptos básicos relacionados con los sistemas físicos interactivos. Si bien el contenido fue introductorio, fue una oportunidad valiosa para familiarizarme con herramientas y dispositivos que pueden tener aplicaciones importantes en el desarrollo de proyectos dentro del campo del entretenimiento digital.

Desde una perspectiva personal, este curso me ha permitido fortalecer mi comprensión sobre la interactividad entre el software y el hardware, lo cual es esencial para la creación de experiencias envolventes en videojuegos y otras formas de entretenimiento digital. Explorar P5.js me permitió conocer una herramienta versátil para el diseño visual y la programación creativa, mientras que Micro:bit me ayudó a entender cómo los sensores y actuadores pueden utilizarse para generar respuestas dinámicas. Estos conocimientos son fundamentales para el desarrollo de proyectos interactivos que combinan arte, programación y tecnología.

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:

Actividad	Tema	Aprendí
07	Diseño Generativo en Entretenimiento Digital	Cómo el diseño generativo se aplica en videojuegos mediante generación procedural para crear mundos dinámicos y únicos.
08	Conexión con sistemas físicos	Cómo combinar diseño generativo con dispositivos físicos para mejorar la interactividad en videojuegos.
09	Generando patrones visuales en p5.js	Cómo usar funciones matemáticas como `sin()` y `random()` para generar patrones visuales dinámicos en p5.js.
10	Interacción con micro:bit	Cómo conectar micro:bit con p5.js para modificar elementos gráficos en tiempo real mediante entradas físicas.
11	Control de movimiento con micro:bit	Cómo usar los botones A y B del micro:bit para manipular la posición de un objeto en un entorno visual interactivo.
15	Comunicación entre micro:bit y Johnny-Five	Cómo funcionan las conexiones entre micro:bit y Johnny-Five, además de cómo adaptar un código para diferentes situaciones según las necesidades del sistema.

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:

Idea de proyecto implementando el uso del diseño generativo y los sistemas fisicos interactivos

Una idea que me gustaría desarrollar es un videojuego inspirado en Super Meat Boy, donde el jugador deba superar niveles extremadamente difíciles diseñados para ser frustrantes y desafiantes. Sin embargo, a diferencia de los juegos convencionales que dependen únicamente del teclado y el ratón, este proyecto integraría un Micro:bit como parte esencial del control del juego. Mi intención es que el juego traiga su propio dispositivo Micro:bit y que los jugadores deban utilizar sus funciones en momentos específicos de los niveles para avanzar.

Por ejemplo, podría haber situaciones en las que el jugador necesite inclinar el Micro:bit para cambiar la gravedad, presionar botones físicos para activar plataformas o incluso utilizar el acelerómetro para ejecutar movimientos precisos. Sin embargo, esto no reemplazaría el uso del teclado y el ratón, sino que se combinaría con ellos, aumentando el nivel de concentración y coordinación necesarios para superar los desafíos del juego.

¿Qué nuevos conocimientos o habilidades necesitarías adquirir para llevar a cabo este proyecto?

Necesito aprender a manejar la comunicación entre p5.js y Micro:bit de manera eficiente, asegurándome de que los datos se transmitan en tiempo real sin retrasos o errores.

tambien Explorar cómo aplicar Diseño Generativo para la creación de niveles que se ajusten dinámicamente a la forma en que el jugador usa el Micro:bit y Investigar algoritmos de generación de niveles y cómo combinarlos con el input del jugador.