How to export single frame from animation as SVG

Processing Beginners
1

Hi guys!

What am I missing…. ?

I would like to export either a single frame from animation or the result image after few steps, e.g. when I draw circles using the mouseX.
Here is the very basic code:

import processing.svg.*;
boolean saveSVG = false;

void setup(){
size(800,800);
background(0);
}

void draw(){
if(saveSVG){
beginRecord(SVG, “svg-test-####.svg”);
}
ellipse(mouseX, mouseY, 10,10);

if(saveSVG){
endRecord();
saveSVG = false;
}

}

void mousePressed(){

}
void keyPressed(){
if(key == ‘s’){
saveSVG = true;
}

}

so, when the ‘s’ key is pressed, I would like to capture the whole image after moving the mouse with multiple circles, but the result is that I see just one circle. What am I doing wrong?
I will be greatful for any hints!

Thanks !

svg-test-0435
svg-test-0435800×800 968 Bytes

2

Hello @Lutoslawski.xyz,

Scrutinize your code and compare to reference provided.

This is incorrect:

Use one or the other. You have keyPressed() inside of mousePressed().

Reference:

The one example in the libraries documentation had issues with the variable record and I had to change it to something else:

image
image564×522 23.3 KB

:)

3

I’m sure you’re mistaken.

4

That I am! Green eggs and ham!

I misplaced my glasses today and the formatting is a bit off and I was clearly mistaken in my earlier post.

In the reference I provided it states:
Unlike the PDF renderer, the SVG renderer will only save the final frame of a sequence.

You could try saving your mouse locations for each frame in an array and draw that all in one loop during one frame and generate an SVG.

I tried this approach and it worked:

image
image958×612 32.6 KB

:)

5

Glad that you found your glasses back :+1:

6

Thanks glv, true I should delete the line with the mousePressed to keep the code clean, simply keep my code the same way I like my glasses - clean and sharp. ! I am also happy the glasses are back in the right place :slight_smile:. Summing up, this line let’s say was neutral for my code, but still I am missing the right solution, perhaps my way of thinking needs to be sorted.

The reference says SVG renderer will save the last frame, but since the boolean saveSVG is controlled by the ‘s’ key and before pressing it I have many circles drawn on my canvas, why it doesn’t export the whole image - saying that I feel like I’m getting closer to understand it. That’s means that no matter what I draw in previous frames, only the last one is saved - with just one circe…

Ok, but still…. how can I export to SVG the image, exactly the same as seen in the processing windows from an animation, in the same controlled way - by pressing the key on a keyboard.

Thanks for any advise!

7

Hello again!

Yes! That is my understanding and reminded of it each time I explore this.

It is very different from saveFrame() which will:

save an image that is identical to the display window.

This is a workaround for mouse positions:

import processing.svg.*;

boolean rec = false;
ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {
  size(400, 400, P2D);
}

void draw() {
  // Add mouse position to the points array
  PVector p0 = new PVector(mouseX, mouseY);
  ellipse(p0.x, p0.y, 10, 10);
  points.add(p0);

  if (rec) {
    // Start recording the SVG file
    background(255);
    beginRecord(SVG, "test.svg"); 

    // Draw all points collected so far
    for (int i = 0; i < points.size(); i++) {
      PVector p1 = points.get(i);
      ellipse(p1.x, p1.y, 10, 10);
    }

    // Finish recording the SVG file
    endRecord();

    // Stop the loop to avoid continuous drawing
    noLoop();
  }
}

// Use mouse press to trigger SVG recording
void mousePressed() {
  rec = true;
  //points.clear();
}

You can adapt for your use.

I wrote this quickly.
There may certainly be better solutions.

Reference:
saveFrame() / Reference / Processing.org

:)