p5.js Coding Tutorial | Music Visualization with FFT 🎵

Опубликовано: 22 Май 2026
на канале: Patt Vira

6,282

299

LET'S CONNECT
✨ Sign up for my newsletter at https://www.pattvira.com
✨ Instagram:   / pattvira
✨ Twitter:   / pattvira
--
Links:
🔗 p5.js editor: https://editor.p5js.org/
🔗 Music Visualization with FFT Code:
🔗 FFT Class Demo: https://editor.p5js.org/pattvira/sket...
🔗 Final Visualization: https://editor.p5js.org/pattvira/sket...
🔗 Introduction to Creative Coding Playlist:    • START HERE: Creative Coding for Beginners

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

References:
🔗 ‪@3blue1brown‬But what is the Fourier Transform? A visual introduction:    • But what is the Fourier Transform?  A visu...
🔗 Virtual Oscilloscope: https://academo.org/demos/virtual-osc...

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!