YouTube2Text

10 - Working with TOPs - TouchDesigner Tutorial: Beginner Crash Course — Transcript

by The Interactive & Immersive HQ · 5,083 words · 659 segments · language en · Watch on YouTube

Full transcript

  1. 0:00So now that we have some of the basic fundamentals of TouchDesigner together
  2. 0:04we're gonna start building a few things
  3. 0:06and we're gonna start one operator family at a time
  4. 0:08and incrementally kind of add complexity
  5. 0:10and get you a little bit more comfortable with each operator family
  6. 0:14So the first thing we're gonna start with are TOPs
  7. 0:16and like we said
  8. 0:17TOPs are texture operators
  9. 0:18and they'll probably be the basis of many projects that you're gonna be doing
  10. 0:23So in this example
  11. 0:24what we're gonna do is put together just a really simple compositing network
  12. 0:28using a bit of generative text
  13. 0:30a little bit of images that we're gonna load in
  14. 0:32and then we're just gonna composite them and kinda make a
  15. 0:34a pseudo simple little infographic display
  16. 0:37It'll kinda show you a little bit of the fundamentals of building networks
  17. 0:41So the first thing we're gonna do is create three movie file in TOPs
  18. 0:45So I can open the OP Create dialogue
  19. 0:47go to Movie File In
  20. 0:49or like we said previously
  21. 0:50hit Tab type movie
  22. 0:53and it's already highlighted and ready to go
  23. 1:00And then what I wanna do is go to each one
  24. 1:03I'm gonna go to the file parameter
  25. 1:05click the plus button to get the file picker
  26. 1:08and then what I'm gonna use is just some
  27. 1:10of the stock content inside of TouchDesigner
  28. 1:12and I'm gonna use these three images of butterflies
  29. 1:15So what I'll do is I'll grab the first
  30. 1:16one in my first movie file in
  31. 1:19go to my second movie file in
  32. 1:21same process
  33. 1:22but I'm gonna grab the second one
  34. 1:24And finally
  35. 1:25in my third movie file in
  36. 1:27I'll grab the final butterfly
  37. 1:30Now one trick that'll be really helpful
  38. 1:31for when you're building your networks is
  39. 1:33what you'll see is if we zoom into one operator
  40. 1:36we have our texture here
  41. 1:38which if we don't know what resolution it is
  42. 1:40just like we learned previously
  43. 1:41we can middle click
  44. 1:42We can see size is five twelve by five twelve
  45. 1:46And we can see that texture here
  46. 1:47It's a square texture black background
  47. 1:49butterfly in the middle
  48. 1:50but we have a lot of unused space in the actual OP viewer
  49. 1:54So a nice little trick you can do is
  50. 1:55if you come to the bottom right corner of the actual operator
  51. 1:58where you would go to resize it and you click it
  52. 2:01what it will do is optimize the size
  53. 2:04of the operator's viewer to better match the
  54. 2:06actual aspect ratio of your image
  55. 2:09So I'll just go ahead
  56. 2:10and just do that really quick on all three operators
  57. 2:13And then what I'm gonna do next is
  58. 2:15start making a little bit of text
  59. 2:17So I'm gonna double-click
  60. 2:19open the OP Create dialogue
  61. 2:20and I'm gonna grab a text TOP
  62. 2:24And I can do that even faster by hitting Tab
  63. 2:27typing text
  64. 2:28Oops not test text
  65. 2:29hitting Enter
  66. 2:31And finally I'll do the same thing and create a third one
  67. 2:35Now each one of these butterflies is
  68. 2:37gonna have a little label under it
  69. 2:39So what I'll do is I'll just kinda
  70. 2:40reorganize this network a little bit to better
  71. 2:42represent how things are gonna work
  72. 2:50And then we'll go ahead
  73. 2:50and we'll start with our first text TOP here
  74. 2:53Now text TOP has a ton of features and functionality
  75. 2:56changing fonts colors
  76. 2:58but we're gonna keep it simple today
  77. 2:59So what we're gonna do is go to the first text parameters page
  78. 3:03go to the text parameter itself
  79. 3:06double-click and delete derivative from in there
  80. 3:08and then I'm gonna type in butterfly space one
  81. 3:16And then what I wanna do is similarly
  82. 3:18by default
  83. 3:19this resolution of two fifty-six by two fifty-six
  84. 3:22not really conducive for our simple words
  85. 3:24I mean really what we should do is just have a little
  86. 3:26box that contains our word butterfly one
  87. 3:30So if I wanted to change the resolution of
  88. 3:32uh an operator like this that's a generator operator
  89. 3:35and that's what we call any of the operators inside
  90. 3:37of the OP Create dialogue that are darker
  91. 3:40So you can see here we have OP viewer
  92. 3:42which is a little bit darker than the open color
  93. 3:44We have substance
  94. 3:45which is darker than a slope
  95. 3:47Uh similarly
  96. 3:48text is darker than a tile
  97. 3:50and the darker operators in all the families are generators
  98. 3:54So in the case of TOPs
  99. 3:55if I wanna change the resolution of the
  100. 3:57of the generator
  101. 3:58I can go to its common page in the parameters
  102. 4:01and we'll see resolution is available to be changed
  103. 4:04and by default it starts at two fifty-six by two fifty-six
  104. 4:07So what I can do is
  105. 4:08is two things here
  106. 4:09I can either
  107. 4:11Maybe I have a plan
  108. 4:11and I know what that resolution needs to be
  109. 4:13so I can just say Oh
  110. 4:15well maybe I'll do a five twelve by
  111. 4:18you know maybe two hundred
  112. 4:22So I could do something like that
  113. 4:23Maybe I know
  114. 4:23But if I don't know
  115. 4:24we can go back to using our value ladder
  116. 4:26So I can say Well
  117. 4:27maybe I'll just middle click on the Y parameter here
  118. 4:32and I wanna move by tens
  119. 4:35So I can kinda just move
  120. 4:37and scrub through different resolutions on the Y-axis until I think to myself
  121. 4:41Well you know what
  122. 4:42A hundred seems okay
  123. 4:44It has enough size for my text
  124. 4:47And five twelve
  125. 4:48I chose that for my X
  126. 4:49because then it matches
  127. 4:51the resolution that I have on the X-axis of my butterfly here
  128. 4:56So now I'm gonna go ahead
  129. 4:57and apply the same properties to my other texts
  130. 5:00So I'm gonna go here
  131. 5:01I'll type in butterfly two
  132. 5:09I'm gonna go to common page
  133. 5:11change the resolution to be five twelve by one hundred
  134. 5:18Now I go to my third text
  135. 5:20and I'll change that to be butterfly three
  136. 5:27And then similarly on the common page
  137. 5:29I'll make this five twelve by one hundred
  138. 5:34Now let's say we got in this position
  139. 5:36where we set up all of these
  140. 5:37but oh wait
  141. 5:37we forgot we wanted to change the color of
  142. 5:39all of our text to something else
  143. 5:42A really useful thing you can do is grab multiple operators in your selection
  144. 5:47and change the parameter of one of them
  145. 5:49and have that apply to all of them
  146. 5:50if they're the same kind of operator
  147. 5:52So in this case because I have three text TOPs
  148. 5:54what I can do is first start with one of my text TOPs
  149. 5:57hold Shift
  150. 5:59and then click on my other two
  151. 6:01That way you can see they have a yellow border
  152. 6:03and my main text TOP has the green border
  153. 6:07I could go to my color
  154. 6:09and say maybe instead of a font of white
  155. 6:12what I can do is either change the RGB values individually
  156. 6:15or I can use this nice little color picker
  157. 6:18gadget by clicking on the white color
  158. 6:20It'll open up a little color picker with HSV and RGB
  159. 6:25But let's say I want to make them red
  160. 6:28and you can see once I clicked red
  161. 6:29it put in a one
  162. 6:31for the red channel and zero and zero for green and blue
  163. 6:35And you can see it did that actually for all of them
  164. 6:37So that's a really helpful trick that you can do when
  165. 6:38when working on your networks
  166. 6:41So now that I have kind of my base
  167. 6:43of my little data viz set up here
  168. 6:45or my info display
  169. 6:47I gotta start compositing
  170. 6:48I gotta start adding these things to a bigger canvas
  171. 6:51So the best way to start with this
  172. 6:52is I always say work at a
  173. 6:55the smallest resolution you can work
  174. 6:57and then only at the end of the kind of workflow
  175. 7:01you know composite everything onto your
  176. 7:02your big canvas
  177. 7:03So if our big canvas is gonna be
  178. 7:05you know a nineteen twenty by ten eighty screen
  179. 7:09I don't wanna go straight from my butterfly onto a ten eighty
  180. 7:13then put this onto a ten eighty
  181. 7:15then all you know
  182. 7:15go through every single one
  183. 7:17put them on a ten eighty and add them together
  184. 7:19I'm actually just gonna start
  185. 7:20and group them into smaller chunks
  186. 7:22and then composite all those chunks on ten ADP canvas
  187. 7:26So the way we do this is using another useful operator
  188. 7:28It's called a constant top
  189. 7:31And a constant top is essentially a
  190. 7:34a top that gives you a color and a resolution
  191. 7:37And for many uh usages
  192. 7:39you might use this just as a color
  193. 7:41but it's actually very useful in compositing
  194. 7:43because what you can do is make little canvases
  195. 7:45and then either over or composite your elements onto them
  196. 7:50So in this case
  197. 7:51I know that I have five twelve by five twelve butterfly
  198. 7:55and five twelve by one hundred text
  199. 7:58So what I would want is a five twelve long by six hundred
  200. 8:02and twelve canvas per butterfly text combination
  201. 8:07So each group of my butterfly plus the
  202. 8:09text under it should be five twelve wide
  203. 8:12and six hundred and twelve
  204. 8:14We got that by adding the Y of the
  205. 8:16butterfly with the Y of the text
  206. 8:18That's how we got six twelve
  207. 8:19So what I would do is go to my constant
  208. 8:22Similarly we can also check the op create constant is a generator
  209. 8:26You can see it's darker
  210. 8:27So that means if I wanna change its resolution
  211. 8:29from the default two fifty-six by two fifty-six
  212. 8:33I can go to common
  213. 8:34change this resolution like we said to five twelve by six twelve
  214. 8:41Now I also don't want it to have a white background
  215. 8:44so what I'll do is go to constant
  216. 8:46I'll zero out all of my channels so it's black
  217. 8:49but then I'll also zero out the alpha
  218. 8:52so that it's essentially not only black
  219. 8:54but it's also nothing
  220. 8:55so that if if later there's more advanced compositing happening
  221. 8:58I don't have to worry about having black boxes appear inside of my
  222. 9:01you know canvas
  223. 9:03So now that I have that
  224. 9:04I can start compositing
  225. 9:05and there's a number of different ways we can composite
  226. 9:08and we'll look at all of them
  227. 9:09So the first one
  228. 9:11which in our case is going to be the easiest
  229. 9:12is going to be using an over top
  230. 9:15And over top is great for things that are like this
  231. 9:17that are simple
  232. 9:18where you just kinda wanna put one thing over another
  233. 9:21and do that as quickly and as easily as possible
  234. 9:23And you can see over has two inputs
  235. 9:26and what it does is it takes the first input
  236. 9:28and puts it over the second input
  237. 9:30So in this case
  238. 9:31what I want is to have my canvas as the second input
  239. 9:36'cause that's gonna be my base layer
  240. 9:39and then I wanna put the butterfly on top of it
  241. 9:42Now when you do that
  242. 9:43one thing you're gonna notice first
  243. 9:46five twelve by six twelve resolution is taken by the over
  244. 9:49and that's because our fixed layer parameter inside the
  245. 9:52over top is set to input two
  246. 9:54And this fixed layer parameter on the over top only
  247. 9:57allows you to choose between input one and two
  248. 9:59And essentially what it does is it tells the operator
  249. 10:02which of the inputs to take the resolution from
  250. 10:06which is gonna be the base layer that doesn't move
  251. 10:08It takes the resolution from that
  252. 10:10and then all the other parameters affect the
  253. 10:12other layer that isn't the fixed layer
  254. 10:15So in this case you know
  255. 10:15we have the pre-fit
  256. 10:16which we'll talk about
  257. 10:17as well as some basic transforms
  258. 10:19But in this case
  259. 10:20we actually want the fixed layer to be two
  260. 10:22which is the default
  261. 10:23That way it takes the resolution from our canvas
  262. 10:27But then you'll see that our butterfly is getting stretched
  263. 10:30because by default the pre-fit overlay is set to fill
  264. 10:34And what the pre-fit overlay is
  265. 10:36is it basically gives you a bunch of options
  266. 10:39for how to take the first input that's getting over onto the second input
  267. 10:44and if they're a different resolution
  268. 10:46what to do about that discrepancy
  269. 10:48So we can see here by default is fill
  270. 10:50So it takes my five twelve by five twelve
  271. 10:53and actually stretches it to five twelve by six twelve
  272. 10:57We could do things like fit horizontally
  273. 10:59fit vertically
  274. 11:00You know there's a couple of different fits
  275. 11:01You're better off reading the wiki on those
  276. 11:03But what we actually want is native resolution
  277. 11:06We don't want our butterfly to be stretched
  278. 11:08We just want it to be centered and at its own correct resolution
  279. 11:12So when we set it to native resolution
  280. 11:14that's what it does
  281. 11:14You can see it it's not stretched
  282. 11:16And then we have a couple of different options here
  283. 11:18for how we want to justify that texture onto the bigger background
  284. 11:22'Cause right now by default
  285. 11:24it's gonna be center
  286. 11:24center on the X and Y
  287. 11:26So what I'm gonna do first is maybe justify vertical
  288. 11:30and set at the top
  289. 11:32This will keep it at its native resolution
  290. 11:34but essentially line it up with the top edge
  291. 11:37And that way I'll have room underneath to composite my text
  292. 11:41The rest of these options we don't really need yet
  293. 11:43so we'll take a look at those in a moment
  294. 11:45when we start doing our text
  295. 11:47So now that I have this butterfly on my background
  296. 11:51I wanna take this texture and composite my text over it
  297. 11:56So what I could do is make another over top
  298. 12:00connect this as my second input
  299. 12:03'cause this is gonna be the base layer that
  300. 12:04the text is gonna go on top of
  301. 12:07grab the output of my butterfly text Connect it to the top layer
  302. 12:12and you can see the defaults in this case were like previously
  303. 12:15and they stretch our text terribly to
  304. 12:19to try and fill it for us
  305. 12:21So what we're gonna do is first make sure
  306. 12:22the fixed layer is set to input two
  307. 12:24which is what we want
  308. 12:25and we can confirm that by middle clicking and checking the size again
  309. 12:30We wanna set the pre-fit overlay to native resolution
  310. 12:32that way our text isn't getting
  311. 12:34uh you know resized and
  312. 12:36and going all crazy
  313. 12:38But this time instead of
  314. 12:41you know justifying to the top or center
  315. 12:43I'm actually gonna justify vertically to the bottom
  316. 12:46But in my eyes
  317. 12:47this is still too close to the bottom
  318. 12:48I wanna take it from the bottom
  319. 12:50and just push it up a little bit
  320. 12:51So what I can do is actually use the
  321. 12:53translate parameters that are very helpful here to
  322. 12:55take this text that's justified to the bottom
  323. 12:58and then just offset it up a little bit
  324. 13:01Now in most cases by default
  325. 13:03translate and transforms and all those kinds of operations on tops
  326. 13:09you'll see an F here on the right side
  327. 13:11And anywhere where you have a parameter
  328. 13:14and then on the right side is a
  329. 13:15little F like this with an arrow
  330. 13:17what this does is it indicates the units that are being used
  331. 13:21for that parameter
  332. 13:23So in this case
  333. 13:24F being the default is fraction
  334. 13:26That means if we wanted to move
  335. 13:28uh this butterfly text up a little bit
  336. 13:30we would actually be moving between zero and one
  337. 13:33so we'd wanna move in small increments
  338. 13:36because zero being the bottom and one being the top
  339. 13:39But in most cases
  340. 13:40I think many people actually wanna set this to pixels
  341. 13:43'cause this way
  342. 13:44our units are now in pixels
  343. 13:45so instead of being from zero to one
  344. 13:47they would be in this case
  345. 13:48from zero to six twelve to get to the top
  346. 13:51So if I wanted to bump this upwards by twenty-five pixels
  347. 13:54now I can go to my translate Y
  348. 13:57type twenty-five
  349. 13:58and now it my butterfly text goes up twenty-five pixels
  350. 14:02So I think that's the workflow that most people want
  351. 14:04but a lot of people don't know that you can change those
  352. 14:08uh units very easily
  353. 14:11So with that said
  354. 14:11that's basically our first unit of butterfly
  355. 14:14So we'll do the same thing with our second unit
  356. 14:17and I'll do it manually again just
  357. 14:19so that you kinda get the hang of it
  358. 14:20We're gonna make an over
  359. 14:22We're gonna go back up to where we have our little canvas
  360. 14:26set that as the second input of my over
  361. 14:29set the butterfly as the first input
  362. 14:32Going to the parameters of the over
  363. 14:34I'm gonna set the fixed layer to two
  364. 14:36which it already is
  365. 14:37I want my pre-fit to be native resolution
  366. 14:40and I want to justify vertically to the top
  367. 14:43And then similarly
  368. 14:44I make another over
  369. 14:47where this new butterfly on canvas texture becomes the second input
  370. 14:53and my text becomes the first input
  371. 14:56Now similarly
  372. 14:57pre-fit overlay is gonna go to native resolution
  373. 15:00except this time I'm gonna justify to the bottom
  374. 15:04And then like we did before
  375. 15:05I wanna translate twenty-five pixels upwards
  376. 15:08so I first change my units from fraction to pixels
  377. 15:12and then I type in twenty-five and we get that made
  378. 15:18Now you probably don't wanna be doing this manually all the time
  379. 15:21so what we can do in this case is copy
  380. 15:23and paste it really easily
  381. 15:24What we can do is we can right click
  382. 15:25and drag like we talked about at the beginning
  383. 15:28highlight both of those overs that we wanna copy
  384. 15:31Control C Control V
  385. 15:34We get a copy
  386. 15:35Now don't be afraid by the little mess of wires happening
  387. 15:38It's really easy for us to fix that
  388. 15:40So so far we talked about just some really easy ways of wiring
  389. 15:43and disconnecting wires
  390. 15:44but you can also overwrite wires very easily
  391. 15:47So for example in this over
  392. 15:50I actually want this butterfly and that same canvas texture
  393. 15:54So the canvas texture is okay
  394. 15:55I don't need to change anything about it
  395. 15:56But I want this to be plugged in
  396. 15:58So either what I can do is simply grab this output
  397. 16:03connect it to the input of the over and overwrite it
  398. 16:06or something useful that I can do is I can grab
  399. 16:08for example now that I want to overwrite
  400. 16:09my butterfly two text with butterfly three
  401. 16:12I can click on the output here
  402. 16:14and I can actually go and highlight the wire
  403. 16:17which gives me the connection
  404. 16:18and you can see it goes from the output of this text
  405. 16:22to the input of this over
  406. 16:23And if I click on that
  407. 16:25what it does it essentially overwrites
  408. 16:27wherever that wire was going with the wire that I've selected
  409. 16:31So those two ways are really easy ways to overwrite paths
  410. 16:34especially if you're doing things like this and copying and pasting
  411. 16:37So now essentially we have our three groups
  412. 16:40and now we wanna place them on a
  413. 16:42nineteen twenty by ten eighty canvas to
  414. 16:44basically get it ready for our
  415. 16:46you know our final output
  416. 16:47our our display
  417. 16:48So we would follow a very similar process where
  418. 16:51let's say we would make a constant first
  419. 16:55We would go to the Common tab
  420. 16:57and set the resolution to nineteen twenty by ten eighty
  421. 17:02We'd go to the Constant Parameters page
  422. 17:05turn off the alpha
  423. 17:07and set the color to zero zero zero so that it's black
  424. 17:12Now what we can do is we can use a different composite method
  425. 17:16which is using a composite top
  426. 17:18So I can start typing composite
  427. 17:21hit Enter
  428. 17:22and I get a composite top
  429. 17:23And what you'll notice about composite top
  430. 17:25that's a little bit different than before
  431. 17:27is overtop only had two inputs
  432. 17:29It had you know
  433. 17:30whatever you want to over onto the background
  434. 17:33that you want to over it on
  435. 17:34But composite top has this different looking input
  436. 17:37and you can see even if I compare it to the constant
  437. 17:41composite has like a thicker inlet than other operators
  438. 17:44And what this is called is this is called a multi-input
  439. 17:47which means that you can just keep connecting
  440. 17:49as many different things as you want into this one input
  441. 17:52and the operator will just continue to process all the things that you're inputting
  442. 17:56So in this case
  443. 17:56just to keep it simple and
  444. 17:58and just show you a different way of compositing
  445. 18:00we're gonna do similar
  446. 18:01We're gonna take our constant
  447. 18:04plug it into the composite
  448. 18:06and then we're gonna take our over here
  449. 18:07which is our our unit of butterfly plus text
  450. 18:11plug that in
  451. 18:12And then what you're gonna see is nothing because the default operation is multiply
  452. 18:17And if we were going to multiply this by all black
  453. 18:21it's always gonna be black
  454. 18:22So what we're gonna do is go to the operation and change it
  455. 18:25and what you can see is a ton of different options
  456. 18:28Now in our simple case
  457. 18:29we were using over
  458. 18:30but you can see the composite tab has all kinds of different Photoshop filters
  459. 18:35uh color dodge darker colors
  460. 18:37uh exclude freeze adds
  461. 18:39a tops all these different things
  462. 18:41We're gonna stick to over
  463. 18:42but just introduce you to the composite top a little
  464. 18:44so I'll switch it to over
  465. 18:46But there's one thing that I have to be careful of right now
  466. 18:48because you can see that the resolution is five twelve by six twelve
  467. 18:53which is not what we want
  468. 18:54because we want this five twelve by
  469. 18:56six twelve to be on top of
  470. 18:58the nineteen twenty by ten eighty
  471. 19:00So in this case
  472. 19:00what I would do is go to the composite
  473. 19:02and there's two options
  474. 19:04We can either go to the transform page
  475. 19:06and change the fixed layer to be fixed layer one
  476. 19:09so I can do that
  477. 19:11And what you'll now see is that this is nineteen twenty by ten eighty
  478. 19:14and by default it's filling
  479. 19:15so it's stretching our butterfly to fill it
  480. 19:18But what I would recommend
  481. 19:19especially if you're just doing simple overs
  482. 19:21is to keep the wiring representative of what's happening
  483. 19:24So I can actually come back to the
  484. 19:27uh a any of the pages of the parameters
  485. 19:28At the bottom we'll see this little area
  486. 19:30It says input op
  487. 19:32It has all the names of the inputs
  488. 19:34so we can see constant two is the first thing that gets plugged in
  489. 19:37Over two is the second thing that gets plugged in
  490. 19:39And then we can either click these buttons on the
  491. 19:42the X's
  492. 19:42which will actually unhook them
  493. 19:45or we can use these arrows to rearrange them
  494. 19:47So if I click this arrow
  495. 19:48what you'll see is they've now switched
  496. 19:50This is now the first input and constant two is now the second input
  497. 19:54which I think is a cleaner way of working
  498. 19:56because we really do wanna take this over this
  499. 20:00So now if I go back to my composite
  500. 20:04what we can do is go to the transform
  501. 20:05and we have very similar options that we did with the over
  502. 20:08We're gonna change our pre-fit overlay to native resolution
  503. 20:12And then what I wanna do here is
  504. 20:13actually move this over to the left s
  505. 20:16and then put the second butterfly in the middle
  506. 20:18and then move the third butterfly to the right
  507. 20:20Now like we said before
  508. 20:22maybe we don't know how far we wanna go
  509. 20:25but what I can do is use the translate
  510. 20:27I can middle click and drag
  511. 20:29and let's go by maybe zero point one
  512. 20:33And I'm just gonna keep going till I think it's about right
  513. 20:36I think zero point three in the negative direction
  514. 20:38on the X feels right to me
  515. 20:40I can put another one here
  516. 20:41and then I can do positive point three on my third
  517. 20:45So now that I have that composite
  518. 20:47we can still use it very similarly to what we did for the over
  519. 20:50So I'll make another composite
  520. 20:52and then what I'll do is I know it's
  521. 20:54going to be this second butterfly unit
  522. 20:57plug that in over the result of my previous one
  523. 21:01So now we have to be careful in this case
  524. 21:02because before what we were doing was each butterfly unit needed a clean canvas
  525. 21:08so we would always take the output of our constant
  526. 21:10and plug it into the over
  527. 21:12But in this case
  528. 21:13we're trying to we're making a composite chain
  529. 21:15so we want the results to keep adding on top of each other
  530. 21:17We want the clean canvas to get one butterfly
  531. 21:20Then on top of that one
  532. 21:21we wanna add the second butterfly and then finally the third butterfly
  533. 21:24So that's why we use this output from the composite
  534. 21:26instead of our kinda canvas that we did previously
  535. 21:31Now similarly in our composite
  536. 21:33the default is set to multiply
  537. 21:35so let's actually change this to over
  538. 21:38And you can see it's stretching again
  539. 21:40so we're gonna go to the transform
  540. 21:42We're gonna go to the pre-fit overlay
  541. 21:43set that to native resolution
  542. 21:46and we can see this being center should be fine for our purposes
  543. 21:50So the final thing I'm gonna do is make one more composite top
  544. 21:55And very similarly
  545. 21:56this is gonna be our third butterfly overed onto our
  546. 22:03already kind of canvas that we've built with two butterflies
  547. 22:07And similarly
  548. 22:07we're gonna change multiply to over
  549. 22:10We're gonna go to the transform
  550. 22:12change the pre-fit overlay to native res
  551. 22:15And then like I was saying before
  552. 22:16we can probably just translate this over to zero point three
  553. 22:20because our other one is negative zero point three to the left
  554. 22:24We can move this one point three to the right
  555. 22:26which will give us a balance and equal distance from the center
  556. 22:29So with that even just doing these simple things
  557. 22:32you know we're all in the same operator family
  558. 22:33We'll start animating stuff shortly
  559. 22:36You're starting to understand the
  560. 22:37the workflow of compositing
  561. 22:39working with some parameters
  562. 22:40using the value ladder kinda in real life
  563. 22:43And then at the end of the day
  564. 22:44we get to this nice little nineteen twenty
  565. 22:46by ten eighty canvas with a couple butterflies
  566. 22:48and a bit of text
  567. 22:50Now there's two more things that we should talk about when
  568. 22:52when working with TouchDesigner networks
  569. 22:55The first is that you always wanna put always
  570. 22:58always always
  571. 22:59If you don't do this
  572. 23:01please do this
  573. 23:03There's no I can't even say anything else
  574. 23:05You should always do this
  575. 23:06is put a null operator after you've reached a big checkpoint in your network
  576. 23:11And the checkpoint can be as big or as small as you like
  577. 23:15You know what would have been nice maybe is me putting nulls
  578. 23:18after each one of these butterflies
  579. 23:20But in this case
  580. 23:21I'm just putting a null at the end here
  581. 23:23And there's a couple reasons for this
  582. 23:25The null operators
  583. 23:26and every family has one
  584. 23:27not just tops
  585. 23:29they don't do anything
  586. 23:30but they serve as very useful checkpoints once you start making more
  587. 23:33and more complicated projects
  588. 23:35Because as you'll see
  589. 23:36once we start using chops and other things
  590. 23:38once we start moving data around the network and it's not just
  591. 23:41you know linear lines uh
  592. 23:43wires kinda going left to right
  593. 23:46we wanna have the ability to go
  594. 23:47and insert operators into the chain without having to redo a bunch of references
  595. 23:52and scripting and code
  596. 23:54And the only way that's possible is to have things referencing your nulls
  597. 23:59because those are the checkpoints
  598. 24:00And then what happens is
  599. 24:00let's say all of a sudden somebody says
  600. 24:03Hey can you just change that one thing
  601. 24:04make it a little darker
  602. 24:05What I can do is go in between these two operators
  603. 24:08right click hit Insert
  604. 24:10and say maybe add a level top
  605. 24:13And then you know
  606. 24:14I could I could change whatever I want without affecting
  607. 24:17what all of the other project was looking at
  608. 24:20Otherwise what I would have to do is
  609. 24:21if I didn't add this null
  610. 24:24what would happen was all of the project would be looking
  611. 24:26for an operator named Comp3
  612. 24:28but then if I had to add a level after it
  613. 24:32then I would have to go to all of my network and say
  614. 24:34Oh well sorry
  615. 24:35I changed
  616. 24:35Instead of looking at Comp3
  617. 24:37start looking at level one because that's what you should be looking at
  618. 24:40So the null operators are extremely important in really preventing refactoring
  619. 24:45which is what programmers call it
  620. 24:47when they have to go through
  621. 24:48and change a bunch of the infrastructure of the code for
  622. 24:51for really no reason at all other than name changes and maybe restructuring things
  623. 24:55So you should always add a null
  624. 24:58Now the final thing we're gonna look at with
  625. 24:59this is just a quick little trick with TOPs
  626. 25:02is you'll see we have this little blue ball at the bottom
  627. 25:05and we already talked about the plus sign
  628. 25:07The plus sign gives us access to the
  629. 25:09to the viewer
  630. 25:10But what we're gonna do is start looking at flags
  631. 25:12and what the different flags do
  632. 25:13And flags are all represented by little colored balls
  633. 25:16and each family has a different set of flags
  634. 25:20So TOPs have something called the display flag
  635. 25:22and you'll see by default it's off
  636. 25:24What happens when you turn it on though
  637. 25:26is that it actually sets the texture that's inside of
  638. 25:30this operator to be the background of your network
  639. 25:34And the nice thing is you can do this with
  640. 25:35as many operators as you want
  641. 25:38and it just keeps kinda dynamically arranging them and placing them as the background
  642. 25:42So if you ever needed to work on something
  643. 25:44and you wanted to see the output
  644. 25:46you could do something like this where you
  645. 25:47you turn on the display flag
  646. 25:49then you can say Oh
  647. 25:50well maybe I don't like
  648. 25:52you know the color red
  649. 25:55You know maybe yellow is better
  650. 25:57And you can kinda s get that visual feedback immediately
  651. 26:00without having to like zoom into one operator
  652. 26:02go over to the other
  653. 26:03make the change come back
  654. 26:04zoom in
  655. 26:05We're always trying to build good workflows
  656. 26:08So with that said
  657. 26:09this should be a
  658. 26:10a nice and easy introduction to TOPs
  659. 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.