Cabbage Logo
Back to Cabbage Site

svgFFT example

Another svgElement() experiment. This time using the psv2array opcode to generate amp/freq data for a frequency analyser. The freq/amp data is used to create an SVG path. The UDO takes an image channel, a k-rate array and an update rate. The faster the updates the more CPU used, but it still performs pretty well. There is a second UDO that simply draws the background grid at i-time.

svgFFT.csd (2.3 KB)

1 Like

This one uses 2 image, and draws a second FFT on top of the first to give two colours :slight_smile:

Just curious, but are you heading towards replacing JUCE by using svg widgets? Seems the only thing you would need is an image/canvas type object.

Not at all. JUCE is used for far more than what we see on screen. The entire system is built on it. But in terms of the UI, I think SVGs do provide an viable alternative solution. I also like that you can embed everything into the .csd file.

1 Like

This one is a little more efficient. I’m only drawing lines between every 10 frames, and using a gradient instead of multiple images.

svgFFT.csd (3.3 KB)

I should probably use curves to draw the outline instead of straight lines. :thinking:

Me trying to make sense of what’s happening in these examples


Looks super nice though

1 Like

:rofl: It’s just the SVG parsing that’s kind of ugly. I sketch my ideas using this and then work out how to make that SVG text dynamic. :+1: