Processing-Tutorial: Video Export

One of the most powerful features of Processing in comparison to all web-based approaches and frameworks (like p5.js) is the ability to export your sketches to any format you can imagine. Processing does not provide all of these options out of the box, but there are excellent libraries for any use case.

Since i use instagram to distribute my work, i’ve developed an optimized, slick workflow to export videos and i wanna share it with you today.


Let’s get started!

There are multiple ways to export a video from your sketch in Processing and i’ve tried them all. The most easy and intuitive one is utilizing a Processing-library called Video Export by Abe Pazos.

Before we can use that library in Processing, we have to install something called “FFMPEG” on our computer, which is a powerful software for video-conversion that can be used via the command-line. It is made for programmers and programmers install things a bit differently than “normal” people.

Please do me little favor and promise that you won’t stop working through this tutorial from now. The things we’ll do together in the next steps may look a bit overwhelming for you, but they are simply required. In the end you’ll don’t have to worry about them anymore. Let’s take a deep breath and get going.


Installing FFMPEG on a mac

1. Open up the Terminal

The Terminal is an utility-application of MacOSX that enables us to install the software we need. It can be found in the applications-folder inside “utilities”.

1. Install HomeBrew

Copy this code into the command-line of the terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

The script will install “HomeBrew”, which is a so called “package manager”. It enables us to install software via the Terminal easily.

If you are logged in as an admin, the script will ask you for your password. If you are not logged in as an admin in MacOSX, you’ll have to write the command above with a “sudo” in front.

sudo /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Put it in there and hit enter. The script will run a few seconds.

2. Install FFMPEG

Then, put this code into the Terminal and hit enter:

brew install ffmpeg

Again: If you’re not logged in as an admin, you’ll have to put the “sudo” command in front and then type your username and your password.

sudo brew install ffmpeg

Hopefully everything works fine and we can go to the next section to install the actual library.


Installing FFMPEG on Windows 10 (by Hanna Donker)

I don’t have a Windows PC, but fortunately Hanna Donker has written detailed instructions for installing FFMPEG on Windows. Many thanks Hanna!

Download FFMPEG from here:
https://ffmpeg.org/download.html#build-windows

Click on ‘Windows builds from gyan.dev’
https://www.gyan.dev/ffmpeg/builds/

Download the ‘ffmpeg-git-full.zip’ 
https://www.gyan.dev/ffmpeg/builds/ffmpeg-git-full.zip

FFmpeg doesn’t need installing on Windows, but the folder does need to be added to PATH (it needs to be able to be ‘called’).

1. Choose a location for FFMPEG to be saved. C:\ is a good place as you’re not likely to delete or move it. Unzip the folder.

2. Then click Start -> type in Control Panel -> System -> Advanced System Settings

3. Click on Environmental Variables

4. Double click ‘Path’ in the System variables table – it will open a new window (‘Edit environment variable’).

5. Click New and put ‘C:\FFmpeg\bin’.

6. Confirm that that folder is okay by going to C:\FFmpeg\bin – you should see these three files there: 

7. Click OK, OK, and close the Control Panel

8. Open cmd (command prompt) and type ‘ffmpeg’  – it should come up with a list of optional commands. This means that command prompt recognises ffmpeg, and any script that it calls should work.


Installing the VideoExport-library

In Processing, go to the menu “sketch > import Library > Add Library”. The so called “contribution-manager” will open up. Click “Video Export” and then click “Install”. That’s it!


Using the VideoExport-library

Now you are ready to use the VideoExport-library in Processing. All you have to do is adding a few required extra-lines of code to your sketches.

// import the library
import com.hamoid.*;

// create a new VideoExport-object
VideoExport videoExport;

void setup() {
  ...
  // Some settings
  videoExport = new VideoExport(this, "myVideo.mp4");
  videoExport.setFrameRate(30);  
  videoExport.startMovie();
}
void draw() {
  ...
  // Save a frame!
  videoExport.saveFrame();
}

void keyPressed() {
  if (key == 'q') {
    videoExport.endMovie();
    exit();
  }
}                                                                                   

The options can be looked up in the library-folder:

your-processing-folder/libraries/VideoExport/examples/options/options.pde

Now get creative and make something awesome!


Update!

Here’s a super handy code-snippet that you can copy and paste into your Processing Sketch. I would recommend to put this in a tab called “rec”. If you then put the rec-function into the end of your draw-loop, the recording should work.

sketch.pde

void draw(){
// your code
rec();
}

rec.pde

final String sketchname = getClass().getName();

import com.hamoid.*;
VideoExport videoExport;

void rec() {
  if (frameCount == 1) {
    videoExport = new VideoExport(this, "../"+sketchname+".mp4");
    videoExport.setFrameRate(30);  
    videoExport.startMovie();
  }
  videoExport.saveFrame();
}

Published by Tim on Sunday April 14, 2019

Last modified on November 3rd, 2020 at 7:50


Related

25. September 2020

Processing-Tutorial – Programming Posters

Some of you have asked for it, so here it is: A raw and uncut tutorial in which I explain […]

4. September 2020

Bauhaus 101 – A beginners Processing Tutorial

Hi and welcome to this very condensed and quick tutorial that aims to get you amazed for Creative Coding in […]

20. August 2020

How to use p5.js with Visual Studio Code

In this short tutorial i explain how you can use p5.js with Visual Studio Code. For this purpose, i’ll use […]

27. July 2020

The Magic Triangle

The Magic Triangle is a powerful creativity technique that can be applied to many different areas.

20. March 2020

Processing-Tutorial: Rasterize 3D

In this tutorial I show you how to create abstract 3D portraits from any image file. Here you will learn […]

6. December 2019

Processing-Tutorial: Image-Rasterizer

Level: Beginner & intermediate In this tutorial i’ll guide you through all the necessary steps to rasterize an image with […]

4. November 2019

Processing-Tutorial: WAVES pt. 1

This is the first part of a brand new tutorial-series about Waves, a fundamental skill and feature in Generative Design […]

16. April 2019

Processing-Tutorial: Kinetic Typography 1

In the last years i’ve observed a new tendency in typography and graphic design which has been made possible by […]

1. March 2019

How to rasterize an image with Processing

In this post i’ll teach you how to access the data of an image and how to use it to […]