Sesión 08: sonido y DOM con p5.js

Objetivos

• Explicar cómo un oscilador genera un tono y cómo frecuencia y amplitud afectan al sonido.
• Iniciar p5.Oscillator tras una interacción y controlar sus parámetros con el ratón.
• Distinguir la manipulación nativa del DOM de las funciones DOM de p5.js.
• Responder a eventos del ratón modificando estilos y posiciones de HTML.
• Crear, actualizar y eliminar elementos HTML desde un sketch sin canvas.
• Proponer cómo conectar una interacción visual con un parámetro sonoro.

Recorrido

1. Abre el ejemplo de p5.Oscillator, activa el tono y observa cómo las coordenadas del ratón controlan frecuencia y amplitud.
2. Abre dom/ y sigue cómo querySelector() encuentra la bola y el evento mousemove modifica su posición con estilos CSS.
3. Continúa con dom-with-p5js/. Observa que noCanvas() evita crear un canvas y que select() y createDiv() trabajan con elementos HTML.
4. Sigue el ciclo de la fruta: aparición aleatoria, detección de proximidad, actualización del marcador y eliminación del elemento.
5. Compara ambos ejemplos y decide cuándo te conviene usar las herramientas nativas del navegador o la abstracción de p5.js.

Ejemplos de la sesión

• DOM nativo: mover un elemento con el ratón usando eventos y CSS
• DOM con p5.js: recoger frutas con un sketch sin canvas
• p5.sound: controlar frecuencia y amplitud de un oscilador con el ratón

Exploración sonora

p5.Oscillator genera un tono periódico; su frecuencia, medida en hercios, influye en la altura tonal, y su amplitud se relaciona con el nivel percibido. En el ejemplo sonoro, mouseX mapea la frecuencia entre 110 y 880 Hz y mouseY ajusta la amplitud. El audio se activa mediante un botón porque el navegador requiere un gesto explícito antes de reproducirlo.

Referencias

• p5.sound
• p5.Oscillator
• DOM de p5.js
• dj_dave__ · programación creativa y música

Guion ampliado

Consulta los objetivos, la práctica guiada y las referencias de la sesión.