In this video Scott Pagano guides you through the interface of TouchDesigner. This tutorial gives a solid overview of the TouchDesigner UI, illustrating how to navigate around and use the software.
- [Instructor] We're going to focus on the TouchDesigner interface in this video, and just getting acclimated and accustomed to sort of how everything is laid out, how to move around, what windows are where, and just some basic view-based stuff. So, first off, we have our main canvas work area you can see here with the grid, and the node network that's set up here is the default one that comes with Touch, when you just make a new scene file at this point. On the left here, we have a palette, that shows a bunch of different defaults and template projects and examples that Derivative has provided.
And for now, we're just going to close that out, 'cause we don't need to see that. Over to the right, you can see that we are focused on this movie file in node, and there's a bunch of parameters here. And if I hit the P key, that opens and closes. So that's something you're often doing, let's say you want some more screen real estate for a minute to focus, and then, you wanted to see your parameters, so you open that up. To navigate around the window is really straightforward. I have my left mouse button clicked down, and I'm panning around. I can use my mouse wheel to zoom in and out. And there we go. So this is great, 'cause I can really get in close on something, like these tasty jelly beans, if we need, or we can zoom out.
And now, the way TouchDesigner projects are set up is that you're basically in an encapsulated world of containers. If I hit the U key right now, you can see that we're going to go up a level, and this is the top level, and we can see that because here, we just have this slash right here. We're at the root of our project. And this is the same sort of nomenclature and syntax as if you'd be in a file directory on a computer. So if I click on my project1 here, and I hit the I key to go inside it, you can see, now, we're back to where we were, and you can see that now we're in /project1/.
Again, hit the U key to go out, and the I key to go in. We can also use the mouse wheel to do this. If I zoom out on my mouse wheel enough, then we get outside, and if I'm focused over this project1 and I zoom in, we go inside. So it's a really just fluid way to move in and out of objects and containers within TouchDesigner. And as you're building projects and you want to really encapsulate things and keep things organized and neat and controlled, this is just a great way to move around without having any one network be too chaotic. And we can have everything containered out like this.
All right, so, let's go back inside this project1, and let's look at some nodes here. Again, these are just some very basic nodes, these are some tops, this is bringing a movie file in, which brings in an image file or a still image. And you can also see that there's a bunch of little icons around the edge of all these nodes, and some of those are a little different on different nodes. If I click this one right here, this arrow that bypasses the node, you can see that goes away. If I click this lock right here, you can see, then, that that locks the node. If I want to unlock it, it asks me to unlock it.
And so that can be good if you want to make sure that something doesn't change by accident. This top node here toggles the display between the actual display of what's in there, and then just the name of the node. This can be helpful, 'cause if you have a lot of things going on in your network, and you want to be able to see everything, sometimes the performance can actually drop down a lot, 'cause all these nodes have to do work to display things. So, often, you'll turn off the display on certain nodes just to free up the performance. Or it can also just be a style issue, if you just kind of want it to be clean and text-based and you don't need to see what's inside.
This final icon that we haven't discussed yet, called Clone Immune, you can see, it turns this little lightning bolt on and off. This has to do with some slightly more complex stuff with cloning nodes and systems, and we're not going to get into that quite yet. But just so you know what it is. And then, over here, you can see we have this viewer active plus sign on the lower right corner. If I click on that, you can see that the node changes and those little icons go away, and now, I could actually zoom in and out of this image. This allows me, both with images and geometry, to actually use this as a little interactive viewer.
And it doesn't change what's coming out of the node. It just changes how we're viewing what's inside the node. And I'm going to hit the H key to home that view back, and I'm going to close that up. And you can see that we're already in that mode by default, in this particular scene with the geo1 node. If I just move my mouse around, I'm actually in a live 3D scene tumbling with this cube. If I click this button, and then we go back to our geometry node, and if I move this around, we're actually moving the node and not the geometry. So that's just the different mode switch between looking at the node and its parameters and then looking at the actual contents and changing the view of what's inside that node.
So this is a very powerful and cool way to be able to interact with our information within nodes, and change our viewing for our own custom purposes. You can also see there are these little colored dots on the bottom of each node, and we'll get to all of those as we go through the different nodes, and, obviously, different nodes have different functions, and there's other flags that trigger things, like rendering and visibility and such. Right off the bat, let's look at this out1 top, which is just a simple viewer, and I'm going to click on this blue dot right here, and what that does is that displays the contents of that node behind your network as you're viewing.
So, this is actually really cool, because if you're just going to quick and dirty get a larger view of what you're doing without having to open a separate window and have to have that other screen real estate, you can actually just have the image output that you're working on behind your scene. And it's a cool way just to be able to get a bigger view while maximizing screen real estate. And you hit the P key, too, to get rid of those parameters. We can also do that with channels. So, here, I just click this blue display dot on the channels, and then I see my channel view there. So, it just can get a little chaotic, if you're looking at a lot of different things at the same time, but it can also be a really convenient shortcut to a lot of visibility within the monitor space that you have.
It can also be confusing, if you open up a project and there's this crazy background, you can make sure to know, oh, okay, there's a Display flag clicked on on something. Let me just turn that off, and then I can actually see what's going on with a little bit more clarity. All right, so, that's a bunch of different view things about the nodes. We have some stuff at the bottom of the screen, we've got our timeline. I hit Play to play everything back. And we have our frame per second setting here, and the start and end of our entire sequence, and some other stuff for tempo and time signature, if we were doing music-related things. So, you know, just our basic timing information down here.
And we've got a few good options of direct linking to some help. Right at the top, number one, which I'm sure you'll find yourself doing a lot, is hitting the wiki button. It gets you right over to the Derivative wiki page, where you can get information about Touch, and also look at the different help pages about the various nodes. Let me close that down. If we're on a node itself, let me click on this movie file, and again, press P. You can see there's this question mark here, in the upper left, called Help. I'm going to click on that, and that takes me right to the Derivative site, to the Movie File In TOP help.
When, as I was learning Touch, and I think as a lot of people have, this is just a great resource just when you want to know what some parameter does, or you need to drill down to one specific thing that you need for that project or that process. You can see there's a lot of information here about each node, and so that's really helpful. All right, another thing here is under Edit, Preferences, this is where all our preferences for Touch are, are two different things. One of the main defaults that we've changed for this course is the following. We've turned this Increment Filename on Save off, and we've turned off this Create Link Filename on Save.
What this does is this allows us just to save files that don't automatically increment, and then link 'em back to the original file you saved. This is a Touch convention that's a great thing for production, 'cause it's auto backing up every time you save, but you don't have to worry about which version you open, because that first file you made will always open the latest version you've saved. But for the purposes of this course, we've found it to be cleaner and easier just to have that stuff turned off, and not to have any extra version numbers on the end of our files, just so exactly what we make here will look the same on your side.
So those are just the preferences we changed here that we just wanted to let you know about. All right. There's some other basic stuff here. Like any 3D program, we can have multiple panes, so I could open up this side-by-side view, and then I could click on this arrow right here, and I could close this pane. I could do the same thing again, click on this arrow, and do, for example, a floating copy of that pane, to bring that out, so we can have multiple panes in the same window and floating panes and what have you. So that's just straightforward layout stuff. All right, so now we're back at our top level here.
And we've taken a look at how to work in the Touch interface, where the most important stuff is, and then, also, really critically, just the different settings on the different nodes, and the different flags, and how to use nodes as viewers of information. So that's the overview, and now we're going to dive in, going through all the different categories of nodes, and just giving you a basic overview of what each of the categories does.
- Navigating the TouchDesigner interface
- TouchDesigner contexts—COMP, TOP, CHOP, SOP, MAT, and DAT
- Building a network for real-time 2D image processing
- Building a network with a real-time rendered 3D scene
- Post-processing a real-time 3D with real-time 2D image processing
- Importing images and video files
- Importing assets with FBX files
- Recording a 2D and 3D animation as movie files
- Controlling a TouchDesigner network via an iPad or iPhone with TouchOSC
- Using TouchDesigner for VR