Back to Browse

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

97.3K views
Oct 17, 2016
13:35

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-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 p5.js Web Editor: https://editor.p5js.org/ 🔗 Processing: https://processing.org 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new #soundvisualization #p5js

Download

1 formats

Video Formats

360pmp437.5 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

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