The Interactive & Immersive HQ

TouchDesigner Tutorial: COMP

TouchDesigner Tutorial 12: COMP in TouchDesigner

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 COMPs Tutorial Table of Contents
    Add a header to begin generating the table of contents

    COMPs Introduction

    Now that we’ve got TOPs and CHOPs under our belt, the next thing we’re going to take a look at are COMPs in TouchDesigner, and we’re going to look at these in two very simple examples.

    The first example is using them to create different elements of UIs and small control panels. We won’t be making a fully-fledged UI, but we’ll be making a type of internal control that you can use.

    The second example is how you can use something like a container to encapsulate some of the functionality of your networks and make them look cleaner.

    Component operators are generally used in conjunction with other Operators. Back in tutorial 7, I mentioned that there are three categories of component operators (COMPs) and each have different uses.

    The ‘object’ components are used in various combinations to create and render SOPs and 3D scenes. The ‘panel’ components are used to create UIs and various containers to create output rasters, and the ‘other’ components are used for various tasks, such as keyframe animations, dynamic operator replication, or opening windows on various displays.

    Using COMPs: Our Example

    Essentially what we are building is a visual representation of a bunch of noise data. Then we’re going to create button and slider components that are going to give us controls over that visualization.

    Setting Up

    The first thing we’re going to do is make some of the graphics. Open the OP Create Dialogue, go to CHOP, and then create a Noise CHOP. We’re going to be changing the different parameters of this Noise with our UI elements, and then we’re going to use a really cool operator to change all of those CHOP channels into pixel data that we can then display.

    Next, put a Null after your Noise. Then, instead of putting all the operators that do the visualization on the same level, we’re actually going to create a container, send your CHOP signal into it, do any of the processing you want to do in there, and then output that signal and make a little black box tool that converts CHOP channels into TOP data.

    Using a Container

    Create a container (that’s under the COMPs page of the OP Create Dialogue) and then go inside of the container (using the ‘i’ key), and make an In CHOP. 

    Go back up a level (by pressing “u”), connect the Null to the container, and then if you go inside of the container again, you’ll see that data coming through in the In CHOP.

    CHOP to TOP

    Now we’re going use what’s called a CHOP to TOP (also called a CHOP to).

    Inside your container, go the OP Create Dialogue, and under the TOP page, select CHOP to, and drop it in.

    Then take your input data (the In CHOP) and set it to the reference as the CHOP parameter of the CHOP to. This takes all the values from the In CHOP that are ranging right now from negative one to one, and it gives us the R data of the pixel.

    Now we can output this from the container. Similar to how we made an In CHOP, now that we have a TOP, and we want to get that data out of there.

    Out TOP

    An Out TOP is basically the In CHOP, but for TOPs in reverse. Create one of these from the OP Create Dialogue.

    Connect the CHOP to to the Out TOP, then go back up a level, and you’ll see you now have a TOP output from that container. Connect that to another Null and then use the display flag to see it in the background.

    Now, if you go to your Noise and start to tweak the parameters, you’ll see that the visualization is changing (like in this gif down below).