The Interactive & Immersive HQ
TouchDesigner Tutorial: DAT Operator
TouchDesigner Tutorial 13: DAT Operator
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 DATs Tutorial Table of Contents
Add a header to begin generating the table of contents
The next thing we’re going to build is going to use our next set of operator families which is DATs. DATs are the data operators we can use to create tables and texts, and this is how you will probably work with a lot of web APIs and Python.
Our DATs Example
What we’re going to do is make a slider controlled pre-set system so that we can drive a Text TOP’s text as well as the text styles of it dynamically.
Go to your OP Create Dialogue and create a Text TOP operator.
We want to dynamically drive the text that’s inside this Text TOP. To do this, first make a Text DAT.
Text DAT
You can think of a Text DAT like a word pad or a little Microsoft Word without any of the other features.
When you activate the viewer of the Text DAT, you can start typing inside of it, and it’s going to save that text in there.
You can manipulate it later with more DATs, and you can reference it for different things, which is what we’re going to do here. We’re going to use a Text DAT as our text storage for our Text TOP. For now, type a few words into your Text DAT.
Remember, before we start referencing any kind of data between operators, it’s always important to put a null. So, create a Null DAT after your Text DAT and connect them.
Changing Text TOP Parameters
Next, go back to your Text TOP and delete the default “derivative” text.
DAT Parameter
Then go to the DAT parameter of the Text TOP. Essentially what this does is you can reference a DAT in here, whether it’s a table or a text, and then you can select text out of it to render in there instead of having to manually type the text inside this parameter.
In this case, drag and drop your Null right onto that parameter. And you’ll see that your text looks clipped on both sides.
Word Wrap Parameter
To fix this, toggle on the word wrap parameter of the Text TOP. This will automatically figure out when those break points are and wrap the text. It’s very useful because it’s dynamic, so if you go back into the Text DAT and type more words in, it’ll still try to word wrap as best it can.
Auto Size Font Parameter
If you notice that the text is still getting clipped on the top and bottom though, go to the font parameters of the Text TOP, go to auto size font and select “autofit always”. That way, the text will also dynamically resize so not only is it getting word wrapped on the left and right edges, but it’s getting resized in case it becomes too big.
Change the Resolution
Right now, if you middle click on the Text TOP, you’ll see it’s 256 by 256. Personally, I think that’s a little bit small. So go to the common parameters page and change the resolution to be 720 by 720. We want to do that because we’re going to composite this text onto another video, and if the video is 720 we want a nice square with text in the middle of that video.
Create More Text DATs
Next, copy and paste your Text DAT a few times and add different text inside of each one.
Now we need a way to switch between these different Text DATs and have them go into the Null, which then gets referenced by our Text TOP. Luckily we have a really useful DAT we can use for this called Switch DAT.
Switch DAT
Open up the OP Create Dialogue and create a Switch DAT.
We’re going to plug all of these Text DATs into the Switch and then use the index parameter to switch between them.
The slow method is to plug them all in one by one. But there’s a nice trick I recommend, where if you right click and drag and select all the operators that you want to connect, all you have to do is connect the first one and all of them will get automatically connected.
When you’ve got them all connected, take a look inside of the Switch DATs viewer and as you change the index parameter, you’ll see it changes the text depending on what input that index number is (index zero will show you the text of the first Text DAT because remember everything in TouchDesigner starts at an index of zero).
Plug the Switch DAT into your Null, and then as you change the index, the text getting rendered in the Text TOP updates.
Now that we’ve got our tech set up, we can work on some of the formatting.
Table DATs
Very similarly to how we set up our Text DATs going into a Switch DAT, going into a Null, we’re going to set up a similar system but with tables.
This can be thought of as a really simple preset system. It’s not the most efficient one, but if you’re a beginner and you’re just trying to save a few different states for something like a Text DAT or maybe movie files, this is not a bad system to use.
A Table DAT functions like a Text DAT except you can add more rows and columns. Each cell is essentially the equivalent of a Text DAT but inside of a cell.
Create a Table DAT, and activate the viewer so you can interact with the data inside.
Adding Extra Rows and Columns
Right click on the first row number (which is zero), and hit Add Below, which will add a new row, and now you’ll have two rows in one column. Do this a couple more times so that you have four rows.
Then, right click on column zero, and hit Add After which will then add a second column for you.
Creating our Presets
Click inside of a cell and you can start typing. In the first row of your zero column, type “colour red”. In the next row, type “colour green”, in the third row type “colour blue”, and in the final row of that column type “opacity”.
Our first preset is just going to be white text, so in your column one, type 1 for each of the colour rows, and 1 for full opacity.
Now, turn off the viewer, and copy and paste it four times for our four presets. This way, each one of our text objects will have a preset of its own.
Edit each of the tables you just copied. Make the second preset red text, so change the value of the blue and green colours to zero, but leave the opacity full.
For the third preset, make it zero for red, 0.5 for green, 0.7 for blue, and keep the opacity full.
Finally for the last one, we’ll do something more subtle, so make it 0.3 for red, 0.3 green, and 0.3 blue (so it essentially becomes a dark grey) and then set the opacity down to 0.3 (so it kind of fades into the background).
Connect the Tables to a Switch DAT
Now that all your values edited, turn off the viewer active state on the tables.
Just like we did with our Texts going into a Switch, we’re going to do the same thing with our Tables. Create another Switch DAT, right click and drag around all your tables, connect the first one, and automatically they’ll all get connected.
The same principle with the index parameters applies to tables connected to a Switch DAT too. With an index of zero, we get the contents of the first table, if you set an index of one then it switches to the contents of the second table, etc.
Making a Controller
Now what we want to do is line up the presets with the text. So we’re going to make a little controller that’ll control these indices.
For this, we’re going to use some of what we learned and used in our COMPs operator families lesson.
Slider & Math CHOP
The first thing you’re going to do is make a slider, then make a Null CHOP after it and connect them. Currently, the value of the slider goes from zero to one, but we actually want it to be from zero to three (because we have four presets).
Insert a Math CHOP in between the slider and the null, and change the “to range” to go from zero to three.
Float Numbers
The value currently coming from the slider into the Math is what we call a float. A float is basically just a number with decimals in it. That’s not going to be useful for our switch because the Switch DATs don’t interpolate.
We need to round our number as well, so that it’s not sending decimals, but sending a whole number that will accurately map to each one of the indices.
Second Math CHOP
Our best friend Math CHOP can also round for us! Insert another Math CHOP in between the first Math and the Null.
On the first page of parameters you’ll find one called integer. Click on that and select “round”. Now you’ll see as the gradient float value changes when you move the slider, coming out of the output you actually have a rounded integer.
Like we’ve done with everything else before, to control the parameter of this Switch DAT’s index select the Switch DAT so you see its parameters, activate the viewer on your Null 2, drag and drop that channel right onto the index parameter, and choose Relative CHOP Reference.
Now do the same thing for the first Switch you made. Select it, and then drag and drop the null value again onto the index and choose the second option.
Blending Values
We can’t blend values in DATs because DATs are really focused on string type of data, Python, etc.
But what we can do is convert this data from the DAT family back into channels, and then use some of the techniques we used with our CHOP networks, like using Lag CHOPs, Filter CHOPs, things that will smooth the transition between two values.
This is actually relatively easy to do in TouchDesigner.
As always before we make any big jumps, we’re going to set a checkpoint here by creating another Null DAT.
DAT To CHOP
Now we’re ready to do our data conversion. First, create a DAT To CHOP (you’ll find it under the CHOPs page of the OP Create Dialogue).
This DAT To CHOP that we’re going to use takes DAT data and converts it to CHOP data.
The DAT parameter of the DAT to CHOP wants to know the name of the DAT that you want to convert. So, drag and drop your Null 3 right onto the parameter (by now I hope you’re seeing the pattern here where a lot of things are drag and drop).
You’ll see one of those little dotted line with an arrow is created, telling us that there’s a reference happening. However, this time it’s not animated, because this information isn’t changing.
DAT To Parameters
The way we’ve set up our table corresponds to basically exactly how the default settings of the DAT To are set up.
You can see we have our first channel which is colour_red (it doesn’t like spaces, so it replaces them with underscores).
If you go back up to your slider and change the values, you’ll see you now have this dynamically changing CHOP value operator.
So now that we’ve converted that data back into CHOPs because it’s all numeric data, what we can do is use some of those things like filter.
Adding a Filter
Add a Filter CHOP after the DAT To, then set the filter width parameter to be three seconds.
Move the slider now between a couple of indices, and you’ll see the nice smooth transitions between those two presets on the Filter CHOP.
In less than a few minutes, we rolled our own simple preset system that you can use with numeric data for parameters, so that’s awesome!
Referencing Your Text Colours
Put another Null CHOP after the Filter, then go back to your Text TOP and make sure you can see the colour parameters page.
Activate the viewer on your latest Null CHOP and drag and drop the parameters to reference them.
Take the red value, drop it onto the first font colour parameter (the R value), take the green over to the second font colour (the G value), take the blue over to the third font colour (the B value). Finally, reference your opacity value over to the font alpha parameter.
Turn the little display flag on your Text TOP so you can see your texts in the background. Play around with the slider and watch it do it’s state changes, text changes, colour changes, and opacity changes.
Adding a Movie Behind our Text
The final thing we can do here is create a Movie File In TOP so we can have a nice dynamic background. Use the plus button on the file parameter to open up the file chooser, go into the nature folder where there’s a few 720p stock nature shots and choose one.
Then create an Over TOP, put the background as your movie, and put your Text TOP into the first input on top of it, and change the pre-fit overlay to native resolution.
Turn off the display flag on your Text TOP now, put a Null TOP at the end of this chain and turn the display flag on that on.
Now when you move the slider, as the values are changing and the presets are changing, we can see them live on the background, like in this GIF here:
You can edit this to make this whatever you want. Maybe you only want to have one text and you’re just changing styles, or you want to change the amount of time it takes for that transition. You can also have multiple texts, you can have more advanced compositing, whatever you like. The sky’s the limit here.
We only did it with some styles but you can do it with all the parameters you want, there’s no limit on how much data you can store on a table.
Wrap Up
This should give you a good introduction to DATs. What I hope you’re starting to see is that with using little pieces of functionality from each of the operator families, we’re starting to add to the complexity of our networks.
We have some TOPs that are doing some compositing and rendering of 2D objects, we have a handful of DATs holding some data, then they get converted into CHOPs. We know that we can use CHOPs to smooth out values, and we have a little controller for our presets using some COMPs and some CHOPs.
As you explore TouchDesigner more and more, you’re going to always want to try and take your idea and think about the simplest blocks that could make that idea, because that’ll make it easier for you when you’re trying to build these networks.
Now let’s move on to our next operator families: SOPs and MATs.
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!