Sound Visualization - 'Irisgram' (Spectrogram) P5JS

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: editor.p5js.org/tinyturingmac...
Thanks for watching, happy programming!
#p5js
tags:
spectrogram, irisgram, sound visualization, p5js, tutorial

[@ninjarts9034]

@turing code the way to fix the angle resetting when pause is to make a=a is stead of a=0

[@turingcode]

Thank you, it works!

[@morejpeg]

Hey I'm the dude from Reddit who made this!

[@turingcode]

Thanks for your help!

[@morejpeg]

@@turingcode Anytime, good work on the tutorial!

[@Bowen448]

Haha that's so cool/funny. Nice work and thabks for sharing!

[@Bowen448]

Thanks for passing it forward!

[@Bowen448]

I created my own particle system and many other experiments 20 years ago in Processing when it was just around and mostly Java based. I'm really happy redescovering p5(.js) and having some fun again. Unbelievable how much the whole ecosystem evolved and the ease of use improved. Anyway, happy coding :)

[@sebastianquirarte6705]

Really cool thank you for sharing!

[@charlenezhao3366]

Incrediable!! Really loving your code and it's so delicate to use short lines to show these complicate art. Thanks for sharing😄

[@turingcode]

Haha thanks! Glad you enjoyed the video!

[@user-lm4qj6jy5v]

thanks a lot for this!! amazing

[@eroskuncoro3837]

brother ur the best my man, very helpful video for my final exam coding class thank you so much blessed

[@turingcode]

Glad to have helped in anyway!

[@mehmeterendesign]

Cool one ✌️

[@patrickd4358]

nice bro

[@UNKNOWNMAER]

Интересная идея!

[@buzzkill29]

Thank you for sharing this! I was wondering if it is possible to connect a spotify API to this sketch? Would love to get some help on it!

[@turingcode]

Hi, I really haven't used the Spotify API but it seems Spotify doesn't allow saving of audio files. Which means you wouldn't get access to the frequency data... Now you don't have to explicitly get the frequencies from an offline file but again I don't think Spotifiy gives you access to the same. So far I can only see access to data like genre, year, mood, etc. One solution I could think of is to simply adapt the spectrogram so it's not running in real-time which would give you time to "gather" audio information from the Spotify 'play song' calls. How you would capture that data is entirely up to you. I want emphasize this by no means an optimal solution.

[@hanbala9138]

Hi! thanks man! is it possible to make this react to a mic? how can you do that?

[@turingcode]

That's an interesting idea! But since its a live feed we won't be able to work out the angle (constrained by the audio duration, perhaps you could start a timer and set that as duration?). If you're happy to work with the duration constraint, set a predefined time limit first, then pass the live feed through the FFT by calling fft.setInput(_mic variable_). You can set up your mic input using: p5js.org/reference/#/p5.AudioIn Also, depending on the quality of your mic, you might need to boost/cut certain frequencies. Cheers!

[@natalieiverson3333]

Hi, I'm wondering the code can be edited to export an SVG. I've been trying but have not had any success yet. Do you have any ideas?

[@turingcode]

Sorry for the late response. If you're still looking for answers, check this project. editor.p5js.org/dannyrozin/sketches/r1djoVow7

[@richardwatson4921]

Thats very cool....But, come one, now do the reverse - Take a picture of somebodies actual iris and play it as a sound!

[@turingcode]

That'd pretty interesting indeed 🤔 😁

[@Nicogs]

the line(0, i, 0, i) makes noooo sense at all ahha