17.9: Sound Visualization: Graphing Amplitude - p5.js Sound Tutorial

From the creator

In this video, I use the getLevel() function from the p5.js Sound Library to graph the amplitude (volume) over time. Code: https://thecodingtrain.com/tracks/sound/sound/9-sound-visualization 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/F0ZnzjvJC 🎥 Previous: https://youtu.be/q2IDNkUws-A 🎥 Next: https://youtu.be/h_aTgOl9J5I References: 🔗 p5.sound library: https://p5js.org/reference/#/libraries/p5.sound 🔗 getLevel(): https://p5js.org/reference/#/p5.Amplitude/getLevel 🔗 this.dot song: https://soundcloud.com/kristianpedersen/this-dot-feat-daniel-shiffman Timestamps: 0:00 Introduction 0:54 Use preload() to load the song 3:20 Create an amplitude object 4:31 Graph the volume level 6:11 Visualize the volume array 7:34 Draw as a continuous line 8:04 Remove old values 9:00 Center the graph 12:53 Translate to center and shift by current volume 13:16 Outro Editing by Mathieu Blanchette Animations by Jason Heglund Music from Epidemic Sound 🚂 Website: https://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://thecodingtrain.com/discord 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/ 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZ

Published 2016-10-17 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.