TouchDesigner Tutorial: Network Utilities
TouchDesigner Tutorial 18: Network Utilities and Annotations
Join The HQ PRO: Get a 7-Day Free Trial!
Join The Interactive & Immersive HQ PRO and get access to over 300+ hours of structured, professional course content, 200+ hours of Accelerator Session masterclass recordings, and access to a private mentorship community with experienced pros like Matthew Ragan and Elburz Sorkhabi.
TouchDesigner Beginner Course Content
In this final tutorial, we’re going to have a look at some special-case operators that have been added to TouchDesigner over the last couple of years. They’re called Network Utilities, and in general they’re used for keeping your project organized and leaving yourself notes about the functionality that you’ve built.
They include Comments, the Network Box, and the Annotate COMP.
Comments
We’ll start by looking at Comments.
You can add a Comment to your project by right-clicking in a blank area of your network and choosing Add Comment, or by pressing Shift + C on the keyboard.
Comments are a text-only way of adding documentation to your project. You can think of them like a sticky note that you can add to write yourself little notes.
To edit a Comment’s text, double-click on it. You’ll then see a blinking cursor, which tells you that you can interact with it like any other text editor. You can click and drag to select text, type new text, use the Return key, and generally edit it however you’d expect.
To stop editing, click once in a blank area of the network outside of the Comment box.
Once you’re no longer editing, you can move the Comment by hovering over it and left-clicking and dragging. You can also resize it by hovering over any edge and dragging to change its size.
Comment boxes can also have their background color changed using the color chooser in the lower-left corner (if the color chooser isn’t visible, press the C key on your keyboard). Once the Comment is selected, you can choose a new background color.
One final thing to note is that, unlike the typical operators we deal with in TouchDesigner, the Comment box does not have any parameters that you can edit on the right hand side. Derivative designed it this way to keep things simple and keep you focused on writing notes.
Network Box
Next, we’re going to have a look at the Network Box.
Network Boxes are used to group, label, and move nodes.
To create one, either right-click in the background and choose Add Network Box, or press Shift + B.
You’ll notice immediately that this looks a little different than the Comment box. There’s a title that is automatically selected, and you can use this as a way of reminding yourself what the Network Box contains.
For example, if you’re building an effect that you want to differentiate from the rest of your network, you can give it a descriptive title, such as “My Great Effect”.
Just like the Comment box, clicking outside the title stops editing. You can edit the title again by double-clicking it or by clicking the edit icon on the right side of the title bar.
To start using the Network Box, double-click in the darker area below the title bar. This opens the OP Create dialog, allowing you to add operators inside the boundaries of the box.
For example, you could add a Movie File In TOP inside the Network Box.
Once operators are inside the box, you can left-click and drag the title bar to move the entire group. All of the nodes keep their relative positions inside the Network Box as it moves.
Like the Comment box, you can also resize the Network Box by dragging one of its edges.
You can also drag existing nodes into a Network Box after it’s been created. As you move a node closer, the Network Box automatically expands its boundaries to include it. This makes it easy to organize existing parts of your network into logical groups.
One situation you may run into is placing a node partially outside the boundaries of the Network Box. If a node sits mostly outside the box, it won’t move with the rest of the group. Simply resize the Network Box so that the node is fully contained within it, and it will then move along with the rest of the operators.
If you want to move the Network Box without moving the nodes inside it, hold down the Alt key while dragging the title bar. This allows you to reposition the Network Box independently of its contents. You can also do the reverse: hold down Alt and drag the Network box so it’s underneath the nodes you want to include, then let go of the mouse and those nodes will be contained in the Network Box.
Like the Comment box, you can also change the background color by selecting the Network Box and choosing a color from the color chooser.
The Network Box is a great utility for grouping, labeling, and moving nodes. While it doesn’t let you write detailed notes like a Comment box, it’s excellent for creating visual hierarchy and organization within your project.
Annotate COMP
Next, we’re going to look at the Annotate COMP.
The Annotate COMP is like a supercharged version of both the Comment box and the Network Box. It combines the functionality of both while adding several additional features.
There are four different ways to create an Annotate COMP:
Right-click and choose Add Annotate
Press Shift + A
Hold Alt and left-click and drag to create a custom-sized Annotate COMP
Create it from the OP Create dialog under the COMP page in the Other column
Once you add it, everything looks very familiar. Like the Network Box, it has a title bar, an edit icon, and an area for adding nodes.
The main difference is that the Annotate COMP also has a full set of parameters available.
Editing the title works exactly the same as the Network Box. You can rename it directly, and when you do, you’ll notice that the Title parameter updates automatically. Likewise, you can edit the title through the parameter window, and the node updates immediately.
Below the title parameters are the Body Text parameters.
This is where the Annotate COMP combines the functionality of both previous utilities. Not only can it group, label, and move nodes, but it can also contain notes just like a Comment box.
To edit the body text, click the Make Text Editable icon (on the right end of the title bar). This allows you to edit both the title and the body text directly inside the Annotate COMP.
You can write notes, copy and paste text, and interact with it like a standard text editor. Clicking outside the Annotate COMP finishes editing, and the Body Text parameter updates with the new contents.
The parameters also let you adjust the body text font size.
Another useful option is Limit Body Text Width. If your Annotate COMP becomes quite wide and your notes stretch across the entire width, you can turn this option on and then reduce the Max Body Text Width to constrain the text to a narrower column. This keeps longer notes much easier to read while still leaving room for the network itself.
Like the Network Box, you can double-click in the lower section to add operators.
For example, add a Movie File In TOP, a Level TOP, and a Null TOP.
Dragging the title bar moves both the Annotate COMP and all of the operators it contains, showing how it combines the functionality of both previous utilities.
OP Viewer
The Annotate COMP also includes a very useful OP Viewer feature.
On the OP Viewer parameter page, enable Viewer Display, then specify any operator to display in the background.
For example, if you drag a Null TOP into the OP parameter, its texture immediately appears behind the Annotate COMP.
This provides a great way to visually showcase the network you’re building.
There are several parameters for adjusting the display, including scaling the viewer, using Justify X and Justify Y to change the position of the texture, and adjusting its alpha.
Because this is an OP Viewer rather than just a TOP Viewer, it can display the contents of almost any operator.
For example, add a Pattern CHOP into the Annotate COMP and drag it onto the OP parameter.
This isn’t simply a static preview. The OP Viewer updates in real time. If the source operator is animated or changing continuously, those updates are reflected live in the background of the Annotate COMP.
Additional Features of the Annotate COMP
The Settings parameters page includes several additional features.
One particularly useful option is the Mode parameter. This allows the Annotate COMP to function as an Annotate COMP, a Comment box, or a Network Box.
The benefit of these different modes is that you still retain access to the Annotate COMP’s parameters. This allows you to manipulate the utility with other operators, automate changes, or build custom functionality that wouldn’t be possible with the standard Comment or Network Box.
Typically, you’ll use the default Annotate mode, but it’s useful to know the other options exist.
Unlike the Comment and Network Box, which use preset colors, the Annotate COMP allows you to choose any custom background color using the full color picker (in the Back Color parameter). You can also adjust the background alpha and the overall opacity of the node.
You can enable or disable Body Word Wrap, depending on whether you want the body text to wrap automatically or be clipped at the specified width.
Finally, there’s a Smart Quote option, which automatically replaces characters such as ellipses, em dashes, and quotation marks with their properly formatted Unicode equivalents for cleaner-looking documentation.
Wrap Up
The Comment box is useful for adding quick notes describing the things you’re building.
The Network Box is great for grouping, labeling, and moving nodes.
The Annotate COMP combines the functionality of both, giving you the ability to group, label, move nodes, add notes, display the contents of operators in the background, and serve as the foundation for custom project organization tools.
These are all great utilities to understand and begin using as your TouchDesigner projects grow larger and you need better ways to organize your work and document the systems you’ve built.
TouchDesigner Beginner Course: Next Steps
Congratulations and thanks for finishing our TouchDesigner Beginner Tutorial Series!
You should now have a decent understanding and practice experimenting with all the operator families, a decent understanding of TouchDesigner technology in general, including the application and the workflow, as well as how to take some of these experiments you’ve been making and plugging them into an output whether it’s a display, a projector, or an LED wall.
If you enjoyed going through this course, I highly suggest you take a look at The HQ PRO.
Inside of The HQ PRO, you get access to 300+ hours of TouchDesigner video training, and a private Facebook group where myself and Matthew Ragan answer your questions daily. You can also become certified as a TouchDesigner developer through our certifications exams and take advantage of the many other features that we have for HQ PRO members, such as twice-monthly group coaching calls.
If you’d like to get more information and join The HQ PRO, use the link below. I look forward to seeing you there!
Now that you’ve completed our TouchDesigner beginner series, try out these tutorials to create some fun, quick projects:
Create a Stunning TouchDesigner Display Background
Mastering TouchDesigner Trails: Techniques and Tips
Exploring the World of TouchDesigner GPU Particles and Optical Flow
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!