The Interactive & Immersive HQ

Creating a Stunning TouchDesigner Display Background: A Quick Project

Something I get asked a lot as a TouchDesigner developer is how to make quick and easy content. A lot of times I see people overcomplicate it, and ignore the pre-built tools that are available.

Today, I’ll show you some ways that you can make easy and simple display background content in TouchDesigner. These methods are great for a lower budget event or installation that you’re working on, where you need to throw something together quickly.

If you’re not familiar with TouchDesigner, we’d recommend starting with our Beginner TouchDesigner tutorial.

Here’s a video version of this display background tutorial if you’d rather follow along there:

The Power of Noise TOPs

TouchDesigner Noise TOPs create different noise patterns, like perlin, simplex, sparse, alligator, and random. Some are calculated by the CPU, while others are done by the GPU.

If you have any confusion on TOP operators, refer back to our tutorial lesson on this operator family.

This TOP operator is very flexible. It can be used as an easy shortcut to generate abstract animations, and it has many parameters that you can play around with.

Period and Monochrome

Go to the noise page in the parameter window of the operator to access the period parameter. Period is the approximate gap between peaks within a noise cycle, and is quantified in units.

The first action I would recommend is turn up the period because when you turn it down, you basically get static. Increase the parameter until you feel like there’s enough happening on the screen.

Then turn the monochrome parameter off to add some colour.

Animation and Effects with Noise

Go to the transform page of the parameter window to give it animation.

One of the quick and easy tricks is to click on the TZ box of the drop down on the translate parameter and type in the Python expression “absTime.seconds”. You’ll get an animation that’s a bit crazy looking, but we can use math to slow it down.

If we multiply it by a number less than 1, the animation slows down as you watch it. After the Python expression, type “*0.6” or “*0.3” or “*0.1”, depending how much you want to slow it down.

Play around with the other values under the noise page to get other animations and effects. I’d recommend using offset, amplitude, and harmonic gain.

The TOP operator for Noise makes it so easy to come to TouchDesigner, drop the operator inside your network, and create an easy, beautiful display background.

touchdesigner display background

Resolution and Processing Efficiency

A common mistake when generating noise and complex patterns, is users will go to the common parameter page of the operator, change the resolution to 1920 by 1080, and then wonder why their system’s running so slow.

As you turn up the resolution, it takes up a lot of GPU cook time.

Resolution TOP Operator

In my experience, it’s best to keep your resolution at 512 by 512, and then create a Resolution TOP operator, and connect your nodes together.

Select “custom” as the output resolution, then set this resolution to 1920 by 1080. Then change the output aspect to “resolution”, so it calculates the aspect ratio based on whatever custom resolution you give it.

Get Our 7 Core TouchDesigner Templates, FREE

We’re making our 7 core project file templates available – for free.

These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.

They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.

Enhancing Beeple Clips with Effects

If you’re trying to do the best display you can on a shoestring budget, a great free resource is Beeple clips.

You can insert these video clips right into your network, and then use the palette browser to edit things like the colours, the pattern, and the motion.

There’s a lot of cool effects under the ImageFilters section, including pixelate COMP. You can drag this in and plug it into your Beeple clip to make really quick pixelated effects, and turn up the pixel sizes if you want.

There is also pointillize, which is similar to pixelate, but it works with circles. Feedback edge and pixel relocator are two others that are also fun to add.

By using a Beeple video clip and feeding through some effects, you can get a display that looks like it’s custom created.

touchdesigner display background

What you’ll notice with some of these effects is when you plug them in, your system performance immediately tanks.

A good practice is to add in a Resolution TOP and plug your source into it. When you do this, turn on the high-quality resize, set the output resolution to half resolution, then connect your effect, and you should be holding a much better frame rate on your computer.

Wrap Up

I hope you’ve gained some valuable insights from this article. In this tutorial, I highlighted some great, free ways that myself and other pros use to make simple TouchDesigner display background content.

You can use Noise TOP, pull stock footage, or Beeple’s content for nice colours and patterns, and use these to generate interesting compositions with all kinds of different effects and features.