The Interactive & Immersive HQ
TouchDesigner Tutorial: TOP Operators
TouchDesigner Tutorial 10: TOP Operators (TOPs)
Join The HQ PRO 7-Day Free Trial!
Join The Interactive & Immersive HQ PRO and get over 200 hours of TouchDesigner training, 100+ custom-built tools and project files, and access to a private community where Matthew Ragan and Elburz Sorkhabi answer your questions daily.
TouchDesigner Beginner Course Content
TouchDesigner TOPs Tutorial Table of Contents
Add a header to begin generating the table of contents
Now that we’ve learned some of the basic fundamentals of TouchDesigner together, we’re going to start building a few things using this interactive technology.
We’re going to start with one operator family at a time and incrementally add complexity to get you more comfortable with each one.
TOPs (Texture Operators)
The first family we’re going to discuss are TOPs. Remember, TOPs are texture operators and they’ll probably be the basis of many of your projects.
Our TOPs Example
In our example we’re going to put together a really simple compositing network using generative text and images that we’re going to load in.
Then we’re going to composite them and make a pseudo simple small infographic display. This will show you some of the fundamentals of building networks.
Create Movie File In TOPs
So, the first thing we’re going to do is create three Movie File In TOPs (from the OP create dialogue).
Then, go to the File parameter of each one and click the plus button to get the file picker. We’re going to use some of the stock content inside of TouchDesigner. For this example, select the three images of butterflies.
Grab the first butterfly in your first Movie File In, then go to your second Movie File In, same process but grab the second one. And finally in the third Movie File In, grab the final butterfly.
Creating Text
What we’re going to do next is start making some text. Open the OP create dialogue, grab a Text TOP (and remember, you can do that even faster by hitting tab, typing text, hitting enter).
Create three of those as well, and move them so there is one underneath each of the butterflies.
The Text TOP has a ton of features and functionality but we’re going to keep it simple for now.
On the Text parameters page, go to the text parameter itself, double click and delete “Derivative” from in there. Then type in “butterfly 1”. The default resolution of this Text TOP is 256 by 256, which is not really conducive for our simple words.
Changing the Resolution
With TOPs, if you want to change the resolution of the generator, go to the Common page in the parameters and you’ll see the resolution is available to be changed.
There’s two things you can do here. Either, you know what the resolution needs to be, and then you can type it in.
Or if you don’t know, you can go back to using the value ladder.
Middle click on the Y resolution parameter, and you can move and scrub through different resolutions on the Y axis until you find what is most suitable (and the same with the X axis).
For this example, we’re going to use the resolution 512×100. Change your other two texts to be “butterfly 2” and “butterfly 3”, and change the resolution of those to 512×100 as well.
Changing the Text Colour
To change the colour of all of our texts to something else, a really useful thing you can do is grab multiple operators in your selection and change the parameter of one of them and have that applied to all of them (if they’re the same kind of operator).
In our example case, because we have three Text TOPs, start with one of them, hold shift and then click on the other two. Then you’ll see they have a yellow border, and the main Text TOP has the green border.
Then go to the Colour page on the parameters and instead of a white font, you can either change the RGB values individually or use the colour picker gadget.
Click red, and it’ll put in a one for the red channel and zero and zero for green and blue, and it will do this for all of them. This is a really helpful trick that you can use when working on your networks.
Compositing to a Bigger Canvas
Now we can start compositing and adding these things to a bigger canvas.
In my experience, the best way to start with this is to work at the smallest resolution you can work. Then at the end of the workflow, composite everything onto your big canvas.
If your big canvas is going to be a 1920 by 1080 screen, you don’t want to go straight from the butterfly onto a 1080, then your text onto a 1080, etc., you should group them into smaller chunks and then composite all those chunks on 1080p canvas. The way we do this is using another useful operator called a constant TOP.
Constant TOP
A constant TOP is essentially a TOP that gives you a colour and a resolution.
Often you might use this just as a colour but it’s actually very useful in compositing because you can make little canvases and then composite your elements onto them.
Creating a Constant TOP
We have 512 by 512 butterfly and 512 by 100 texts, so what you want is a 512 by 612 canvas per butterfly-text combination. We got the 612 by adding the Y of the butterfly with the Y of the text.
So create a Constant TOP, then go to Common parameters page of it, and change the resolution to 512 by 612.
We also don’t want it to have a white background, so go to Constant parameters, zero out all of the channels so it’s black but then also zero out the alpha. This will mean that it’s not only black but it’s also nothing, so that if later there’s more advanced compositing happening we don’t have to worry about having black boxes appear inside of our canvas.
Starting to Composite
So now that we have that we can start compositing and there’s a number of different ways we can do this. The first way is going to be using an Over TOP.
Over TOP
Over TOP is great for things like this that are simple where you want to put one thing over another and do that as quickly and as easily as possible.
You’ll see that Over has two inputs, and it takes the first input and puts it over the second input.
In this case, we want to have the canvas as the second input because that’s going to be the base layer, and then we want to put the butterfly on top of it.
Fixed Layer Parameter
When you do that, one thing you’re going notice first 512 by 612 resolution is taken by the Over. That’s because our fixed layer parameter inside the Over TOP is set to input two.
This fixed layer parameter only allows you to choose between input one and two. Essentially, it tells the operator which of the inputs to take the resolution from (which is going be the base layer that doesn’t move). And then all the other parameters affect the other layer that isn’t the fixed layer.
In this case, we actually want the fixed layer to be two which is the default. That way it takes the resolution from our canvas.
Pre-Fit Overlay
But then you’ll see that our butterfly is getting stretched because by default, the pre-fit overlay is set to fill. The pre-fit overlay gives you a bunch of options for how to take the first input that’s getting over onto the second input, and if there are different resolutions what to do about that discrepancy.
Since the default we have is fill, it takes your 512 by 512 and actually stretches it to 512 by 612. Change the pre-fit overlay to native resolution, because we don’t want our butterfly to be stretched.
Justify Parameters
We have a couple of different options here for how we want to justify that texture onto the bigger background. Right now by default it’s going to be centre and centre on the X and Y.
Go to the justify vertical parameter and set it to top. This will keep it at its native resolution but line it up with the top edge, so we’ll have room underneath to composite the text.
Compositing Our Text Over Our Butterfly
Now we have a butterfly on our background, and we want to take this texture and composite our text over it.
To do this, make another Over TOP, connect your first Over TOP as the second input (because this is going to be the base layer that the text is going to go on top of), then grab the output of your butterfly text and connect it to the top layer.
You’ll see the default in this case is the same where it stretches our text terribly to try and fill it for us.
First, make sure the fixed layer parameter is set in to input two, then set the pre-fit overlay to native resolution. This time, instead of justifying to the top or centre, we’re going to justify vertically to the bottom. But when we do this, it goes a little too close to the bottom, in my opinion.
Translate Parameters
The translate parameters are very helpful here to take the text that is justified to the bottom and then offset it up a bit.
Go to the little F that’s to the right of the translate parameter, and set this to pixels, to make the units in pixels (instead of fractions).
To bump the text upwards by 25 pixels, go to the translate Y parameter, and type 25.
That’s basically our first unit of butterfly. We want to do the same thing with our second and third units. You probably don’t want to be doing this manually all the time, so you can copy and paste it really easily. Right click and drag, highlight both of the Overs that we want to copy, press Ctrl + C, then Ctrl + V, and we get a copy. Don’t be afraid of the mess of wires that appears, we’ll fix that.
Overwrite Wires
We’ve already covered wiring and disconnecting wires, but you can also overwrite wires very easily. For example in the new Over that we copied, we want the second butterfly with that same canvas texture. So the canvas texture is okay, we don’t need to change anything about it but we want the butterfly to be plugged in.
What you can do is either grab the output of the butterfly, connect it to the input of the Over, and that will overwrite it.
Or something useful that we can do is click on the output of the text and move your mouse so that it highlights the wire that we want to overwrite. Click on this while it’s highlighted and that overwrites wherever that wire was going with the wire that we’ve selected.
Those two ways are really easy ways to override paths, especially if you’re doing things like copying and pasting. Do the same process again for the third butterfly and text combination.
So we have our three groups now and we want to place them on a 1920 by 1080 canvas to get it ready for our final output.
Getting Ready for our Final Output
We’ll follow a process very similar to what we just did. Create Constant TOP, then go to the Common parameters tab and set the resolution to 1920 by 1080.
Then go to the Constant parameters page, turn off the alpha and set the colour to zero, zero, zero (so that it’s black).
Now what we can do is use a different composite method which is using a Composite TOP.
Composite TOP
Open the OP Create Dialogue and create a Composite TOP.
With Over TOP, it only has two inputs; whatever you want to over onto the background that you want to over it on.
But Composite TOP has a different looking input. If you compare it to the Constant, Composite has a thicker inlet than other operators. And this is called a multi-input which means that you can just keep connecting as many different things as you want into this one input.
Using Composite TOP
Take your Constant, plug it into the Composite. Then take your Over two (which is our first unit of butterfly plus text), and plug that into the Composite. And then what you’re going to see is nothing (a black box inside the Composite TOP) because the default operation parameter is multiply.
Go to the operation parameter of the Composite TOP and change it and you’ll see a ton of different options, including filters, colour dodge, darker colours, exclude, frees, adds, etc.
For our example, select over as the operation parameter.
Back to the Resolution
There’s one thing we have to be careful of right now because you’ll see that the resolution of the Composite TOP is 512 by 612, which is not what we want because we want the Over TOP 512 by 612 to be on top of the Constant TOP 1920 by 1080.
Go to the Composite and there’s two options.
We can either go to the transform page and change the fixed layer to be fixed layer one. If you do that what you’ll now see is that the Composite is now 1920 by 1080, and by default the pre-fit overlay is fill, so it’s stretching our butterfly to fill it.
However, what I would recommend is to keep the wiring representative of what’s happening.
Go to any of the pages of the Composite parameters and at the bottom you’ll see this little area that says input OP, where it has all the names of the inputs. In our case we can see Constant two is the first thing that gets plugged in, and Over two is the second thing that gets plugged in.
You can either click the red X’s on the right, or we can use the blue arrows on the left to rearrange them.
If you click the arrow beside over2, what you’ll see is they’ve now switched, this is now the first input. And constant two is now the second input which I think is a cleaner way of working.
Go back to the composite parameters, go to the transform page, and you have very similar options that we did with the over. Change the pre-fit overlay to native resolution.
Fitting All Three Butterflies Together
What we want to do is move this butterfly over to the left and then put the second butterfly in the middle and then move the third butterfly to the right.
Middle click and drag on the translate parameter, (go by 0.1), and keep going until it’s at 0.3 in the negative direction on the X.
Now, make another Composite TOP. It’s going to be the second butterfly unit, so plug that in over the result of my previous composite.
Again, change the operation parameter to over, then go to the transform page, and set the pre-fit overlay to native resolution, and keep this butterfly + text in the centre.
Finally, make one more Composite TOP. And this is going to be our third butterfly over’d onto our canvas that we’ve built with two butterflies. Again, change multiply to over, and change the pre-fit to native resolution. With this third butterfly, we want it to be on the right hand side, so change the translate X parameter to 0.3.
So with even just doing these simple things, you’re starting to understand the workflow of compositing, working with some parameters, using the value ladder in real life, and then at the end of the day we get to this nice little 1920 by 1080 canvas with a couple of butterflies and a bit of text.
Null Operators as Checkpoints
Now there’s two more things that we should talk about when working with TouchDesigner networks.
The first is that you always (always, always!) want to put a Null operator after you’ve reached a checkpoint in your network. And the checkpoint can be as big or as small as you like.
We could have been putting nulls after each one of the butterflies but in this case we’re just going to put a null at the end.
The Null operators (every family has one not just TOPs) don’t do anything but they serve as very useful checkpoints once you start making more and more complicated projects,
We want to have the ability to go and insert operators into the chain without having to redo a bunch of references and scripting and code. And the only way that’s possible is to have things referencing your nulls, because those are the checkpoints.
The Null operators are extremely important in preventing refactoring, which is what programmers call it when they have to go through and change a bunch of the infrastructure of the code for really no reason at all other than name changes and restructuring things.
A Quick TOPs Trick
The final thing we’re going to look at with this is a quick little trick with TOPs.
You’ll see we have this little blue ball at the bottom of the operators, and these are flags. Each family has a different set of flags.
TOPs have something called the display flag and you’ll see by default it’s off. When you turn it on though, it sets the texture that’s inside of this operator to be the background of your network.
The nice thing is you can do this with as many operators as you want and it keeps dynamically arranging them and placing them as the background.
Wrap Up
This should be a nice and easy introduction to our first operator family, TOPs, and help you get started with interactive art.
From here, we’re going to keep building and take a look at the next operator family: CHOPs.
About The Author
Elburz Sorkhabi
I possess a deep knowledge in many professional fields from creative arts, technology development, to business strategy, having created solutions for Google, IBM, Armani, and more. I'm the co-founder of The Interactive & Immersive HQ. Yo!