Export SVG issues with Processing and p5.js

p5.js Libraries
1

I’m relatively new to Processing and know enough to be dangerous.

I want to export an SVG. I’ve been reading here and here and trying to import processing.svg.*; in my code but I’m getting nothing. I have the latest version of Processing 3 running on the latest version of Mac OS. I am able to create a sketch but when I try to import processing.svg the sketch stops building.

Does SVG Export work with p5.js?

Is it possible that the zenozeng/p5.js-svg project would help?

Is this the right category to be asking in?

If it would help to see my code, let me know.

Thanks for looking!

1 Like
2

Some other things I’ve found that might help:

3

Seems like you’re on the right track–mind sharing one of your sketches that isn’t working?

4

What is the best way to share the code?

In the meantime, here is a zip of the sketch project directory: https://www.dropbox.com/s/lyuhd6acmlnb8fd/circuits.zip?dl=0

5

You can add code to your posts using three backtick characters ``` followed by a language name (e.g., javascript) on one line, then adding your code beneath, and finally closing with another thee backticks on their own line. For example,

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Given you’re working with p5.js and multiple dependencies, consider using the p5 Editor to share your sketches. Here is working-ish version of circuits.

1 Like
6

Here’s mine: https://editor.p5js.org/plainspace/sketches/aA2Xjyug

7

Added some comments and links in there.

I still don’t understand why adding import processing.svg.*; breaks things. I also don’t understand what it would do if it did work.

8

E.g.:

import processing.svg.*;

void setup() {
  size(250, 250);                        // Set up a 250×250 canvas.
  beginRecord(SVG, "svg/output.svg");    // Start recording drawing operations to this file.
  noLoop();                              // Only run draw() once.
}

void draw() {
  noStroke();                            // Turn off the border on objects we’re about to draw.
  fill(#4bbcf6);                         // Set the fill colour to light blue.
  rect(50, 50, 100, 100);                // Draw a rectangle on the canvas and to the SVG file.
  fill(#5721a5);                         // Set the fill colour to purple.
  ellipse(150, 150, 100, 100);           // Draw a circle on the canvas and to the SVG file.
  endRecord();                           // Save and close the SVG file recording.
}

Uncaught SyntaxError: Cannot use import statement outside a module (sketch: line 1)

9

Ok… I’m starting to think that you can’t use SVG Export with p5.js. Am I right?

10

Just found this: https://editor.p5js.org/dannyrozin/sketches/r1djoVow7

Will try to get it working on mine

11

Well… I’m getting somewhere but now the SVG that downloaded is malformed…

12

Problem is that the SVG that is being downloaded seems to be a PNG in disguise

13

Are you mixing Processing (Java on the desktop) code with p5.js (JavaScript in the browser)?

This example

import processing.svg.*;

void setup() {
  size(250, 250);                        // Set up a 250×250 canvas.
  beginRecord(SVG, "svg/output.svg");    // Start recording drawing operations to this file.
  noLoop();                              // Only run draw() once.
}

void draw() {
  noStroke();                            // Turn off the border on objects we’re about to draw.
  fill(#4bbcf6);                         // Set the fill colour to light blue.
  rect(50, 50, 100, 100);                // Draw a rectangle on the canvas and to the SVG file.
  fill(#5721a5);                         // Set the fill colour to purple.
  ellipse(150, 150, 100, 100);           // Draw a circle on the canvas and to the SVG file.
  endRecord();                           // Save and close the SVG file recording.
}

should work fine in Processing.

1 Like
14

The keywords import & export are relatively new in the JS world:
ExploringJS.com/es6/ch_modules.html#sec_overview-modules

JS files which include any of those 2 keywords can only be dynamically loaded via builtin function import() or statically imported by other module JS files (MJS) or loaded from within an HTML file via <script>type="module" scr="some_module_filename"</script>.

Regardless, not many JS libraries are available as an MJS module file yet!

1 Like
15

Here’s some sketch which relies on both p5.js & Matter.js libraries and uses module files:

Notice though that it uses keyword import on its own stuff:

import Ball from '/classes/ball.mjs';
import addCanvasWalls from '/functions/addCanvasWalls.mjs';
import adjustFrameSize from '/utils/adjustFrameSize.mjs';

B/c both JS libraries p5.js & Matter.js aren’t yet available as ES6 JS modules (MJS) we can’t use keyword import nor builtin function import() in order to download them!

1 Like
16

The core misunderstanding here seems to be trying to use processing.svg – the Java library, for Java mode – with p5.js, the JavaScript mode. You can’t do that.

For some of the libraries compatible with the p5.js web editor (JavaScript mode) see https://p5js.org/libraries/