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/tinyturingmac...

Thanks for watching, happy programming!

#p5js

tags:
spectrogram, irisgram, sound visualization, p5js, tutorial