Exporting to SVG for use in pen plotting

Hi all, i’m a few weeks into learning coding/Processing but am struggling a bit with taking my processing creations and exporting them to SVG files. Below is a program that i’ve written up in Processing and i’d really like to be able to send it to my pen plotter to draw as its a small achievement for me. I’m not sure whether i need to just rewrite it all in a different format that will export or whether i can just adapt it with a few lines of code and then export. I’ve tried using beginRecord/endRecord and such but i’m never left with the full wave, usually just a single line. I’d really appreciate any help as its driving me a bit nuts!

float a = 0;
float aincrease = (PI/500);
float x = 0;
float z = 0;

void setup(){
size(800,350);
frameRate(200);
background(255);
}
void draw(){
float r = 100;
float y = r*-sin(a);
translate(0,height/2);

a = a + aincrease;
x = x + 0.2;
//x axis
line(0,0,width,0);
if(z < width){
line(z,0+2,z,0-2);
z = z + 50;
}
//wave
if(x < width){
fill(0);
point(x,y);
}
}

Try creating the sine wave outside of the draw() loop initially then display and record it simultaneously.

import processing.svg.*;

PShape wave;

float a = 0;
float aincrease = (PI/500);
float x = 0;
float z = 0;

void setup() {
  size(800, 350);
  background(255);
  wave = createShape();
  createSineWave();
  noLoop();
}

void createSineWave() {
  for (int i = 0; i < width*5; i++) {
    float r = 100;
    float y = r*-sin(a);
    translate(0, height/2);

    a = a + aincrease;
    x = x + 0.2;
    
    //x axis
    line(0, 0, width, 0);
    if (z < width) {
      line(z, 0+2, z, 0-2);
      z = z + 50;
    }
    
    //wave
    if (x < width) {
      wave.beginShape();
      wave.noFill();
      wave.vertex(x, y);
     // println("x = " + x + ": y = " + y);
      wave.endShape();
    }
  }
}

void draw() {
  beginRecord(SVG, "sineWave.svg");
  shape(wave, 0, 170);
  endRecord();
}

2 Likes

Great, thanks.

Was it going wrong due to the loops that i had within the draw function?

Hello @PCwigwam,

You may have only been saving the final frame; there is a comment about this in the library reference.
What you see on the sketch window is an accumulation of individual frames over time painted to the sketch window.

Reference:

Here is an example adapted from the reference above that will draw a sine wave in a single for() loop and then display it:

import processing.svg.*;

size(300, 200);
PGraphics svg = createGraphics(300, 300, SVG, "output.svg");

svg.beginDraw();
svg.translate(0, height/2);
float angle = TAU/100;
//angle = 0.2;
svg.stroke(0);
svg.noFill();
svg.beginShape();
float xLast = 0;
float yLast = 0;
for(int i = 0; i<300; i+=1) 
  {
  float x = i;
  float y = 40*sin(i*angle);
  //if (x>0)
    //svg.line(xLast, yLast, x, y);
  svg.vertex(x, y); 
  xLast = x;
  yLast = y;
  }
svg.endShape();  
svg.dispose();
svg.endDraw();

PShape s = loadShape("output.svg");
shape(s, 0, 0);

image

You get very different SVG file outputs (use a text editor to view) with a shape vs a line.
I don’t have access to a plotter and do not know how these will plot… please share results.

References:

:)

Hello @svan,

You are generating a new SVG file with each frame overwriting the last one.

Your example would benefit from a noLoop() after generating the SVG file.

Reference:

:)

You’re right; we only need one lap around the loop. Original post was edited to add ‘noLoop()’.

1 Like