The Zero-Code Guide to Capturing p5.js Animations for Social Media
Want to share your p5.js creations on X (Twitter) or other social media?
While there are many ways to capture your work, I'll show you the simplest method that requires nothing but your web browser. If you use OpenProcessing, you're already halfway there!
This method is straightforward but has its pros and cons.
Pros
- No external libraries or software installation required.
- As simple as saving a file.
- Windows/macOS/Linux ready.
Limitations
- Maximum recording time is 15 seconds.
- Standard video quality.
- No audio support.
- Daily conversion limits (depending on the service).
*Please use these services at your own risk.
🚀 UPDATE: A Simpler Official Method
Since I first wrote this guide, p5.js has introduced a built-in saveGif() function. It's a great tool if you want to export animations directly from your code.
Check out my guide here: How to Use saveGif() in p5.js
"So, why still use the OpenProcessing method?"
Unlike saveGif(), this method requires zero coding. It's an "instant capture" solution that lets you record any live sketch on the fly—perfect for when you want to quickly share a moment without modifying your source code.
Step-by-Step Guide: Recording and Converting
While you can save a still image from a p5.js sketch with a simple right-click, capturing motion requires two quick steps: recording and converting.
Step 1: Record Directly in OpenProcessing
The OpenProcessing platform features a built-in recording tool.
At the OpenProcessing, click the Settings icon (top right) of your sketch that you want to record.
Then, click the text 'Record'.
Adjust the QUALITY and DURATION (up to 15 seconds). You can start recording by clicking "START RECORDING" or pressing the Space key.
The maximum recording time is 15 seconds. You can stop recording at any time by clicking the recording button again.
Pro Tip: If your code starts with a keyPressed() function, you can perfectly sync your animation with the start of the recording.
In my experience, the video quality seems to depend on the browser.
The fps seems to set the near value of frameRate() by 10 delimited. So you can record 30fps or 60fps as is.
The recording video does not include the sound. I tried with the sketch using p5.sound, but the sound did not be included it.
You recorded your p5.js animation easily through this process.
Note: The recorded file will be in .webm format. Since social media platforms like X often don't support .webm, we need to convert it to .mp4.
Step 2: Convert WebM to MP4 for Social Media
To make your video "Twitter-ready," use a free online tool like Convertio.
Online file converter Convertio
You can convert 2 files at once and 10 times per day with free service.
Click 'Choose Files', and select the 'WebM' file to convert.
Select 'MP4' as the output format, and click 'Convert'.
Wait a moment, and click 'Download' and save the converted 'mp4' file.
It converts to Twitter ready 'mp4' file by default. You can tweak the setting if you want.
That's all! Now, you can tweet your 'p5.js' animation by 'click and save' only!
Alternative Recording Methods
There are some other ways to record the 'p5.js' animation.
For example
- Using JavaScript library.
- You can record by using GUI. p5.capture. p5.capture
- Recode to 'WebM' file p5MovRec
- Create GIF animation p5.createLoop
- Using screen capture function of Windows/MacOS or other application software.
Please choose your favorite way and have fun!
deconbatch
To make something is my pleasure. Having fun in endless trial-and-error. Now, I'm loving creative coding and showing some example code in my blog. Mainly creating Processing code examples.
