How to Export an Image from TouchDesigner

While a lot of work happens in real-time, it’s not uncommon that during the design process you’ll want to export an image from your TouchDesigner project. These could be for a client review or they could be for internal documentation. Either way, there’s a few useful tricks you can keep in your back pocket!

First Way to Export an Image from TouchDesigner: Movie File Out TOP

The first way that everyone should learn to export content out of TouchDesigner is using the Movie File Out TOP. It’s incredibly feature-rich and easy to use. It supports lots of formats and can generally be easily controlled by user interface components. So how do you export stills out of the Movie File Out TOP? First let’s setup our content and plug it into a Movie File Out TOP:

The next thing we’ll want to do is change the Type parameter to Image:

Now the tough part: choosing our file format. Without getting too in-the-weeds with all the file formats, here’s my go-to picks for formats:

• JPEG – smallest file size, no alpha, easy to use everywhere, heavy compression though so only good for “images” and not “data”
• PNG – slightly larger file size than JPEG, supports alpha, easy to use everywhere, less compression artifacts than JPEG since it’s “lossless”, can support up to 16-bit textures
• OpenEXR – larger file sizes, supports alpha, can support up to 32-bit textures, supports alpha, ideal for “data” textures like saving point cloud textures

There are more image formats than just those, but 90% of the time I’m falling into one of those three categories. In this case I’ll set mine to PNG as that’s what I normally default towards.

The final thing to do now is give the file a name. By default you’ll see there’s an expression in the name. This expression essentially saves the files into the same folder as your project and if you haven’t saved your project yet, it’ll save the images to the desktop. It also adds a number at the end that corresponds to the value in the N slider. This could be useful if you feel like scripting the N slider to accumulate as your save subsequent images, but in most cases I don’t find this particularly useful, so I’m going to go ahead and rename the files and save them in a dedicated folder of my own:

Here I chose to save it into a folder called image_outputs inside of the project folder, and I named the file image_1.png. From here, all we have to do is toggle the Record button on and off or alternatively you can pulse the Add Frame pulse button. Either will work in this case. That’s it! Easy exports, but we’re not done yet…

Export an Image from TouchDesigner: Important Points

Two important things to remember here:

1. Hitting Record or Add Frame will overwrite an existing image file if there is one with the same name. So be careful and change the name of the file before exporting another image.
2. The Movie File Out TOP doesn’t dynamically update its viewer when it is not recording so often the Movie File Out TOP will either look black like that or will hold the last frame that it captured. That’s normal!

Let’s do it faster!

So you’ve got the proper tried and true exporting method using Movie File Out TOP, but what if you just want a quick PNG or image of a random node in the network? Do we always have to create a Movie File Out TOP? Nope! There’s an extremely handy shortcut that I use all the time. All you have to do is right click on any TOP in your network, click Save Image… and then you’ll get a file saving dialogue! That’s it! Few clicks, no extra nodes, very convenient, very fast. The process looks something like this:

In this method, you’ll still have access to all the same features and you’ll be able to choose your file type in the file saving dialogue with the Save as type dropdown. Quick and easy!

What about scripting?

What about if you’re using Python and want to script image saving? Also very easy. Derivative have wisely built a simple method that can be called on any TOP that allows you to save out an image of it. All you have to do is target the operator and then use the save() method. This can look like this:

op(‘null1’).save(‘image_outputs/image1.png’)

This line essentially does the same thing as our right click method and our Movie File Out TOP method. It goes into the folder image_outputs and creates a PNG file named image1. You can easily change the file format by changing the extension in your script. If you wanted OpenEXR you could change this to:

op(‘null1’).save(‘image_outputs/image1.exr’)

There are some optional flags you can use for more advanced use cases and you can find those in the documentation below:

https://docs.derivative.ca/TOP_Class#Methods

Wrap up

Whether you’re new to TouchDesigner or an experienced veteran, saving image files (or gifs) is something you’ll do through your whole career. Likely you’ve used one or two of the methods above, but I’m always surprised that even experienced devs haven’t used one of the methods above (usually the right click menu option is a surprise!). Hopefully this gives you lots of flexibility in how you can save images in your projects!