Rendering audio visual applications

The question is: how do you render Processing applications which are real time audio reactive, i.e. where the the video reacts to parameters extracted from audio? For instance, this

was done via screen capture, and clearly the quality is not optimal.
In other cases, I have written a little code that parses my audio, and for each frame collects the data in a string which is eventually saved to disk. Then I rerun the audio visual piece, have the code read the parameters from the strings above, and use saveFrame().
It should be apparent that this is quite cumbersome, and more importantly it brakes my creative workflow too much.
What are your strategies to tackle these issues? Is there a more sleek workflow/library I am missing?

The minim Library is popular - http://code.compartmental.net/tools/minim/quickstart/
If you haven’t used it already.

Daniel Shiffman has a tutorial playlist on sound using p5js - https://www.youtube.com/playlist?list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW

can you go over in more detail about your algorithm or show us some working code examples to help simplify your process?

Hey dan850,
thanks for your reply. I know Minim quite well: that’s what I used for the video above (if it weren’t clear, I am the author).
I suspect I didn’t realize my specific question would have been quite involved, so I will give you another simpler example which elucidates the issue. Suppose you have a sketch with a system of many particles floating around, and suppose they react to the position of the mouse (for instance, they get bigger and pinker). If you try to save frames while you are moving the mouse, you’ll run into problems. Why? That’s because the saveFrame() function will reduce heavily the framerate of the sketch (in particular if you are aiming at HD quality), hence your mouse position will not be updated smoothly. One solution is the one I discuss above, i.e 1) run the sketch without saveFrame() while moving the mouse and saving for each frame the mouse position in an array which you then save to disk 2) run the sketch again with saveFrame() and substitute the mouse variable(s) with the data from the array you previously saved.
The question is not related to any specific code, but to any application that is interactive, and of which you want to make a video of. Neverthless, if you want to read some code check here

(I am the author of the blog as well)
Since I find this procedure eventually cumbersome, I wanted to know what other users come up with when (if) tackling this issue.

1 Like