10 - Working with TOPs - TouchDesigner Tutorial: Beginner Crash Course — Transcript
Full transcript
- 0:00So now that we have some of the basic fundamentals of TouchDesigner together
- 0:04we're gonna start building a few things
- 0:06and we're gonna start one operator family at a time
- 0:08and incrementally kind of add complexity
- 0:10and get you a little bit more comfortable with each operator family
- 0:14So the first thing we're gonna start with are TOPs
- 0:16and like we said
- 0:17TOPs are texture operators
- 0:18and they'll probably be the basis of many projects that you're gonna be doing
- 0:23So in this example
- 0:24what we're gonna do is put together just a really simple compositing network
- 0:28using a bit of generative text
- 0:30a little bit of images that we're gonna load in
- 0:32and then we're just gonna composite them and kinda make a
- 0:34a pseudo simple little infographic display
- 0:37It'll kinda show you a little bit of the fundamentals of building networks
- 0:41So the first thing we're gonna do is create three movie file in TOPs
- 0:45So I can open the OP Create dialogue
- 0:47go to Movie File In
- 0:49or like we said previously
- 0:50hit Tab type movie
- 0:53and it's already highlighted and ready to go
- 1:00And then what I wanna do is go to each one
- 1:03I'm gonna go to the file parameter
- 1:05click the plus button to get the file picker
- 1:08and then what I'm gonna use is just some
- 1:10of the stock content inside of TouchDesigner
- 1:12and I'm gonna use these three images of butterflies
- 1:15So what I'll do is I'll grab the first
- 1:16one in my first movie file in
- 1:19go to my second movie file in
- 1:21same process
- 1:22but I'm gonna grab the second one
- 1:24And finally
- 1:25in my third movie file in
- 1:27I'll grab the final butterfly
- 1:30Now one trick that'll be really helpful
- 1:31for when you're building your networks is
- 1:33what you'll see is if we zoom into one operator
- 1:36we have our texture here
- 1:38which if we don't know what resolution it is
- 1:40just like we learned previously
- 1:41we can middle click
- 1:42We can see size is five twelve by five twelve
- 1:46And we can see that texture here
- 1:47It's a square texture black background
- 1:49butterfly in the middle
- 1:50but we have a lot of unused space in the actual OP viewer
- 1:54So a nice little trick you can do is
- 1:55if you come to the bottom right corner of the actual operator
- 1:58where you would go to resize it and you click it
- 2:01what it will do is optimize the size
- 2:04of the operator's viewer to better match the
- 2:06actual aspect ratio of your image
- 2:09So I'll just go ahead
- 2:10and just do that really quick on all three operators
- 2:13And then what I'm gonna do next is
- 2:15start making a little bit of text
- 2:17So I'm gonna double-click
- 2:19open the OP Create dialogue
- 2:20and I'm gonna grab a text TOP
- 2:24And I can do that even faster by hitting Tab
- 2:27typing text
- 2:28Oops not test text
- 2:29hitting Enter
- 2:31And finally I'll do the same thing and create a third one
- 2:35Now each one of these butterflies is
- 2:37gonna have a little label under it
- 2:39So what I'll do is I'll just kinda
- 2:40reorganize this network a little bit to better
- 2:42represent how things are gonna work
- 2:50And then we'll go ahead
- 2:50and we'll start with our first text TOP here
- 2:53Now text TOP has a ton of features and functionality
- 2:56changing fonts colors
- 2:58but we're gonna keep it simple today
- 2:59So what we're gonna do is go to the first text parameters page
- 3:03go to the text parameter itself
- 3:06double-click and delete derivative from in there
- 3:08and then I'm gonna type in butterfly space one
- 3:16And then what I wanna do is similarly
- 3:18by default
- 3:19this resolution of two fifty-six by two fifty-six
- 3:22not really conducive for our simple words
- 3:24I mean really what we should do is just have a little
- 3:26box that contains our word butterfly one
- 3:30So if I wanted to change the resolution of
- 3:32uh an operator like this that's a generator operator
- 3:35and that's what we call any of the operators inside
- 3:37of the OP Create dialogue that are darker
- 3:40So you can see here we have OP viewer
- 3:42which is a little bit darker than the open color
- 3:44We have substance
- 3:45which is darker than a slope
- 3:47Uh similarly
- 3:48text is darker than a tile
- 3:50and the darker operators in all the families are generators
- 3:54So in the case of TOPs
- 3:55if I wanna change the resolution of the
- 3:57of the generator
- 3:58I can go to its common page in the parameters
- 4:01and we'll see resolution is available to be changed
- 4:04and by default it starts at two fifty-six by two fifty-six
- 4:07So what I can do is
- 4:08is two things here
- 4:09I can either
- 4:11Maybe I have a plan
- 4:11and I know what that resolution needs to be
- 4:13so I can just say Oh
- 4:15well maybe I'll do a five twelve by
- 4:18you know maybe two hundred
- 4:22So I could do something like that
- 4:23Maybe I know
- 4:23But if I don't know
- 4:24we can go back to using our value ladder
- 4:26So I can say Well
- 4:27maybe I'll just middle click on the Y parameter here
- 4:32and I wanna move by tens
- 4:35So I can kinda just move
- 4:37and scrub through different resolutions on the Y-axis until I think to myself
- 4:41Well you know what
- 4:42A hundred seems okay
- 4:44It has enough size for my text
- 4:47And five twelve
- 4:48I chose that for my X
- 4:49because then it matches
- 4:51the resolution that I have on the X-axis of my butterfly here
- 4:56So now I'm gonna go ahead
- 4:57and apply the same properties to my other texts
- 5:00So I'm gonna go here
- 5:01I'll type in butterfly two
- 5:09I'm gonna go to common page
- 5:11change the resolution to be five twelve by one hundred
- 5:18Now I go to my third text
- 5:20and I'll change that to be butterfly three
- 5:27And then similarly on the common page
- 5:29I'll make this five twelve by one hundred
- 5:34Now let's say we got in this position
- 5:36where we set up all of these
- 5:37but oh wait
- 5:37we forgot we wanted to change the color of
- 5:39all of our text to something else
- 5:42A really useful thing you can do is grab multiple operators in your selection
- 5:47and change the parameter of one of them
- 5:49and have that apply to all of them
- 5:50if they're the same kind of operator
- 5:52So in this case because I have three text TOPs
- 5:54what I can do is first start with one of my text TOPs
- 5:57hold Shift
- 5:59and then click on my other two
- 6:01That way you can see they have a yellow border
- 6:03and my main text TOP has the green border
- 6:07I could go to my color
- 6:09and say maybe instead of a font of white
- 6:12what I can do is either change the RGB values individually
- 6:15or I can use this nice little color picker
- 6:18gadget by clicking on the white color
- 6:20It'll open up a little color picker with HSV and RGB
- 6:25But let's say I want to make them red
- 6:28and you can see once I clicked red
- 6:29it put in a one
- 6:31for the red channel and zero and zero for green and blue
- 6:35And you can see it did that actually for all of them
- 6:37So that's a really helpful trick that you can do when
- 6:38when working on your networks
- 6:41So now that I have kind of my base
- 6:43of my little data viz set up here
- 6:45or my info display
- 6:47I gotta start compositing
- 6:48I gotta start adding these things to a bigger canvas
- 6:51So the best way to start with this
- 6:52is I always say work at a
- 6:55the smallest resolution you can work
- 6:57and then only at the end of the kind of workflow
- 7:01you know composite everything onto your
- 7:02your big canvas
- 7:03So if our big canvas is gonna be
- 7:05you know a nineteen twenty by ten eighty screen
- 7:09I don't wanna go straight from my butterfly onto a ten eighty
- 7:13then put this onto a ten eighty
- 7:15then all you know
- 7:15go through every single one
- 7:17put them on a ten eighty and add them together
- 7:19I'm actually just gonna start
- 7:20and group them into smaller chunks
- 7:22and then composite all those chunks on ten ADP canvas
- 7:26So the way we do this is using another useful operator
- 7:28It's called a constant top
- 7:31And a constant top is essentially a
- 7:34a top that gives you a color and a resolution
- 7:37And for many uh usages
- 7:39you might use this just as a color
- 7:41but it's actually very useful in compositing
- 7:43because what you can do is make little canvases
- 7:45and then either over or composite your elements onto them
- 7:50So in this case
- 7:51I know that I have five twelve by five twelve butterfly
- 7:55and five twelve by one hundred text
- 7:58So what I would want is a five twelve long by six hundred
- 8:02and twelve canvas per butterfly text combination
- 8:07So each group of my butterfly plus the
- 8:09text under it should be five twelve wide
- 8:12and six hundred and twelve
- 8:14We got that by adding the Y of the
- 8:16butterfly with the Y of the text
- 8:18That's how we got six twelve
- 8:19So what I would do is go to my constant
- 8:22Similarly we can also check the op create constant is a generator
- 8:26You can see it's darker
- 8:27So that means if I wanna change its resolution
- 8:29from the default two fifty-six by two fifty-six
- 8:33I can go to common
- 8:34change this resolution like we said to five twelve by six twelve
- 8:41Now I also don't want it to have a white background
- 8:44so what I'll do is go to constant
- 8:46I'll zero out all of my channels so it's black
- 8:49but then I'll also zero out the alpha
- 8:52so that it's essentially not only black
- 8:54but it's also nothing
- 8:55so that if if later there's more advanced compositing happening
- 8:58I don't have to worry about having black boxes appear inside of my
- 9:01you know canvas
- 9:03So now that I have that
- 9:04I can start compositing
- 9:05and there's a number of different ways we can composite
- 9:08and we'll look at all of them
- 9:09So the first one
- 9:11which in our case is going to be the easiest
- 9:12is going to be using an over top
- 9:15And over top is great for things that are like this
- 9:17that are simple
- 9:18where you just kinda wanna put one thing over another
- 9:21and do that as quickly and as easily as possible
- 9:23And you can see over has two inputs
- 9:26and what it does is it takes the first input
- 9:28and puts it over the second input
- 9:30So in this case
- 9:31what I want is to have my canvas as the second input
- 9:36'cause that's gonna be my base layer
- 9:39and then I wanna put the butterfly on top of it
- 9:42Now when you do that
- 9:43one thing you're gonna notice first
- 9:46five twelve by six twelve resolution is taken by the over
- 9:49and that's because our fixed layer parameter inside the
- 9:52over top is set to input two
- 9:54And this fixed layer parameter on the over top only
- 9:57allows you to choose between input one and two
- 9:59And essentially what it does is it tells the operator
- 10:02which of the inputs to take the resolution from
- 10:06which is gonna be the base layer that doesn't move
- 10:08It takes the resolution from that
- 10:10and then all the other parameters affect the
- 10:12other layer that isn't the fixed layer
- 10:15So in this case you know
- 10:15we have the pre-fit
- 10:16which we'll talk about
- 10:17as well as some basic transforms
- 10:19But in this case
- 10:20we actually want the fixed layer to be two
- 10:22which is the default
- 10:23That way it takes the resolution from our canvas
- 10:27But then you'll see that our butterfly is getting stretched
- 10:30because by default the pre-fit overlay is set to fill
- 10:34And what the pre-fit overlay is
- 10:36is it basically gives you a bunch of options
- 10:39for how to take the first input that's getting over onto the second input
- 10:44and if they're a different resolution
- 10:46what to do about that discrepancy
- 10:48So we can see here by default is fill
- 10:50So it takes my five twelve by five twelve
- 10:53and actually stretches it to five twelve by six twelve
- 10:57We could do things like fit horizontally
- 10:59fit vertically
- 11:00You know there's a couple of different fits
- 11:01You're better off reading the wiki on those
- 11:03But what we actually want is native resolution
- 11:06We don't want our butterfly to be stretched
- 11:08We just want it to be centered and at its own correct resolution
- 11:12So when we set it to native resolution
- 11:14that's what it does
- 11:14You can see it it's not stretched
- 11:16And then we have a couple of different options here
- 11:18for how we want to justify that texture onto the bigger background
- 11:22'Cause right now by default
- 11:24it's gonna be center
- 11:24center on the X and Y
- 11:26So what I'm gonna do first is maybe justify vertical
- 11:30and set at the top
- 11:32This will keep it at its native resolution
- 11:34but essentially line it up with the top edge
- 11:37And that way I'll have room underneath to composite my text
- 11:41The rest of these options we don't really need yet
- 11:43so we'll take a look at those in a moment
- 11:45when we start doing our text
- 11:47So now that I have this butterfly on my background
- 11:51I wanna take this texture and composite my text over it
- 11:56So what I could do is make another over top
- 12:00connect this as my second input
- 12:03'cause this is gonna be the base layer that
- 12:04the text is gonna go on top of
- 12:07grab the output of my butterfly text Connect it to the top layer
- 12:12and you can see the defaults in this case were like previously
- 12:15and they stretch our text terribly to
- 12:19to try and fill it for us
- 12:21So what we're gonna do is first make sure
- 12:22the fixed layer is set to input two
- 12:24which is what we want
- 12:25and we can confirm that by middle clicking and checking the size again
- 12:30We wanna set the pre-fit overlay to native resolution
- 12:32that way our text isn't getting
- 12:34uh you know resized and
- 12:36and going all crazy
- 12:38But this time instead of
- 12:41you know justifying to the top or center
- 12:43I'm actually gonna justify vertically to the bottom
- 12:46But in my eyes
- 12:47this is still too close to the bottom
- 12:48I wanna take it from the bottom
- 12:50and just push it up a little bit
- 12:51So what I can do is actually use the
- 12:53translate parameters that are very helpful here to
- 12:55take this text that's justified to the bottom
- 12:58and then just offset it up a little bit
- 13:01Now in most cases by default
- 13:03translate and transforms and all those kinds of operations on tops
- 13:09you'll see an F here on the right side
- 13:11And anywhere where you have a parameter
- 13:14and then on the right side is a
- 13:15little F like this with an arrow
- 13:17what this does is it indicates the units that are being used
- 13:21for that parameter
- 13:23So in this case
- 13:24F being the default is fraction
- 13:26That means if we wanted to move
- 13:28uh this butterfly text up a little bit
- 13:30we would actually be moving between zero and one
- 13:33so we'd wanna move in small increments
- 13:36because zero being the bottom and one being the top
- 13:39But in most cases
- 13:40I think many people actually wanna set this to pixels
- 13:43'cause this way
- 13:44our units are now in pixels
- 13:45so instead of being from zero to one
- 13:47they would be in this case
- 13:48from zero to six twelve to get to the top
- 13:51So if I wanted to bump this upwards by twenty-five pixels
- 13:54now I can go to my translate Y
- 13:57type twenty-five
- 13:58and now it my butterfly text goes up twenty-five pixels
- 14:02So I think that's the workflow that most people want
- 14:04but a lot of people don't know that you can change those
- 14:08uh units very easily
- 14:11So with that said
- 14:11that's basically our first unit of butterfly
- 14:14So we'll do the same thing with our second unit
- 14:17and I'll do it manually again just
- 14:19so that you kinda get the hang of it
- 14:20We're gonna make an over
- 14:22We're gonna go back up to where we have our little canvas
- 14:26set that as the second input of my over
- 14:29set the butterfly as the first input
- 14:32Going to the parameters of the over
- 14:34I'm gonna set the fixed layer to two
- 14:36which it already is
- 14:37I want my pre-fit to be native resolution
- 14:40and I want to justify vertically to the top
- 14:43And then similarly
- 14:44I make another over
- 14:47where this new butterfly on canvas texture becomes the second input
- 14:53and my text becomes the first input
- 14:56Now similarly
- 14:57pre-fit overlay is gonna go to native resolution
- 15:00except this time I'm gonna justify to the bottom
- 15:04And then like we did before
- 15:05I wanna translate twenty-five pixels upwards
- 15:08so I first change my units from fraction to pixels
- 15:12and then I type in twenty-five and we get that made
- 15:18Now you probably don't wanna be doing this manually all the time
- 15:21so what we can do in this case is copy
- 15:23and paste it really easily
- 15:24What we can do is we can right click
- 15:25and drag like we talked about at the beginning
- 15:28highlight both of those overs that we wanna copy
- 15:31Control C Control V
- 15:34We get a copy
- 15:35Now don't be afraid by the little mess of wires happening
- 15:38It's really easy for us to fix that
- 15:40So so far we talked about just some really easy ways of wiring
- 15:43and disconnecting wires
- 15:44but you can also overwrite wires very easily
- 15:47So for example in this over
- 15:50I actually want this butterfly and that same canvas texture
- 15:54So the canvas texture is okay
- 15:55I don't need to change anything about it
- 15:56But I want this to be plugged in
- 15:58So either what I can do is simply grab this output
- 16:03connect it to the input of the over and overwrite it
- 16:06or something useful that I can do is I can grab
- 16:08for example now that I want to overwrite
- 16:09my butterfly two text with butterfly three
- 16:12I can click on the output here
- 16:14and I can actually go and highlight the wire
- 16:17which gives me the connection
- 16:18and you can see it goes from the output of this text
- 16:22to the input of this over
- 16:23And if I click on that
- 16:25what it does it essentially overwrites
- 16:27wherever that wire was going with the wire that I've selected
- 16:31So those two ways are really easy ways to overwrite paths
- 16:34especially if you're doing things like this and copying and pasting
- 16:37So now essentially we have our three groups
- 16:40and now we wanna place them on a
- 16:42nineteen twenty by ten eighty canvas to
- 16:44basically get it ready for our
- 16:46you know our final output
- 16:47our our display
- 16:48So we would follow a very similar process where
- 16:51let's say we would make a constant first
- 16:55We would go to the Common tab
- 16:57and set the resolution to nineteen twenty by ten eighty
- 17:02We'd go to the Constant Parameters page
- 17:05turn off the alpha
- 17:07and set the color to zero zero zero so that it's black
- 17:12Now what we can do is we can use a different composite method
- 17:16which is using a composite top
- 17:18So I can start typing composite
- 17:21hit Enter
- 17:22and I get a composite top
- 17:23And what you'll notice about composite top
- 17:25that's a little bit different than before
- 17:27is overtop only had two inputs
- 17:29It had you know
- 17:30whatever you want to over onto the background
- 17:33that you want to over it on
- 17:34But composite top has this different looking input
- 17:37and you can see even if I compare it to the constant
- 17:41composite has like a thicker inlet than other operators
- 17:44And what this is called is this is called a multi-input
- 17:47which means that you can just keep connecting
- 17:49as many different things as you want into this one input
- 17:52and the operator will just continue to process all the things that you're inputting
- 17:56So in this case
- 17:56just to keep it simple and
- 17:58and just show you a different way of compositing
- 18:00we're gonna do similar
- 18:01We're gonna take our constant
- 18:04plug it into the composite
- 18:06and then we're gonna take our over here
- 18:07which is our our unit of butterfly plus text
- 18:11plug that in
- 18:12And then what you're gonna see is nothing because the default operation is multiply
- 18:17And if we were going to multiply this by all black
- 18:21it's always gonna be black
- 18:22So what we're gonna do is go to the operation and change it
- 18:25and what you can see is a ton of different options
- 18:28Now in our simple case
- 18:29we were using over
- 18:30but you can see the composite tab has all kinds of different Photoshop filters
- 18:35uh color dodge darker colors
- 18:37uh exclude freeze adds
- 18:39a tops all these different things
- 18:41We're gonna stick to over
- 18:42but just introduce you to the composite top a little
- 18:44so I'll switch it to over
- 18:46But there's one thing that I have to be careful of right now
- 18:48because you can see that the resolution is five twelve by six twelve
- 18:53which is not what we want
- 18:54because we want this five twelve by
- 18:56six twelve to be on top of
- 18:58the nineteen twenty by ten eighty
- 19:00So in this case
- 19:00what I would do is go to the composite
- 19:02and there's two options
- 19:04We can either go to the transform page
- 19:06and change the fixed layer to be fixed layer one
- 19:09so I can do that
- 19:11And what you'll now see is that this is nineteen twenty by ten eighty
- 19:14and by default it's filling
- 19:15so it's stretching our butterfly to fill it
- 19:18But what I would recommend
- 19:19especially if you're just doing simple overs
- 19:21is to keep the wiring representative of what's happening
- 19:24So I can actually come back to the
- 19:27uh a any of the pages of the parameters
- 19:28At the bottom we'll see this little area
- 19:30It says input op
- 19:32It has all the names of the inputs
- 19:34so we can see constant two is the first thing that gets plugged in
- 19:37Over two is the second thing that gets plugged in
- 19:39And then we can either click these buttons on the
- 19:42the X's
- 19:42which will actually unhook them
- 19:45or we can use these arrows to rearrange them
- 19:47So if I click this arrow
- 19:48what you'll see is they've now switched
- 19:50This is now the first input and constant two is now the second input
- 19:54which I think is a cleaner way of working
- 19:56because we really do wanna take this over this
- 20:00So now if I go back to my composite
- 20:04what we can do is go to the transform
- 20:05and we have very similar options that we did with the over
- 20:08We're gonna change our pre-fit overlay to native resolution
- 20:12And then what I wanna do here is
- 20:13actually move this over to the left s
- 20:16and then put the second butterfly in the middle
- 20:18and then move the third butterfly to the right
- 20:20Now like we said before
- 20:22maybe we don't know how far we wanna go
- 20:25but what I can do is use the translate
- 20:27I can middle click and drag
- 20:29and let's go by maybe zero point one
- 20:33And I'm just gonna keep going till I think it's about right
- 20:36I think zero point three in the negative direction
- 20:38on the X feels right to me
- 20:40I can put another one here
- 20:41and then I can do positive point three on my third
- 20:45So now that I have that composite
- 20:47we can still use it very similarly to what we did for the over
- 20:50So I'll make another composite
- 20:52and then what I'll do is I know it's
- 20:54going to be this second butterfly unit
- 20:57plug that in over the result of my previous one
- 21:01So now we have to be careful in this case
- 21:02because before what we were doing was each butterfly unit needed a clean canvas
- 21:08so we would always take the output of our constant
- 21:10and plug it into the over
- 21:12But in this case
- 21:13we're trying to we're making a composite chain
- 21:15so we want the results to keep adding on top of each other
- 21:17We want the clean canvas to get one butterfly
- 21:20Then on top of that one
- 21:21we wanna add the second butterfly and then finally the third butterfly
- 21:24So that's why we use this output from the composite
- 21:26instead of our kinda canvas that we did previously
- 21:31Now similarly in our composite
- 21:33the default is set to multiply
- 21:35so let's actually change this to over
- 21:38And you can see it's stretching again
- 21:40so we're gonna go to the transform
- 21:42We're gonna go to the pre-fit overlay
- 21:43set that to native resolution
- 21:46and we can see this being center should be fine for our purposes
- 21:50So the final thing I'm gonna do is make one more composite top
- 21:55And very similarly
- 21:56this is gonna be our third butterfly overed onto our
- 22:03already kind of canvas that we've built with two butterflies
- 22:07And similarly
- 22:07we're gonna change multiply to over
- 22:10We're gonna go to the transform
- 22:12change the pre-fit overlay to native res
- 22:15And then like I was saying before
- 22:16we can probably just translate this over to zero point three
- 22:20because our other one is negative zero point three to the left
- 22:24We can move this one point three to the right
- 22:26which will give us a balance and equal distance from the center
- 22:29So with that even just doing these simple things
- 22:32you know we're all in the same operator family
- 22:33We'll start animating stuff shortly
- 22:36You're starting to understand the
- 22:37the workflow of compositing
- 22:39working with some parameters
- 22:40using the value ladder kinda in real life
- 22:43And then at the end of the day
- 22:44we get to this nice little nineteen twenty
- 22:46by ten eighty canvas with a couple butterflies
- 22:48and a bit of text
- 22:50Now there's two more things that we should talk about when
- 22:52when working with TouchDesigner networks
- 22:55The first is that you always wanna put always
- 22:58always always
- 22:59If you don't do this
- 23:01please do this
- 23:03There's no I can't even say anything else
- 23:05You should always do this
- 23:06is put a null operator after you've reached a big checkpoint in your network
- 23:11And the checkpoint can be as big or as small as you like
- 23:15You know what would have been nice maybe is me putting nulls
- 23:18after each one of these butterflies
- 23:20But in this case
- 23:21I'm just putting a null at the end here
- 23:23And there's a couple reasons for this
- 23:25The null operators
- 23:26and every family has one
- 23:27not just tops
- 23:29they don't do anything
- 23:30but they serve as very useful checkpoints once you start making more
- 23:33and more complicated projects
- 23:35Because as you'll see
- 23:36once we start using chops and other things
- 23:38once we start moving data around the network and it's not just
- 23:41you know linear lines uh
- 23:43wires kinda going left to right
- 23:46we wanna have the ability to go
- 23:47and insert operators into the chain without having to redo a bunch of references
- 23:52and scripting and code
- 23:54And the only way that's possible is to have things referencing your nulls
- 23:59because those are the checkpoints
- 24:00And then what happens is
- 24:00let's say all of a sudden somebody says
- 24:03Hey can you just change that one thing
- 24:04make it a little darker
- 24:05What I can do is go in between these two operators
- 24:08right click hit Insert
- 24:10and say maybe add a level top
- 24:13And then you know
- 24:14I could I could change whatever I want without affecting
- 24:17what all of the other project was looking at
- 24:20Otherwise what I would have to do is
- 24:21if I didn't add this null
- 24:24what would happen was all of the project would be looking
- 24:26for an operator named Comp3
- 24:28but then if I had to add a level after it
- 24:32then I would have to go to all of my network and say
- 24:34Oh well sorry
- 24:35I changed
- 24:35Instead of looking at Comp3
- 24:37start looking at level one because that's what you should be looking at
- 24:40So the null operators are extremely important in really preventing refactoring
- 24:45which is what programmers call it
- 24:47when they have to go through
- 24:48and change a bunch of the infrastructure of the code for
- 24:51for really no reason at all other than name changes and maybe restructuring things
- 24:55So you should always add a null
- 24:58Now the final thing we're gonna look at with
- 24:59this is just a quick little trick with TOPs
- 25:02is you'll see we have this little blue ball at the bottom
- 25:05and we already talked about the plus sign
- 25:07The plus sign gives us access to the
- 25:09to the viewer
- 25:10But what we're gonna do is start looking at flags
- 25:12and what the different flags do
- 25:13And flags are all represented by little colored balls
- 25:16and each family has a different set of flags
- 25:20So TOPs have something called the display flag
- 25:22and you'll see by default it's off
- 25:24What happens when you turn it on though
- 25:26is that it actually sets the texture that's inside of
- 25:30this operator to be the background of your network
- 25:34And the nice thing is you can do this with
- 25:35as many operators as you want
- 25:38and it just keeps kinda dynamically arranging them and placing them as the background
- 25:42So if you ever needed to work on something
- 25:44and you wanted to see the output
- 25:46you could do something like this where you
- 25:47you turn on the display flag
- 25:49then you can say Oh
- 25:50well maybe I don't like
- 25:52you know the color red
- 25:55You know maybe yellow is better
- 25:57And you can kinda s get that visual feedback immediately
- 26:00without having to like zoom into one operator
- 26:02go over to the other
- 26:03make the change come back
- 26:04zoom in
- 26:05We're always trying to build good workflows
- 26:08So with that said
- 26:09this should be a
- 26:10a nice and easy introduction to TOPs
- 26:12and from here we're gonna go look at the next operator family
About this transcript
This page contains the full transcript of 10 - Working with TOPs - TouchDesigner Tutorial: Beginner Crash Course by The Interactive & Immersive HQ, generated from the public captions YouTube serves with the video. The transcript has 5,083 words across 659 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.
What you can do with it
Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.
Free YouTube transcript tool
YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.