Cabbage Logo
Back to Cabbage Site

Svg animation

Looking to learn about svg animations and implementation of graphics in a similar way to something like processing or p5 js, the csound oscilloscope seems to be low resolution and I was wondering if there is a more modern approach to this in cabbage , any help would be appreciated :frog:

So neither of those platforms handle SVGs as far as I am ware. They simply draw directly to the graphics context. This is what Cabbage does under the hood. The SVG Element identifier lets you generate SVG text that then gets drawn to the graphics context. Because it adds an extra layer of abstraction, it’s a little more clunky than p5js, and to handle animations one simply redraws each frame. In real SVG, animations are handled much more succinctly, with dedicated tags.

Do you mean the Cabbage oscilloscope or the one that Csound shows? Either way, I don’t think either are that great. Did you see the example I posted a while back called svgTable. That would be a good place to start. Note however that the more point you want to draw, the more CPU you will use up. Search the forum for SVG and you should find a good few examples. Also, check out the Misc examples in Cabbage. I’ve added most of the forum example to that too.

1 Like