p5js-electron-canvas-saver-boilerplate

I tried to make it so that even if you have never used Node/Electron, you should be able to use this boilerplate. This is the first app I made using Node or Electron, so if you have any suggestions or comments, please let me know.

What it tries to do

• Save unlimited number of frames from your p5js sketch. (p5 by default can save up to 15 frames. see here)
• Export image sequence and video files in a single app.
  • No need to use screen capture software. (No frame drops)
  • No need to use video editing software.
• It uses ffmpeg for video encoding which adds a lot of customizability.
• Ffmpeg is included as static binary. No need to install separately. A downside is that each project will have its own binary file which makes the whole project significantly bigger.
• Once packaged, no need to use command line at all.

What is is not so good at

• Recording demonstration video - it only records what's on HTML5 canvas, so any sliders on HTML DOM won't be recorded.
• Real time interaction - the frame rate may drop while recording depending on the complexity of your sketch.

How to use

1. download or clone this repo.
2. install node for your system. The simplest way is to go to https://nodejs.org and download/install the package.
3. open Terminal app.
4. Change directory to the downloaded folder. If you have downloaded to desktop,
   cd desktop/p5js-electron-canvas-saver-boilerplate
5. install dependencies
   npm install
6. run it
   npm run electron
7. You can write p5js and other html/css/js code as usual inside public folder. Take a look at index.js as well.
8. All the Chrome keyboard shortcuts work. Refresh by Cmd+R, toggle console by Cmd+Opt+I.
9. When you press start recording button, it will start recording PNG images, and when you press the button again, it will stop saving images and start converting the images to video file. You can check the progress from the browser console (or Terminal).
10. By default, files rendered are saved to downloads folder.
11. When you are done and want to package as app
    npm run dist
12. press Ctrl+C in Terminal to quit at any point.

Customization

Refer to fluent-ffmpeg documentation for different options you can add to video.

Limitations

• p5.js library is loaded from CDN - if you need to load from a local file, include the p5.js (or any other library files) in public folder and link it in public/index.html
• tested only on Mac.
• If you want to use ffmpeg-included app commercially, be sure to check out their licensing terms.

Dependencies

• p5js
• electron
• electron-builder
• fluent-ffmpeg
• ffmpeg-static: Mac binary comes from here

License

MIT