Back to Browse

Sound Visualization - 'Irisgram' (Spectrogram) P5JS

16.2K views
Jul 18, 2022
40:57

In today's video, you'll learn how to make a circular spectrogram (irisgram) in P5JS. If you come from another programming language, don't worry; you can still learn the basics and give it a shot! This project is special to me because it is what drew me deeper into programming in general. I began coding in Godot by watching tutorials; I hadn't solved a single problem on my own at the time. But after seeing an incredible circular spectrogram on Vimeo, I knew I had to try it. The rest is history:) The code is admittedly a little unoptimized; the line visualizer and spectrogram length variables could be parametric, and the angle problem could be solved by introducing an additional variable to hold the angle value at pause/play. But my excitement was too much for me to contain, so I made the video. I'll leave that problem up to you to solve! P5JS sketch: https://editor.p5js.org/tinyturingmachine/sketches/GLOvLhqRC Thanks for watching, happy programming! #p5js tags: spectrogram, irisgram, sound visualization, p5js, tutorial

Download

0 formats

No download links available.

Sound Visualization - 'Irisgram' (Spectrogram) P5JS | NatokHD