Is there a way to use p5.js-svg with createGraphics()?

[atagger]

I'm creating a music visualizer which is processor intensive, so I can't call the SVG renderer from canvas without serious performance implications. Is there a way to call p5-svg once at a set interval? For example - the program finishes running and then it renders the SVG? I was trying to do this by using a creategraphics()object, so it renders one frame, and not putting all the canvas data into the buffer every single frame. When I do this the SVG is empty.

createCanvas(windowWidth, windowHeight); pg = createGraphics(400, 400, SVG);

at some set interval:

save("mySVG.svg"); // give file name

Using clear() in draw() won't work for me either, as it would erase all the visuals.

Thanks for making this add-on, very awesome work!!!

[zenozeng]

@atagger Hi, you can use pg.xxx() to draw into an off-screen graphics buffer.

Example:

let pg;
function setup() {
  createCanvas(100, 100);
  pg = createGraphics(100, 100, SVG);
}

function draw() {
  background(200);
  pg.background(100);
  pg.noStroke();
  pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
  image(pg, 50, 50);
  image(pg, 0, 0, 50, 50);
}

[atagger]

Thank you so much for this response, this behavior works great.

What I'm actually trying to do is figure out if there is a way to clone the entire canvas to the pGraphics, so I don't have to draw each SVG element into the createGraphics buffer one element at a time every frame.

The idea is to try and get a snapshot of the canvas at set intervals of time and then use your library to output the entire canvas as a SVG. I could just set the canvas to SVG as the renderer, but this takes up too much processing power, which I why I'm trying to side step this. Maybe this is possible by cloning the canvas somehow? I will ask around on the p5 forums as well. This would be an amazingly useful way of using your library if it's possible (sort of like processing's PDF renderer).

I stumbled upon this article:
https://discourse.processing.org/t/creategraphics-referencing-existing-canvas-context/21067/3

Will explore further. THANK YOU!