---
layout: activity
title: "El Xilófono del Futuro (con LEDs)"
image: src/03.1-led-xylophone/03.1-el-xilofono-del-futuro.svg

video: src/videos/03.1_led_xylophone.mp4
video_title: "¿Qué haremos?"
description: "Mejora tu instrumento mágico. ¡Aprende a relacionar los datos del sensor de inclinación con la posición de la luz que vamos a agregar!"
lang: es
permalink: /es/actividades/el-xilofono-del-futuro-con-leds/
ref: activity_xylophone_with_leds

# ACTIVITY INFO
level: 1
computational_topics:
  - "Sensores e Input"
  - "Gráficos y Dibujo"
general_topics:
  - "Arte y Música"
  - "Ciencia y Tecnología"

tags: [Mapeo de Sensores, Múltiples Salidas, Inclinación, Feedback Visual, Sincronización]

introduction: |
  Ya has convertido el movimiento en música... pero un verdadero espectáculo del futuro necesita luces, ¿verdad? En esta misión, llevaremos nuestro xilófono mágico al siguiente nivel. No solo tocarás notas al inclinar tu dispositivo, sino que también controlarás una luz que bailará en la pantalla en perfecta **sincronización** con cada sonido. Aprenderás la poderosa técnica de usar una sola entrada de sensor para controlar **múltiples salidas** a la vez.

teacher: |
  ### **Cursos**
  * Grados 3-12

  ### **Materiales**
  * Teléfono y computadora
  * Conexión a Internet

  ### **Descripción**
  Los estudiantes modificarán su proyecto de xilófono anterior para que el sensor de inclinación controle simultáneamente una nota musical y la posición de un LED en la pantalla. Esto refuerza el concepto de relacionar datos mientras introduce la idea de feedback visual y sincronización.

  ### **Objetivos Educativos**
  * Comprender el concepto de relacionar una única entrada de datos a múltiples salidas. 
  * Proporcionar feedback visual para el estado de un sensor en tiempo real.
  * Crear un prototipo audiovisual más rico e interactivo.
  * Entender cómo se sincronizan diferentes tipos de salidas (sonido y luz).

  ### **Inicio (10 minutos) - ¿Qué le Falta a Nuestra Música?**
  1.  Da la bienvenida a los estudiantes y haz un breve repaso: **"En la última actividad, creamos un increíble instrumento que se toca con el movimiento. Pero piensen en un concierto o un videojuego... ¿qué acompaña siempre a la música para hacerlo más emocionante?"** La respuesta clave es: ¡luces!
  2.  Plantea el desafío de hoy: **"Vamos a convertir nuestro xilófono en un espectáculo audiovisual completo. ¿Cómo podríamos hacer que una luz en la pantalla se mueva a izquierda y derecha siguiendo la melodía que tocamos con la inclinación?"**
  3.  Esto introduce el concepto principal: usar los mismos datos del sensor de inclinación para controlar dos cosas a la vez.

  {{learn}}

  ### **Desarrollo (20-30 minutos) - Construyendo el Espectáculo Audiovisual**
  1.  Ahora que los estudiantes entienden la meta, es hora de agregar la dimensión visual.
  2.  Guíalos a través de **las instrucciones para añadir el componente de pantalla LED y modificar su código existente**, como se detalla a continuación. Es crucial que entiendan cómo el mismo valor de la inclinación se utiliza en dos lugares diferentes del código.

  ### **Cierre (5-10 minutos) - La Sincronización es la Clave**
  1.  Una vez que todos los xilófonos tengan luces y sonido sincronizados, reflexiona sobre el concepto.
  2.  Pregunta a la clase: **"¿Por qué la luz y el sonido se mueven juntos? ¿Qué parte del código es la responsable de esa sincronización?"** Usa las preguntas de la sección de reflexión para explorar las matemáticas detrás de la relación de datos y pensar en otras combinaciones posibles.

  {{reflect}}

