svg - Drawing Tool with Processing

Question

I am trying to create a little drawing tool with processing. The final drawing should be exportable as a .svg file – so i thought this to be pretty easy… but actually it isnt… I put the background function into setup – to be able to draw – the safed svg file unfortunately only contains a single frame – and not the whole drawing. :-( What am I missing – how could I achieve that! I would be thankful for any kind of help!

This is my code so far:

import processing.svg.*;

boolean record;



void setup () {
  size(1080, 1080);
  background(255);
}

void draw() {
  if (record) {
    beginRecord(SVG, "frame-####.svg");
  }

  fill(255);
  strokeWeight(1);
  ellipse(mouseX, mouseY, 100, 100);
  if (record) {
    endRecord();
    record = false;
  }
}

void mousePressed() {
  record = true;
}

Tried different things in organizing the code lines in different orders – but could not manage it…

Thank you!

question from:https://stackoverflow.com/questions/65936271/drawing-tool-with-processing

Answer 1

That's because you're creating an image every time you beginRecord and endRecord. If you want to save the image as you see it, you can use save(fileName.png) instead. Here's a code snippet to demonstrate:

void setup() {
  size(800, 600);
  background(255);
  
  fill(255);
  strokeWeight(1);
}

void draw() {
  ellipse(mouseX, mouseY, 100, 100);
}

void mousePressed() {
  save("myImage.png");
}

If, on the other hand, you really want to use beginRecord, know that it'll save everything you draw between beginRecord and endRecord. You could programatically create an image file this way, as an example, but you cannot just add snapshots to an existing image (which is why you only see "one frame" with your current code). Every time you begin recording, you create a new image. I'm not especially familiar with this method, but one obvious way to do things would be to "save" whatever the user is doing and reproduce those instructions to save them. Here's an example which does this (it saves when you right-click, and I also took the liberty of drawing only when the left mouse button is down):

import processing.svg.*;

boolean record;
ArrayList<PVector> positionsList;

void setup() {
  size(800, 600);

  positionsList = new ArrayList<PVector>();
}

void draw() {
  background(255);

  fill(255);
  strokeWeight(1);
  for (PVector p : positionsList) {
    ellipse(p.x, p.y, 100, 100);
  }
  ellipse(mouseX, mouseY, 100, 100);

  if (record) {
    positionsList.add(new PVector(mouseX, mouseY));
  }
}

void mousePressed() {
  record = mouseButton == LEFT;

  if (mouseButton == RIGHT) {
    beginRecord(SVG, "frame.svg");

    fill(255);
    strokeWeight(1);
    for (PVector p : positionsList) {
      ellipse(p.x, p.y, 100, 100);
    }

    endRecord();
  }
}

void mouseReleased() {
  record = false;
}

While drawing:

The file (as a png here but it was saved as a svg on my computer):

Hope it helps. Have fun!