Saving every frame in SVG

Processing Coding Questions
1

Hey, I’m completely new to this, and this is an assignment for me, so pardon if there’s any errors in the code. I’ve been trying to implement SVG saving so I can edit the file in Illustrator, but I can’t seem to save the entire visual. It only seems to save a single frame of the newest generated bezier curve. Am I missing something, or is there a better way to do things?

Cheers!

float t = 0.0;
String myText = "click to pause/play, press r to reset canvas!";
import processing.svg.*;
//import processing.pdf.*;
boolean record;

void setup() {
  size(displayWidth, displayHeight);
  stroke(10, 100);
  noFill();
  background(255);
  frameRate(20);
  //createGraphics(displayWidth, displayHeight);
  //beginRecord(PDF, "everything.pdf");
}

void draw() {
  if (record) {
   // Note that #### will be replaced with the frame number. Fancy!
   beginRecord(SVG, "frame-####.svg");
  }
  push();
  fill(0);
  noStroke();
  textAlign(CENTER);
  textSize(24);
  text(myText, displayWidth/2, 0.8*displayHeight);
  pop();
  
//curves generating
  float x1 = width  * noise(t + 10);
  float x2 = mouseX * noise(t + 20);
  float x3 = width * noise(t + 30);
  float x4 = mouseX * noise(t + 40);
  float y1 = mouseY * noise(t + 50);
  float y2 = height * noise(t + 60);
  float y3 = mouseY * noise(t + 70);
  float y4 = height * noise(t + 80);

  bezier(x1, y1, x2, y2, x3, y3, x4, y4);

  t += 0.009;
}
  

void mouseClicked() {
if (isLooping()) {
  noLoop();
} else {
loop(); }
}

void keyPressed() {
  if (keyCode == 82) {
  background(255);
  }
  if (keyCode == ENTER) {
    record = false;
  }
}
2

Hello,

I was able to do this using createGraphics():
SVG Export / Libraries / Processing.org

The above reference states:

Unlike the PDF renderer, the SVG renderer will only save the final frame of a sequence.

And did something similar to this with createGraphics:
endRecord() / Reference / Processing.org

References:
createGraphics() / Reference / Processing.org

I did not see what I was drawing to the offscreen buffer.
There is and are ways to do this also. :)

Try it with a simple example and then go from there.

For example I used this in draw():
svg.line(0, 0, random(300), random(300));

I leave this challenge (opportunity) with you!

:)

SVG Output viewed with browser:

image
image502×501 69.6 KB