# DYNAMIC SECTIONS AS ARRAY
content_sections:

  - id: "learn"
    title: "Más Allá del Sonido: Feedback Visual"
    type: "learn"
    icon: "book-reader"
    content: |
      Cuando tocas una tecla en un piano real, no solo la oyes, también la ves moverse. Esa confirmación visual se llama **feedback**. ¡Hace que la experiencia sea mucho más intuitiva! En nuestros proyectos digitales, podemos hacer lo mismo. Al añadir una luz que se mueve con el sonido, le damos al usuario un feedback visual instantáneo. Esto no solo se ve genial, sino que ayuda a entender mejor la conexión entre el movimiento y el resultado.
    media: "src/03.1-led-xylophone/a-visual-feedback.svg"

  - title: "Conexión a Múltiples Salidas"
    type: "learn"
    content: |
      Aquí es donde la programación se vuelve realmente poderosa. El **Mapeo a Múltiples Salidas** significa usar la información de **un solo sensor** para controlar **dos o más cosas diferentes** al mismo tiempo.
      Imagina que eres un director de orquesta. Con un solo movimiento de tu batuta (la **inclinación**), les dices a los violinistas qué nota tocar (el **sonido**) Y al técnico de luces qué foco encender (el **LED**). ¡Un solo gesto, múltiples resultados sincronizados!    
    media: "src/03.1-led-xylophone/b-multiple-mapping.svg"

  - title: "Adaptando los Datos: La División Mágica"
    type: "learn"
    content: |
      El sensor de inclinación nos da un rango de números bastante amplio. Pero nuestra pantalla LED es pequeña (solo 7 LEDs de alto) y la escala musical que queremos usar también es limitada. Si usáramos el número del sensor directamente, ¡el punto de luz se saldría de la pantalla al instante!
      Para solucionar esto, necesitamos **escalar** o adaptar los datos. Usando una simple operación matemática como la **división**, podemos reducir el rango de números del sensor para que encaje perfectamente tanto en nuestra pantalla como en nuestra escala musical.
    media: "src/03.1-led-xylophone/c-inclination-ranges.es.svg"

  - id: "create"
    title: "Crear"
    type: "create"
    icon: "cogs"
    heading_text: "Construyamos el xilófono del futuro."
    steps:
      - "Presiona <addbutton>Añadir dispositivo</addbutton> y selecciona <comp>Inclinación</comp> para leer el movimiento."
      - "Añade también el componente <comp>TecladoMusical</comp> para el sonido."
      - "Finalmente, añade <comp>DibujoLED</comp> para nuestra salida visual."
      - "Recuerda escanear o abrir todos los componentes. Para este proyecto, ¡puedes ponerlos todos en el mismo smartphone!"
    ready_message: "¡Estamos listos para crear un espectáculo audiovisual!"

  - title: "Composición del Código"
    type: "code-composition"
    icon: "code"
    content: |
      Haz clic en el signo de interrogación para abrir los comentarios. La clave de este código es que el valor de la `inclinación Y` se lee una vez, se divide por 15 para escalarlo, y luego ese **mismo resultado** se usa en dos lugares: para calcular la `posición Y` del LED y para calcular la `nota musical`. ¡Esta reutilización es lo que garantiza la sincronización perfecta!
    media: "https://app.protobject.com/generate?equivalent-xilofono-inclinacion-con-nota-led&es&dynamic&-1"

  - id: "reflect"
    title: "Reflexiona"
    type: "reflect"
    icon: "lightbulb"
    content:
      - |
        ¿Cuál es la gran diferencia entre este proyecto y el xilófono anterior?
      - |
        ¿Por qué tuvimos que dividir el valor del sensor antes de usarlo? ¿Qué pasaría si quitáramos el bloque de división?

    right_content:
      - text: |
          **Desafío:** ¡Conviértelo en un mix de luces! En lugar de controlar la posición de un LED, ¿podrías agregar nuevas luces en otras posiciones? **Pista**: Podrías dibujar nuevos puntos en otra posición del eje x, ¡y así tener 3 líneas de luces que se mueven con la inclinación!
      - media: "src/03.1-led-xylophone/d-challenge.svg"
---