Patt Vira | p5.js Coding Tutorial | Music Visualization with FFT 🎵 @pattvira | Uploaded July 2024 | Updated October 2024, 23 hours ago.
LET'S CONNECT
✨ Sign up for my newsletter at pattvira.com
✨ Instagram: instagram.com/pattvira
✨ Twitter: twitter.com/pattvira
--
Links:
🔗 p5.js editor: editor.p5js.org
🔗 Music Visualization with FFT Code:
🔗 FFT Class Demo: editor.p5js.org/pattvira/sketches/6NmF7Qbj0
🔗 Final Visualization: editor.p5js.org/pattvira/sketches/KB9supaPG
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn

Song Credits:
🎵✨ Veiil by Etienne Mayson: https://maysun.zip/

References:
🔗 @3blue1brown - But what is the Fourier Transform? A visual introduction: youtu.be/spUNpyF58BY?si=h8ut6tf_Yoc0efBA
🔗 Virtual Oscilloscope: academo.org/demos/virtual-oscilloscope

Timestamps:
0:00 Intro
1:03 What is FFT
2:28 Sketch No.1: FFT Class Demo
5:24 Draw Time Domain Graph
8:59 Draw Frequency Domain Graph
13:54 Sketch No.2: Final visualization
14:03 Create 3D cubes
22:24 Create a 3d array grid to store color information
25:02 Add song and create an FFT object
26:13 Calculate distance between center of cubes to origin point
31:58 Color cubes based on FFT outputs
37:24 Final Result!