p5snap is a command-line interface that creates and saves snapshots of a p5 sketch

with npm:

npm -g install p5snap

to start p5snap, provide a relative file path and the number of images that should be saved

p5snap <FILE-PATH> -n <NUMBER-OF-IMAGES>

for example:

p5snap ./mySketch.js -n 20

will create:
• mySketch_0.png
• mySketch_1.png
• mySketch_2.png
• ...
• mySketch_19.png

you can bring p5snap into your existing node.js build tools by importing the snap module.

snap() only executes once, you can implement your own setInterval() to run snap() multiple times

for example:

const path = require('path')
const snap = require('p5snap/lib/snap.js')

snap({
  sketch_path: path.resolve(__dirname, './mySketch.js'),
  output_path: path.resolve(__dirname, 'output'),
  width: 1920,
  height: 1080,
  instance: false,
  filename: 'mySketch',
  delay: 300 // milliseconds to delay capturing
})

if your sketch is written as a p5 instance, you can use the --instance flag to execute p5snap in instance mode

module.exports and require statements are removed from instance mode. sketch should also include a "new p5()" call.

view example code for instance mode sketches.

p5snap currently only saves a single <canvas/> context. If your p5 drawing uses or draws DOM elements, it will not be included in the image.

p5snap runs in a hidden virtual browser environment. this means that interactive elements like webcam footage, cursor events, or key presses won't be triggered.

right now, the virtual browser environment does not have access to loading any external resources. a work around is providing them in your javascript as a data uri.

eventually, I'd like to include the JSOM fromFile api to allow passing in an index.html file instead of a js file.

Contributions, issues and feature requests are welcome.
Feel free to check issues page if you want to contribute.

Check the tag for suggestions on features to work on.

Copyright © 2020 Zach Krall.
This project is MIT licensed.