Exporting to SVG for use in pen plotting

Processing Coding Questions
1

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);
}
}

2

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
3

Great, thanks.

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

4

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:

:)

5

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:

:)

6

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

1 Like
7

Hi there -
I came across this topic since I am trying to do the exact same thing in P5.JS, but struggling to get an SVG output. I’m curious if it is possible.
Does anyone have any ideas?
Thank you in advance.

8

According to this reference p5.js does not support SVG’s, but it does offer an alternative which I was unable to get to work in the p5.js web editor:
https://www.gorillasun.de/blog/working-with-svgs-in-p5js/
You might be able to get it to work on your system. Runtime is here:
https://github.com/zenozeng/p5.js-svg

Addendum:
The following example does run using the Processing editor set to p5.js mode:

let svg;
let angle;

function setup() {
  createCanvas(800, 600, SVG);
  svg = createGraphics(800, 600, SVG, canvas);
  translate(0, 100);
  angle = TAU/100;
  stroke(0);
  strokeWeight(4);
  beginShape();
  for (let i=0; i<300; i++) {
    var x = i;
    var y = 40*sin(i*angle);
    svg.vertex(x, y);
  }
  endShape();
  noLoop();
}

function draw() {
}

In addition this line of code must be added to index.html

<script src="https://unpkg.com/p5.js-svg@1.5.1"></script>

I have no idea if this code exports something which could be used for pen plotting. The graphic may be seen by double clicking on the index.html file in the sketch folder.

2 Likes