zachkrall / p5snap

a command-line interface for creating snapshots of a p5 sketch

about

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

installation

with npm:

npm -g install p5snap

usage

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

as a module

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

instance mode

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.

limitations

single canvas

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.

interactive sketches

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.

external resources

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.

contributing

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.

license

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

p5snap's Issues

add --out-dir option

currently, p5snap saves files in the same directory it's executed in

add an --out-dir flag to save to a custom location

add support for multiple canvases