---
layout: activity
title: "El Visualizador de Música"
image: src/02.2-music-visualizer/02.2-music-visualizer.svg

video: src/videos/02.2_music_visualizer.mp4
video_title: "¿Qué haremos?"
description: "Convierte el ruido de tu entorno en un espectáculo de luces. Generaliza el concepto de relacionar datos usando el micrófono para controlar la intensidad de luz en tiempo real."
lang: es
permalink: /es/actividades/el-visualizador-de-musica/
ref: activity_music_visualizer

# 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, Generalización, Sensor de Ruido, Micrófono, Visualización de Datos, Color RGB]

introduction: |
  Has transformado el movimiento en música y luz. Pero, ¿y si tu programa pudiera *escuchar* el mundo que lo rodea? En esta misión, usaremos otro tipo de sensor para demostrar que la relación de datos es una idea universal. Usaremos el **micrófono** de tu dispositivo para capturar el nivel de ruido ambiental y lo convertiremos en un espectáculo de luces dinámico. ¡Prepárate para crear un visualizador que se ilumina con tu voz, tus aplausos o tu música favorita!

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

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

  ### **Descripción**
  Esta actividad consolida el concepto de relación de datos enseñado en las lecciones anteriores, demostrando su generalización. Los estudiantes pasarán de usar un sensor de gestos (inclinación) a un sensor ambiental (micrófono), y relacionarán el nivel de ruido con una propiedad de intensidad de luz. Esto refuerza que el principio de relación de datos es una herramienta computacional universal.

  ### **Objetivos Educativos**
  * Generalizar el concepto de relacionar datos de sensores.
  * Utilizar el micrófono como un dispositivo de entrada de datos.
  * Entender cómo un valor numérico de un sensor puede controlar directamente las propiedades de una luz.
  * Crear un prototipo de visualización de datos en tiempo real.

  ### **Inicio (10 minutos) - Relacionar datos es Universal**
  1.  Da la bienvenida a los estudiantes y repasa los proyectos anteriores: **"Hemos relacionado la inclinación con notas musicales y con la posición de un LED. Pero, ¿creen que relacionar datos solo funciona con el sensor de movimiento?"**
  2.  Plantea una nueva idea: **"¿Qué otro 'sentido' tiene su dispositivo que podamos usar?"** Guíalos hacia el micrófono. **"¿Y si en lugar de un gesto, capturamos el sonido? ¿Podríamos hacer que la pantalla se ponga roja cuando hablamos alto y se oscurezca cuando estamos en silencio?"**
  3.  Explica que este es el objetivo de hoy: demostrar que la relación/mapeo de datos es un principio universal que funciona con cualquier sensor y cualquier salida.

  {{learn}}

  ### **Desarrollo (20-30 minutos) - Construyendo con Sonido**
  1.  Ahora que los estudiantes están listos para generalizar el concepto, es hora de construir el visualizador.
  2.  Guíalos a través de **las instrucciones para usar el sensor de ruido y controlar la intensidad de luz**, como se detalla a continuación. Anímalos a hacer diferentes ruidos (hablar, aplaudir, poner música) para ver la reacción en tiempo real.

  ### **Cierre (5-10 minutos) - Reflexionando sobre la Entrada y la Salida**
  1.  Una vez que todos los visualizadores están reaccionando al sonido, es hora de consolidar el aprendizaje.
  2.  Inicia la discusión final: **"Hoy hemos demostrado una de las ideas más importantes de la programación. ¿Qué datos hemos relacionado/mapeado y con qué salida? ¿Qué otras combinaciones de sensor y salida se les ocurren?"** Usa las preguntas de la sección de reflexión para fomentar la creatividad y la comprensión profunda del concepto.

  {{reflect}}

# DYNAMIC SECTIONS AS ARRAY
content_sections:

  - id: "learn"
    title: "El Micrófono: Las Orejas del Dispositivo"
    type: "learn"
    icon: "book-reader"
    content: |
      El **micrófono** de tu dispositivo es un sensor diseñado para "escuchar". Convierte las ondas de sonido que viajan por el aire en una señal eléctrica. Tu programa puede leer esta señal como un número que representa qué tan fuerte es el sonido. A esto lo llamamos el **nivel de ruido**. Cuanto más alto sea el sonido, mayor será el número que nos dé el sensor.
    media: "src/02.2-music-visualizer/a-sound-conversion.svg"

  - title: "Generalizando la relación de datos: un principio universal"
    type: "learn"
    content: |
      Lo más importante que aprenderemos hoy es que **relacionar datos no depende de un sensor específico**. Es un principio fundamental de la programación que sigue una fórmula simple: **Entrada → Procesamiento → Salida**.
      Puedes relacionar *cualquier* entrada (inclinación, ruido, nivel de luz) a *cualquier* salida (sonido, color, posición, vibración). Al cambiar nuestro sensor de inclinación por un micrófono, estamos demostrando que la relación de datos es una herramienta universal para crear interacciones.
    media: "src/02.2-music-visualizer/b-input-output-relation.es.svg"


  - title: "Controlando la intensidad de la luz con Datos"
    type: "learn"
    content: |
      Un color en una pantalla se crea mezclando luz Roja, Verde y Azul (RGB). Cada uno de estos tres colores tiene un valor de intensidad. Para nuestro visualizador, tomaremos el número que nos da el sensor de **nivel de ruido** y lo conectaremos directamente al valor de intensidad del **color Rojo**. Dejaremos el Verde y el Azul en cero.
      El resultado: ¡cuanto más fuerte sea el sonido, más intenso será el color rojo en la pantalla!
    media: "src/02.2-music-visualizer/c-sound-level.svg"

  - id: "create"
    title: "Crear"
    type: "create"
    icon: "cogs"
    heading_text: "Construyamos el visualizador de música."
    steps:
      - "Presiona <addbutton>Añadir dispositivo</addbutton> y selecciona <comp>NivelRuido</comp> para usar el micrófono."
      - "Presiona de nuevo <addbutton>Añadir dispositivo</addbutton> y selecciona <comp>DibujoLED</comp> para que sea nuestra pantalla de luces."
      - "Recuerda escanear o abrir los componentes. Puedes ponerlos en el mismo dispositivo."
    ready_message: "¡Estamos listos para transformar el sonido en luz!"

  - title: "Composición del Código"
    type: "code-composition"
    icon: "code"
    content: |
      Presiona el signo de interrogación para abrir los comentarios. En un bucle `repetir para siempre`, el programa lee constantemente el `nivel de ruido`. Luego, usa ese número para crear un color. Finalmente, pinta toda la pantalla con este color variando la intensidad del brillo. ¡Más ruido significa más brillo!
    media: "https://app.protobject.com/generate?equivalent-luci-discoteca-ruido&es&dynamic&-1"

  - id: "reflect"
    title: "Reflexiona"
    type: "reflect"
    icon: "lightbulb"
    content:
      - |
        Has demostrado que el mapeo es un principio universal. ¿Qué sensor usamos como entrada y qué propiedad controlamos en la salida?
 
      - |
        Piensa en otros sensores de tu teléfono (como el sensor de luz ambiental). ¿Qué datos podrías relacionar con él? ¿Qué crearías?

    right_content:
      - text: |
          **Desafío:** ¡Crea un visualizador múltiple! Modifica el código para que no solo el ruido controle la intensidad de la luz, sino que también influya la luz ambiental y la inclinación del teléfono. **Pista**: decide una regla simple (por ejemplo, que la luz aumente solo cuando **dos o más sensores** detecten un valor alto).
      - media: "src/02.2-music-visualizer/d-multiple-visualizer.svg"
---