Newb Question: Saving to PDF

p5.js Libraries
1

I am trying to save my sketches to PDF. The most commonly mentioned way of doing this is to use this:

https://github.com/zenozeng/p5.js-pdf

but I am testing it with one of his simple example codes and it just loads a blank page. I am new to PDE so I am concerned I did not install the library correctly… I just downloaded from GitHub and then copied the folder into the Libraries folder that processing made in Documents.

Here is a screenshot of what was in the folder - was I supposed to do something else here to install it?

Thanks

Screenshot 2022-10-06 at 22.32.25
Screenshot 2022-10-06 at 22.32.251164×880 102 KB

EDIT: Here is the code I am using for testing.

function setup() {
    createCanvas(600, 200, P2D);
    pdf = createPDF();
    pdf.beginRecord();
}

function draw() {
    background(255);
    fill('#ED225D');
    textSize(100);
    textAlign(CENTER);
    text(frameCount, width * 0.5, height * 0.5);
    if (frameCount == 10) {
        noLoop();
        pdf.save();
    }
}
2

Hi

Look at this

http://zenozeng.github.io/p5.js-pdf/examples/#vector

3

Your source code works on my system (MacOS) using a Chrome browser with p5.js WebEditor. The following are the steps that I used.

  1. Download GitHub repository to my desktop using the URL in your post.
  2. Open p5.js WebEditor in Chrome browser.
  3. Create a new file in the project entitled ‘p5.pdf.js’ . File system should look like the image below.
  4. Copy/paste the contents of the p5.pdf.js file that you downloaded to your desktop (inside folder p5.js-pdf-master) to this newly created file.
  5. Inside of the index.html file of your project add this line of code to allow your project to use the file that you just created:
<script src="p5.pdf.js"></script>

I placed this line just below the other script code for “sketch.js”.
6. Run the code that you posted and create a pdf file. I sent the output to my desktop instead of the printer; the output is also shown below.

files

output
output1024×342 6.54 KB

3 Likes
4

This is amazing thanks so much - it works. I was even able to use your steps with another script to then get it to SVG to save it as a Vector PDF, which is what I set out to do.

By any chance do you know how I would go about getting the same thing in my PDE as I now have in the web browser? You are saying it works on yours? If not I can use a workaround of doing my drawing in PDE and then when its ready to save to PDF.

1 Like
5

The following reference describes getting a .pdf with Processing IDE:
https://processing.org/reference/libraries/pdf/index.html

1 Like
6

Figured it out with the Zenozeng method. I know its dumb but I couldn’t figure out how to edit the HTML of my sketches for the PDE. I was trying to open the HTML file from finder and it was coming up blank in textedit. I now see it in the tab next to the sketch I have open in PDE, and was able to add the line as you said. Complete rookie error. Thanks so much.

1 Like
7

Thanks for the feedback. I’ve always used WebEditor in a Chrome browser on Mac for p5.js. Now I also know how to use Processing IDE in p5.js mode with my system’s default browser, Safari.