Welcome back to another TouchDesigner tutorial. Today, I’m going to show you how to make trails and RGB trails inside of TouchDesigner using Cache TOP.
If you need a refresher on TOPs first, check out our tutorial lesson on the TOPs operator family.
Feedback is another common way to make trails, however I find that method ends up being more effort than it’s worth. Using a Cache TOP and Cache Select TOP to create trails will get you much better, crisper results than using Feedback.
Setting Up A Project
To start, we’re going to build a quick, sample project.
Grab a Movie File In TOP as your source. We’ll start with the banana, and have the banana move back and forth on the screen and rotate.
Create a Transform TOP after that, and then an LFO CHOP. Put a Null CHOP after the LFO, and then reference that value onto the translate parameter of the Transform.
At this point, the banana is moving very quickly, so turn down the frequency of the LFO to 0.35. We also have to change the length of the range because right now it’s going off-screen a lot.
Insert a Math CHOP in between the LFO and Null, and change the “from range” to be -1 to 1 and the “to range” to be from -0.5 to 0.5.
The final thing we’ll do is add a bit of rotation for fun. Click on the drop down of the rotate parameter of the Transform TOP, and type in “absTime.frame”. As your absolute frame counter increases, it progressively rotates that banana more and more.
Using Cache TOP for Trail Effects
Cache TOP is really great and simple for trails. We’re going to create a Cache with lots of frames, pick out different ones, give each one of them a different length of delay and composite them together.
Cache TOP
Create a Cache TOP and plug your Transform into it.
An important note is to try to keep your cache size as small as possible because it uses up a lot of GPU memory (especially if you’re working with a higher resolution). The cache size parameter is how many frames we’re holding inside of the TOP (current frame number is 32), and the output index parameter is which frame we’re outputting.
You can think of your cache size as your total, and the output index as a negative number that reads backward into the Cache. In our sample project, because the cache size is 32, our output index will have a number range from 0 to negative 32.
In most cases, I recommend leaving the output index at zero and using another operator called a Cache Select TOP.
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.
Cache Select TOP
The Cache Select TOP functions like a Select TOP or a Select CHOP, in that it’s referencing data already inside the GPU memory.
If we use it in conjunction with the Cache TOP, we can select more than one point from the same Cache buffer. The cook times for the Cache Select are very low, and it takes zero megabytes of GPU memory because it’s not creating or assigning a texture itself, it’s pulling from the existing Cache TOP’s memory.
Create seven Cache Selects after your Cache TOP, and now we need to take each one of these Cache Selects and offset them through the Cache buffer.
Keep the cache index parameter at 0 for the first Cache Select. For the second one, change the cache index to -5 (so it’s now five frames behind the original). Set the next one to -10, and then the others to -15, -20, -25, and -30. Now we have this fun wave effect going on because they’re all slightly offset from each other.
Creating Our Trails
To construct this into a trail the quickest and easiest way, make a Composite TOP, and set the operation parameter to “Over”. Right-click and drag all the Cache Select operators and plug them into the Composite TOP, and then you’ve got yourself a cool-looking trail on the screen.
Simplifying Frame Offset with Python
If you start to do this more often, it becomes annoying to have to go to each one of Cache Selects to offset the frame index, so a helpful shortcut is to use some Python.
To try this out, go ahead and reset by deleting all of your Cache Selects except the first one, disconnect this first one from your Composite, and plug the Cache TOP into the Composite instead.
Click the drop down on the cache index parameter of your Cache Select, and type in “me.digits * -5”. We have to multiply it by -5 because the index for selecting out of a Cache goes in the negative direction, not in the positive direction.
Next, start copy and pasting the Cache Select, and you’ll see each one automatically keep scaling. Once it gets past that default 32 cache size, all the frame points are the same. To change this, go to your Cache TOP, set the cache size to 60, and now all of the selects are unique. Right-click and drag to select all of them, plug them into the Composite, and you’ve got yourself a trippy little banana situation now.
Trail Effects Without an Alpha
If you want to do these trails but you don’t have a nicely keyed-out image with an alpha background, then this is where the Reorder TOP comes in, and being able to layer the RGB channels.
For this example, create another Movie File In TOP, and use the “Count” TouchDesigner stock video. Add in a Cache TOP after it, and make the cache size 20 frames.
Then grab a Cache Select, and because we want to create an RGB trail, we need three sets of textures. Add two more Selects, keep the first at a cache index of 0 (red channel), have the second one be at -10 (green channel), and the third one -20 (blue channel).
Reorder TOP
To combine the RGB channels in a fun way, we can use a Reorder TOP. This is a unique operator that allows you to remap different channels from different textures into one single RGBA texture.
Take your first texture (the red, real-time one), and plug it into the first input of the Reorder TOP. Then, grab the output of your second texture, plug it into the second input and change the “output green” parameter to input 2. Do the same for the third texture and third input, and change the “output blue” to input 3. You should now have a cool RGB delay effect.
This RGB method allows you to create trail effects even without a keyed-out material, and is useful for sources like a live webcam or camera feed.
Wrap Up
I hope this tutorial provides you with interesting ways to make trails inside of TouchDesigner. If you enjoyed this tutorial and end up creating some neat projects, post them on Facebook or Instagram and tag us @interactiveimmersivehq, we’d love to see what you come up with!
TouchDesigner has an endless number of features to choose from that you can control however you want; it’s a super customizable, powerful and unique program.
For an in-depth look at all the basics of TouchDesigner, refer back to our TouchDesigner Beginner Series of Tutorials.
