The Interactive & Immersive HQ
TouchDesigner Tutorial: Signal Flow
TouchDesigner Tutorial 5: Signal Flow
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
Next let’s look at TouchDesigner signal flow.
As we can see, even from the very introductory template that comes with TouchDesigner, there’s already a bunch of operators and a bunch of wires that connect them together.
Wiring Operators
Wiring operators is the most basic operation in TouchDesigner. All projects are made up of nothing more than groups of operators wired together.
Each operator, on its own, does a very specific thing, and when they are combined together into a network, they can solve extremely complex problems.
Remember: Left to Right!
There’s a few different things that we want to learn about signal flow and operator wiring, with the first being that all data travels from left to right inside of our networks, and this is important to remember.
Any inputs that an operator has will always be on the left side, and outputs will be on the right side.
Let’s dive in even further…
Connecting & Disconnecting Operators
Let’s say you were to go to the OP create dialogue and create a Movie File In operator, and then an Edge TOP. If you want to connect these two together, you would go to the output of the Movie File In.
Connecting Operators: Option 1
There are two things you can do here to connect this to the Edge operator. The first, is simply click, hold down your mouse, drag it over to the input and what you’ll see as you get close to the input, is it becomes kind of sticky. It knows that you probably want to connect these two things together, and once you’re within that range, you’ll see that it’s trying to complete it.
Then all you have to do is let go of your left click, and now that Movie File In operator is feeding into the Edge operator.
Disconnecting Operators: Option 1
But what if you wanted to disconnect this and rewire it a different way? What you can do is hover your mouse over the wire (and you’ll see it becomes yellow when it’s hovered). Then you can right click on it and hit Disconnect.
Connecting Operators: Option 2
The second way that you can connect operators, which I usually find a little bit easier, is that if you just click and release the mouse on the output, you essentially have the same functionality as before except you don’t have to hold the mouse down.
In some cases, you may have to take the operator a long distance, or maybe you’re on a laptop, where physically clicking, holding, and dragging is a little bit difficult.
I usually prefer this second method, where you do a single click to grab the output wire, and then you go to where you want to connect it, click again, and you get that connection made.
Disconnecting Operators: Option 2
Another way of disconnecting (which I also find a little bit easier than the right click and disconnect method), is that if you go to the input of an operator and you hover over it, then click and drag your mouse away and release over the blank area of the network, it’ll disconnect whatever the last thing connected was.
Again, Left to Right!
So, these are a few interesting ways of connecting and disconnecting operators, but the really important thing you want to remember with signal flow is that everything flows from left to right. Data is moving from left to right. It doesn’t go back up the chain from right to left. It’s always from left to right.
Signal Flow Cooking
Now, one more thing that you’ll want to know about signal flow is the idea of cooking. We’ll talk about this in more detail later in other lessons when it becomes really critical but right now, we have this image and all these different operators, and you can see the wires themselves are just still, they’re not animated or doing anything funny. That’s because nothing in any of this data that I’m sending through the chain of operators is changing.
This is in contrast to if I come back to the default template (see gif below), you can see that there are other wires, which have this little pattern animating through them, they’ll look a little bit darker and a little bit lighter. That means that there’s something dynamic happening.
Some kind of output data is changing, whether you’re playing a movie file and reading the next frame and displaying it, or in this case, there’s some noise data that’s being used to create this live displacement effect:
These kind of connections and wires are all animated which means they’re cooking. A cook is basically every time that an operator has to update its input or output data and display that to the rest of the network.
It’s important to start to become aware of which operators are cooking, which ones aren’t, and should those wires be animated? Are you expecting something dynamic to be happening or not? And again, the key is that all data flows from left to right.
Wrap Up
So that’s how to connect and disconnect operators, as well as an introduction to signal flow cooking. Always remember, when you’re starting to think about networks, you always want to be thinking left to right, the data does not flow top to bottom. You should always structure your work and your thought process from left to right.
Next in our TouchDesigner Beginner series: some important notes about hotkeys!
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!