The Interactive & Immersive HQ
TouchDesigner Interface
TouchDesigner Tutorial 9: Interface (Mastering the UI)
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
The final thing we’re going to look at before diving into actually making some stuff inside of TouchDesigner is the user interface itself.
Areas of the User Interface
The user interface might be overwhelming at the beginning, but it’s actually only a few small components that are pretty simple to use and in reality, most of them you won’t even need to use.
1. Network Editor
We already talked about the middle area of the user interface which is our network editor, and that’s where we work most of the time.
2. Transport Controls
The bottom section is our transport controls. And to be honest, these aren’t used very often by pros. There are some people who use them in more advanced workflows, but that’s a big chunk of the UI you likely won’t use.
The only things you may use are the pause, play and step forward buttons. I would highly recommend not pressing the step backwards button because if you do, you’ll see that even though your timeline increments go down, your movie still plays forward and that’s a complicated situation to explain.
So, trust me, pause, play, and step forward are okay to use, but for the rest of the transport controls, don’t worry about it and don’t get too into it.
3. Timeline Settings
On the bottom left, we have our timeline settings. The key things to know about this area are that the project’s ‘FPS’ and ‘Tempo’ can be changed here.
The project’s ‘FPS’ determines the rate at which the project will render frames. By default it is set to 60 FPS, meaning that TouchDesigner will try to render 60 frames every second. The ‘Tempo’ will set the BPM (beats per minute) of the project, for use by the Beat CHOP.
The timeline settings are used more in situations where animations and fixed media works need to be locked to a consistent timeline. The frame controls include ‘Start’ and ‘End’, which control the start frame and end frame of the timeline, as well as ‘RStart’ and ‘REnd’, which control the loop start and loop end of the timeline. With these settings, it’s possible to create an animation that spans the entire timeline, which could be 4000 frames, while still leaving the option to loop a small section of the timeline to work within.
As a beginner, the first thing you’ll usually do when you open up a project is come down there and set the FPS you want, however, the rest of the information on the timeline settings you probably won’t use until you’re more advanced (and I hardly use them myself).
I would recommend starting your TouchDesigner journey almost completely ignoring the bottom section, because if you start relying on the bottom section too much, you’re going to get into more trouble than the good it will do.
4 & 5. Path Bar & Menu Items
Right above the network editor, we have our path bar (which we already talked about in a previous tutorial), and at the top we have the menu items.
Palette Browser
The palette browser in TouchDesigner can be thought of as a component library. It holds ‘.tox’ files (or Touch Designer Component files).
These files contain a single component operator, that can hold a network of other operators. This means that a series of your frequently used operators, UI components, Python scripts, and more, can be created inside of a single component operator, saved as a ‘.tox’ file, and quickly accessed at any time in the future.
Blank projects start with the palette browser open by default, and docked to the left side of the window. Or to open the palette browser, click on the icon next to where it says Pane Layout (above the path bar) or go to the menu items, then Dialogs –> Palette Browser.
I encourage you to take a look through the large number of pre-existing ‘.tox’ files that are available in TouchDesigner, some can be really useful!
Panes
We know the main workspace in the middle is called our network editor, but our network editor is inside of a pane. So, we can almost think of this as a modular work area.
Here we have one pane that’s displaying one network editor (image on the left). And if we click inside of the geo1 operator, we have another network here, /project1/geo1 (image on the right):
To work inside of both of them simultaneously, if you need to display both networks at the same time, there’s different ways to do this using panes.
How to Split Panes
The first is that if we go to the top right side (the end of the path bar), there’s a little down arrow that says pane options. Click on that, and there’s two options that you’ll want, split left and right and split top to bottom.
If you click split left to right, it splits the whole pane and gives you two separate workspaces that you can be inside of. You’ll see if you click and drag inside of the network on the left, it doesn’t affect the right side. Similarly, if you click on an operator on the right side, if doesn’t affect the left side and you can keep that one looking at something else (and remember, you can hit ‘p’ if the parameter window starts to get in the way).
Splitting Panes Even Further
Now what happens if you want to even go further and split this even more? If you want to split the left side top to bottom, for example, go to the pane options button for that half, then click split top to bottom. Then you’ll have three panes that you’ll be able to see simultaneously.
Pane Shortcuts
In addition to clicking and selecting to split panes, there’s also very useful shortcuts.
How to Close a Pane
The first one you should know is how to close a pane. What you do is hit alt plus Z, inside of that pane with your mouse inside of the background.
Splitting a Pane (keyboard shortcut)
To use the keyboard shortcuts for splitting them, it’s alt plus the square bracket (with your mouse inside of the network again).
Alt + left square bracket splits it left and right, and alt + right square bracket splits it top to bottom.
With these few little shortcuts, it’s very easy to quickly create a customized modular area where you can be inside of one network on one side, inside of another network on the other side, or however you need your networks to be set up for working.
The nice thing is panes get saved! The pane state itself gets saved in your project.
More User Interface Tips to Know
There’s a couple more user TouchDesigner interface tips you need to know and first one is how to get help.
How to Get Help
What if you’re in a network and you’re trying to use a Movie File In, but don’t know how?
Hit ‘p’ to open the parameters, then you have two question marks in the top left portion of the parameters window. One of them doesn’t have a background, and one of them has a blue and yellow background.
The blue and yellow background one is help specific to Python scripting with that operator. As a beginner, you probably won’t be using that help button as much as you will the left side help button.
Click on that left side help button, and it immediately opens up your browser and takes you directly to the Wiki page on the Derivative Wiki (remember, TouchDesigner was created by Canadian company Derivative).
Derivative Wiki
The Wiki is going to be your main gospel and codex for getting help. The help button will take you right to the specific operator page, and you can read all about it, it’s different kind of characteristics, what the different parameters do, etc. And many different parameters will have a plus box beside it to reveal even more information.
This Wiki is really going to be your main source of reference, especially as a beginner, and that’s your main go-to way of getting help.
Operator Snippets
The final thing we want to look at with the user interface is what’s called the OP snippets or operator snippets. These are tons and tons of examples of how to use different operators and little notes about each of them.
To get to this, go to the top help menu here, and click operator snippets:
Once you do that, you’ll be greeted with a new floating window.
On the top left, you have something that looks similar to the OP create dialogue, where you have lists of all the operators.
If you want to find examples of how to use a Movie File In TOP, then click on that one and once you select it, you’ll have different examples appear below it, as well as a set of notes:
You can also copy and paste any of the examples on this window right into your project, which is very useful.
From a usability perspective, operator snippets are an incredible tool especially for digital art beginners. If you’re trying to explore what different operators do (like surface operators) or you’re trying to find some more advanced features of an operator and you don’t really quite know how to do it, I highly recommend looking at the OP snippets.
Wrap Up
That’s everything you need to know about the TouchDesigner UI to get started as a beginner.
Next, we’re going to start building some stuff in TouchDesigner! The first family of operators we’ll be discussing is TOPs.
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!