Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Sound-Driven Visuals | Creative Coding Project Showcase
Generative Art with JavaScript and P5.js

bookSound-Driven Visuals

index.html

index.html

copy

To create generative art that responds to sound, you can use the p5.AudioIn class in P5.js. This class captures audio input from your device's microphone, letting your sketch "listen" to the environment or your voice. Once you have microphone input, you can use amplitude analysis to measure the loudness of the incoming sound. The p5.Amplitude object analyzes the audio stream and provides a value between 0 (silent) and 1 (loud), which you can use to drive visual changes in your sketch.

By mapping the current amplitude value to properties like size, color, or position, you can make shapes react dynamically to sound. For example, you might map louder sounds to larger shapes or brighter colors. The map() function is especially useful for converting the amplitude range into suitable values for your visuals. This approach allows you to create immersive audiovisual experiences where your artwork responds in real time to music, speech, or ambient noise.

question mark

What does p5.AudioIn allow you to do in a P5.js sketch?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 1

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

How do I set up microphone input in P5.js?

Can you give an example of mapping amplitude to a visual property?

What are some creative ideas for generative art that responds to sound?

bookSound-Driven Visuals

Desliza para mostrar el menú

index.html

index.html

copy

To create generative art that responds to sound, you can use the p5.AudioIn class in P5.js. This class captures audio input from your device's microphone, letting your sketch "listen" to the environment or your voice. Once you have microphone input, you can use amplitude analysis to measure the loudness of the incoming sound. The p5.Amplitude object analyzes the audio stream and provides a value between 0 (silent) and 1 (loud), which you can use to drive visual changes in your sketch.

By mapping the current amplitude value to properties like size, color, or position, you can make shapes react dynamically to sound. For example, you might map louder sounds to larger shapes or brighter colors. The map() function is especially useful for converting the amplitude range into suitable values for your visuals. This approach allows you to create immersive audiovisual experiences where your artwork responds in real time to music, speech, or ambient noise.

question mark

What does p5.AudioIn allow you to do in a P5.js sketch?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 1
some-alt