The Interactive & Immersive HQ

TouchDesigner Tutorial: Network Navigation

TouchDesigner Tutorial 4: Network Navigation

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.

So, we’ve been using this word “network” so far in our TouchDesigner Beginner Series, but what is a network?

We usually call networks the areas of the program inside of our TouchDesigner environment, and what you’ll see soon is that you can have many different networks, so let’s learn about TouchDesigner network navigation.

Network Interface

This would be considered a network. It’s a bunch of operators inside of TouchDesigner doing a piece of functionality. At the bottom of the network we have a timeline, and at the top we have menus:

Network Editor

Generally, this whole area here in the middle, that’s called our network editor:

The network editor is where you’ll work on creating operators, building functionality, and doing whatever else you want to do inside of TouchDesigner.

Network Paths

All areas of the network have different paths and these paths are very similar to how paths might work for files and folders on your computer. The path structure that we have inside of TouchDesigner is most similar to Linux or Unix based operating systems.

Here we have what’s called a path bar and this shows us the current path to the network that we’re inside of right now:

The path starts with a forward slash and then you have, for instance, project1, which is the name of the area of the network I’m in right now. If I click inside the geo1, for example, then the path would be “/project1/geo1”. It’s exactly like a folder and file structure where the operators are our files and containers and other components that we can put stuff inside of become our folders.

Navigating the Network

Right now, we are at “/project1/”. That means we are inside of a component named project1.

We have operators here that all have different colours, and those colours are associated with families, but the grey edged operators are important in this case because they act as our folders.

For example, if I double click my mouse on the operator named geo1, then all of a sudden, you can see the path bar has changed to be “/project1/geo1”, and I have a totally new area of the network, which has operators I wasn’t seeing before because now we’re inside a different network:

However, if you try and double click on all these operators, nothing happens, because only those grey operators can hold other operators inside of them.

Scrolling vs. Keyboard Shortcuts

So, we saw that double clicking our mouse was one way to navigate into an operator. But there are multiple ways to get in and out.

Using Your Mouse Wheel

One way that I personally never use but you should know about in case it happens by accident, is you can use the mouse wheel to start scrolling backwards out of a network. And when you scroll far enough, you’ll eventually leave that area of the network you were in.

You can also use the scroll wheel to go into a network. If you just keep zooming in on an operator, eventually you’ll land inside of it.

I really don’t recommend the scrolling method for most users because it’s very slow compared to the keyboard shortcuts and it’s just not as accurate.

Keyboard Shortcuts: i & u

The keyboard shortcuts you’ll definitely need to know are the letters i and u. Click ‘i’ to go inside of a network, and hit ‘u’, to go back out.

When you’re back in the “/project 1” area and hit u, then you’ll get to the route of the network. 

Keyboard Shortcut: h

Another useful keyboard shortcut besides i and u is h. The ‘h’ key does something called home. It homes your network and basically fits all the operators inside of that network onto the available screen real estate.

For example, if you drag an operator really far away, then you’re working while zoomed in further and think, where did that operator go?

Simply hit ‘h’ and it will find the boundaries of all of the operators inside of that network, resize the whole thing and centre it onto the screen:na

Wrap Up

By using a combination of the ‘i’ key to go into networks, ‘h’ to home them in quickly, and ‘u’ to go outside of them, you can easily move around the network much faster, and they are the much more preferred way to go about network navigation in TouchDesigner.

Let’s keep looking at some other elements of TouchDesigner. Next up, we discuss signal flow.

About The Author
Picture of Elburz Sorkhabi

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!