Drawing Tool with Processing

Processing Coding Questions
1

Hi everyone!
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. :frowning: 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 for any help!!!

2

The code you posted looks like the single frame example from the SVG library reference with only very slight changes. The conditional at the top of draw() calls beginRecord(…) if “record” is true and the one at the bottom calls endRecord() and also sets “record” to false if it is currently true so the recording always starts and ends in the same frame.

Another boolean can be used to keep track of the current recording state and then the mouseClicked code can be modified to toggle the “recording” variable and used along with the new boolean to start recording if not currently recording or end recording if currently recording.

//...

void draw() {
  if (record && !recording) {
    // every frame if record is true
    // but recording is not
    // start recording and 
    // set recording to true
    recording = true;
  }

  //...

  if (!record && recording) {
    // every frame if record is false
    // and recording is true
    // stop recording and
    // set recording to false
    recording = false;
  }
}

void mousePressed() {
  // set record to the opposite of what it
  // was when the mouse was clicked
  record = !record;
}

import processing.svg.*;

boolean record, recording;
PGraphics pg;

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

void draw() {
  if (record && !recording) {
    // beginRecord(...) here and endRecord() below
    // does not accumulate drawing ... bug?

    println("recording started");
    pg = createGraphics(
      width, height, SVG, "test.svg");
    pg.beginDraw();
    pg.background(255);
    recording = true;
  }

  disp(g);
  if(recording) {
    disp(pg);
  }

  if (!record && recording) {
    println("recording stopped");
    pg.endDraw();
    recording = false;
  }
}

void mousePressed() {
  record = !record;
}

void disp(PGraphics pg) {
  pg.ellipse(mouseX, mouseY, 100, 100);
}
3

Hi rbauer!

Thank you so much! Helps me a lot! Interesting: in the meantime I tried it with .pdf export and this worked! Look at the code snippet here:

import processing.pdf.*;
PShape shape;

void setup () {
  size(1080, 1080);
  beginRecord(PDF, "drawing.pdf");
  shape = loadShape("shape.svg");
  shapeMode(CENTER);
  background(0,255,0);
}

void draw() {


  shape.disableStyle();
  fill(255);
  strokeWeight(10);
  shape(shape, mouseX, mouseY, 200, 200);
}

void keyPressed() {
  if (key == 's') {
    endRecord();
    exit();
  }
}