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 Beginner Course Content
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).
Right now, if you middle click on the Null 2, the size is 600 by 1, which is not ideal for displaying on screens or projectors.
Go back inside your container, and then between the output, and the CHOP to, right click on the wire, hit insert operator, and create a Fit TOP.
Fit TOP
Fit TOP is very useful because if you want to put something onto a bigger canvas, this is another method. Previously, we were using a composite chains because they’re a bit simpler to understand, but Fit TOP rolls that functionality into one operator.
Go to the common parameters page of the Fit TOP operator and set the resolution to be 1920 by 1080. Then go back to fit parameters page, go to the fit parameter itself, and instead of being best, set it to fill. All of a sudden you’ll notice it’s taking that one pixel line and stretching it up and down and filling that 1920 by 1080 canvas.
So now if you go back up a level, you’ll see that what you had displayed from the Null is that output.
Buttons and Sliders
Now we’ll move onto buttons and sliders. From the COMP page of the OP Create Dialogue, create two buttons and two sliders.
Even though our buttons and sliders are COMPs, if you zoom in, you’ll see they have a little CHOP output on the right hand side. UI elements like this, even though they’re part of the COMP family, they actually give you CHOP data to use for your controls.
So, next make a Null CHOP next to your first button and connect them together. If you activate the viewer for the button, you’ll have a little button that you can turn on and off and it gives you a zero to one value.
Copy and paste that Null, connect it to your second button, then copy and paste the Null two more times, and connect them to your sliders.
Noise Parameters
Let’s go to our Noise and start playing around with the different things we can control.
The exponent parameter makes the effect more intense, it pushes everything into extremes of either on or off, or it takes things and makes them a bit more gradient.
So if that seems like a cool control that we can take advantage of, first we need to check what values we want to set this to (in this case, we’ll do from zero to two).
Go to one of your sliders. Right click on the wire in between the slider and the Null, click insert operator, and put a Math CHOP in between these two.
Right now, the slider goes from zero to one, and we want our parameter to go from zero to two, so we’re going to use a Math just like we’ve done before to rearrange our value. Keep the “from range” on the Math as zero to one, but change the “to range” to zero to two.
Then click on your Noise operator to open its parameters, turn on the viewer active state for your Null 5, and drag and drop that onto the exponent parameter of the Noise. Click the second option (Relative CHOP Reference). And now you’ll have an easy little slider that controls that.
Animating your Noise
Next, we’re going to make an LFO CHOP, which is a low frequency oscillator and it generates little signals that we can use to control things in simple shapes.
Create another Null CHOP after it, and connect them.
And then again, go to your Noise, open its parameters, but this time make sure it’s open to the transform page of the parameters. Open the viewer on the Null you just made, and drag and drop it to the rotate Z parameter of the Noise.
Basically, this is going to rotate the Noise, and animate and update those Noise values in an interesting way.
It looks crazy and out of control now, so go to your LFO and turn down the frequency. If you set that frequency to zero, the animation stops. Use the value ladder to nudge it up by 0.01. Now it’s still crazy, but it’s definitely a lot less crazy, and it feels more interesting and understandable.
Changing Noise Type
Let’s map a few other parameters of our Noise. I think a good example would be changing the noise type.
Right now it’s set to sparse, but another cool one is harmonic summation, which gives us a bit more flashing. If we want to make it jump from sparse to harmonic, we’ll use a button because a slider wouldn’t really be appropriate.
If you click on any of the parameters names of the Noise, it’ll open a little dropdown where it shows you value. For a lot of these dropdown values, they’re indices, so they’re numbers that control which option are being selected.
In this case, sparse is option zero and harmonic summation is option two. So, you could take your button and change the value scale from zero to one to zero to two.
Insert another Math CHOP in between your Button 1 and Null 3, and change the “to range” to zero to two.
Then click back on your Noise. Activate the viewer on my the Null, drag and drop onto the noise type parameter (and as always, select the second option, Relative CHOP Reference).
Now we have a really easy method to change between one noise type that’s more active and exciting and another noise type that is more subtle.
Feel free to play around with the other parameters here too, like roughness, amplitude, or harmonics.
Post-Processing
What we can do next is add some post-processing.
Edge TOP
Create an Edge TOP on the wire in between your container and Null. This does an edge detection for the lines and it gives them a bit more body and interest. You can adjust the black level parameter of the Edge too, and when you do, you’ll see they’re not perfect straight lines anymore, there’s some tapering, which in my opinion, gives it an interesting look.
Let’s connect our other button to this black level parameter. Make sure your Edge is still selected so you can see it’s parameters, then activate the viewer of the Null that’s connected to the second button, drag and drop it to the black level parameter and select Relative CHOP Reference again.
However, the button is still going from zero to one. So we’re going to use our good friend Math CHOP to rescale that value again. Create a Math in between that button and Null, and change the “to range” to zero to 0.75 this time.
Filter CHOP
If you don’t want the change to be instant when you press the button, there’s something else we can do. After that Math, insert another operator, called a Filter CHOP.
Set the filter width parameter to three seconds, and now it take three seconds to go from the original value to the new value when you click the button, which makes a nice little transition between these two different states.
Noise Roughness
Finally, we have one more slider left. We’ll use this to change the roughness of the Noise.
Activate the viewer on the Null next to that slider, and click and drag it onto the roughness parameter of the Noise. Put a Math CHOP in between them, and change the “to range” to be from zero to three.
That gives us an interesting look and now we have a bunch of different effects that we can go through really simply using our container-based system that we’ve created.
Wrap Up
Your main uses for COMPs when you’re getting started are going to be making quick panels with buttons and sliders (or whatever else you want), mapping the CHOP channels to them correctly, and making mini networks using containers (where you can contain different elements of your network so it doesn’t become too busy).
Up next, we discuss the TouchDesigner DATs family!
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!