Skip to main content

How to export your p5.js as a video

How to Video Capture your p5.js Sketch

ToIf exportyou're creating a piece of time-based work in p5.js you may want to capture the canvas as a video. For example, if you have a generative design that evolves over time, or an animation sequence. In this tutorial you will learn how to:

  1. Download and include a custom library to your p5.js sketch
  2. Program that library to access your camera as a videocapture requirescard.
    3. an
external

Custom library and some simple lines of code.

  1. Library

DownloadThe thefirst externalstep librarywe -need itto willtake be a zip file called "src" -  Click this linkis to download the Externalcustom Librarylibrary Filesfor this process. This library can be found at the following Moodle  link

. P.SFollowing Beforethat link will automatically download a src.zip folder.

 make sure you startsign -into Moodle to access the files.

TODO: add non-Moodle link.

Once this folder is downloaded you can extract it to either your desktop or downloads folder (anywhere you can easily find it). We are going to upload the files from this folder to our sketch now.

make sure you turn off "auto-refresh" !!if

you have it enabled as this could cause the video capture to crash as you're programming

Your
  • Sketch

    • GoThere is a red arrow ">" button beneath the play and stop buttons. Click this to expand the menu which shows all your sketch - I am using a blank sketch to demonstrate - and click on the red triangle to open up the side bar menu.

    1-red-triangle.png

    2-open-tab.png

    files.

    red triangle open tab

    1. Click the drop down triangle - Create a folder called "src"

      3-create-folder.png

    2. Click the drop down triangle for the src folder - choose the upload file option

      4-upload-files.png

      upload all the extracted files from the Externals Library Files download.

      5-files-uploaded.png

    3. Click on the "index.html" file in the side bar - there will be some code inside - you need to add three lines for video exporting - refer to line 9, 10 and 11 in the image below

    6-add-scripts-index-head.png

    1. Click on your sketch.js file in the side bar - add the capture device to your sketch - refer to line 1, 2 , 3 , 4 of the image below

      7 - create capturer object.png

    2. Go to your draw function - put this code at the beginning to start the capturing - refer to line 12, 13, 14 of the image below.

      8 - frameCount start - code.png

      This line of code is telling the sketch to start recording once the frameCount == 1.If you wanted to delay the recording by a certain amount of frames you can change this variable - calculating frames-per-second to time is given at the end of this tutorial.

    3. At the end of your code for draw add this last piece of code to finalise the recording process - refer to line 26, 27, 28, 29, 30, 31 of the image below. Please be aware of the "captureLength" variable which is defined on line 6

      9 - end code - variable - length calculator.png

    Please use this website to convert from FPS to Time Calculator FPS to Time .

    and...if you're really stuck...here is my code you can copy ;)

    Video Exporter Template

    Back to top