Optimizing for a CPU-Intensive Music Visualizer

p5.js
1

Hello! I recently started down my p5.js learning journey trying to build a music visualizer that loads and analyzes multiple audio files at once.

I succeeded in building a simple version of the visualizer (watch here!), but my problem is that the size of the audio files seems to distort the program (see video). This current version is loading 3 different ~30mb wav files. Each wav file I add to the program further decreases the quality of the audio.

The graphics seem to be rendering fine, but I can imagine as I increase their complexity (in color, size, shape, movement, etc.) that I will eventually run into a similar problem with the program slowing down.

Does anyone know a good approach for optimizing a CPU-Intensive program like this to run more smoothly? I’m looking into using Node.js; hoping that server-side rendering will help increase my bandwidth. But please let me know if you have different suggestions! I don’t mind running this program outside of the browser. I just want to be able to plug in my multiple audio files, press a button, and then see a finished result with beautiful dancing shapes :smile:

Open to any and all suggestions! Hoping that p5.js is the right language to do this in, but I’m open to learning and using other languages/tools!

2

When you don’t need real-time visuals, you can always just record the visual as a movie.

Then just play the movie later. The cpu can then render each frame in 3 seconds or so, it doesn’t matter how slow.

Maybe you can work with multiple threads. Complicated

Also, some renders are slower than other. Try P2D vs. P3D vs. javafx or so

1 Like
3

Processing Java should be faster than p5.js (javascript) and it’s not as restricted with memory as javascript in browser. In graphics front if you have a graphics card available then using shaders is one option https://processing.org/tutorials/pshader/

Anyway I would try java processing first. Transforming p5.js code to processing java is quite simple.

4

Thank you! This was very helpful :slight_smile: I’ve since moved my program over into Processing and it is working much better now.

I’m getting stuck now on loading and playing multiple audio files all at once - instead of playing all at once, some of the files start playing a little earlier/later than others. Any clues on if there’s a better way to do this than just loading the files and playing them in the setup() function? My method worked fine with 3 files but with 7 files it’s not working so well :confused:

Sorry to follow right back up with another question :sweat_smile:

5

That’s fine. Setup should be used to load files, because it may take a lot of time. Draw() cycle starts after that prep works has been done. So to get the audio in sync

  • load files in setup. Do all the time consuming stuff there
  • start audio in draw(). Then they’ll start at more or less same time. You can stop looping of draw()-function with noLoop()