09 - TouchDesigner User Interface - TouchDesigner Tutorial: Beginner Crash Course — Transcript

Full transcript

1. 0:01So the final thing we're gonna look at before
2. 0:03diving into actually making some stuff inside of TouchDesigner
3. 0:06is the user interface itself
4. 0:09So the user interface might be overwhelming at the beginning
5. 0:13but it's actually only a few small components that are pretty simple to use
6. 0:17and in reality most of them
7. 0:19you won't even need to use them
8. 0:21So if we start taking a look at our user interface
9. 0:23we already talked about kind of this middle area here
10. 0:26which is our network editor
11. 0:28which is where we work most of the time
12. 0:30If we come to the kind of bottom region here
13. 0:33we have our transport controls
14. 0:36And to be honest
15. 0:38these aren't used very often by pros
16. 0:40There are some people who use them in more advanced workflows
17. 0:44But I would highly recommend
18. 0:46if you're coming to TouchDesigner new
19. 0:48and maybe you're coming from a motion graphics background or an animation background
20. 0:52don't see this timeline and think to yourself
21. 0:55Oh I can just use some of the existing workflows I have
22. 0:58and lock a bunch of stuff to the timeline and call it a day
23. 1:01Highly recommend you don't do that
24. 1:03Uh if you go onto my blog
25. 1:05you'll you'll find tons of different articles I've written about
26. 1:08you know how to get away from timeline working
27. 1:10and thinking more kind of as systems and thinking about your networks more efficiently
28. 1:15Because if you start trying to lock stuff to the timeline
29. 1:18you're probably gonna be programming suboptimally
30. 1:20and you'll probably get stuck more than you will have success
31. 1:24So in this case
32. 1:25this big chunk of the kinda UI
33. 1:28you probably won't use
34. 1:30The only thing you may use are the pause and play features
35. 1:33which are useful in the case that
36. 1:36you know maybe you have some content
37. 1:38or some kind of process or some generative thing
38. 1:41and while it's running
39. 1:42you just wanna stop it
40. 1:44and then step through it one frame at a time
41. 1:46just so that you can kinda keep track of how it's changing
42. 1:49and get a sense of whether it's working correctly or not
43. 1:52And in that case
44. 1:53you basically just have the pause button
45. 1:54play button and stepping forward
46. 1:57I would highly not recommend stepping backwards
47. 1:59because regardless of what you think about stepping backwards
48. 2:03you can see that even though my timeline increments are going down
49. 2:06my movie is still playing forward
50. 2:09and that's a complicated situation to explain
51. 2:12So that's why I'm telling you
52. 2:14trust me pause play
53. 2:16step forward
54. 2:17For the rest of the timeline
55. 2:19don't worry about it
56. 2:20and don't get too into it
57. 2:22With that said
58. 2:23on the bottom left
59. 2:24we have our timeline settings
60. 2:27One really important feature down here is the FPS
61. 2:30and this sets the target FPS of the project
62. 2:33So you might see up here at the top of the menu
63. 2:36the actual FPS of the network
64. 2:38and if I start doing crazy things
65. 2:39it's sixty it's fifty-nine
66. 2:41You know different things take a little bit of processing power
67. 2:43like just moving around the network
68. 2:45And you can see I was dropping a few frames there
69. 2:47But this number down here at the bottom sets the target
70. 2:50So right now the target is sixty FPS
71. 2:52but I could easily double-click in here to select that value
72. 2:56and set it to thirty
73. 2:58And now all of a sudden my target FPS is thirty instead of sixty
74. 3:02So the first thing you usually do
75. 3:03when you open up a project is just come down here
76. 3:05and set the FPS you want
77. 3:07The rest of the kinda information down here I almost never use
78. 3:12and I only know a few people who maybe do
79. 3:14but again those are for more advanced use cases
80. 3:17So I would start your TouchDesigner kinda path
81. 3:19and journey almost ignoring this bottom section
82. 3:23'Cause if you start relying on this bottom section too much
83. 3:26you're going to get into more trouble than the good it will do you
84. 3:30So with that said
85. 3:31you essentially have this bottom area
86. 3:32which is the timeline area
87. 3:34We have our middle area
88. 3:35which is our network editor and our first pane
89. 3:37and we'll talk about panes in a second
90. 3:40Right along here
91. 3:41we have our path bar that we already talked about
92. 3:43which is also interactive
93. 3:45You know you can click on different parts of the path
94. 3:48go to different elements
95. 3:52Useful to know
96. 3:53but usually not used that much
97. 3:55Normally you're just gonna be actually working in your network editor
98. 3:57and moving around and just maybe keeping track of the path
99. 4:00so you know where you are
100. 4:02We have panes here
101. 4:03which we'll talk about in a moment
102. 4:05And then we kinda just have the menu items which
103. 4:07you know if you go to Edit
104. 4:08Preferences
105. 4:09there's a bunch of preferences you can set
106. 4:11We'll talk about some of the dialogues and some of the help things
107. 4:14uh shortly
108. 4:15But aside from that that's
109. 4:16that's really as a new user
110. 4:19the only things you need to know is that there's
111. 4:20some paths here that you should keep track of
112. 4:23there's some timelines here that you really shouldn't touch other than setting the FPS
113. 4:27and you have your main workspace in the middle
114. 4:29Now as I mentioned
115. 4:31this main workspace is called our network editor
116. 4:34but our network editor is inside of a pane
117. 4:37So we can almost think of this as a modular work area
118. 4:40and right now we have one pane that's displaying one network editor
119. 4:45So let's say you actually had
120. 4:47you know not even let's say
121. 4:48we have in this even template network one network on /project one here
122. 4:54and then if I go inside of this geo one
123. 4:56I have another network here
124. 4:58You know /project one/geo one
125. 5:00I have some operators
126. 5:01And let's say I wanted to work inside of both of them simultaneously
127. 5:04I needed to see both of them for some reason
128. 5:07Or in the case of new users
129. 5:09because we'll see shortly there's a lot of nice drag
130. 5:11and drop functionality that can
131. 5:13that can make getting started easier
132. 5:15we wanna display both networks at the same time
133. 5:18So there's many different ways to do this
134. 5:20The first is that essentially this whole region
135. 5:24starting from above the
136. 5:26this little path bar
137. 5:27is inside of this pane
138. 5:28And if we go to the right
139. 5:30top right side
140. 5:30we'll have a little down arrow that says Pane options
141. 5:34We can click on that
142. 5:36and there's two options that you want: Split Left
143. 5:39and Right and Split Top to Bottom
144. 5:41So if I hit this Split Left to Right
145. 5:44essentially what it does is it splits this whole pane
146. 5:47and gives me two separate workspaces that I can be inside of
147. 5:50You can see if I click
148. 5:51and drag inside of the network of this one
149. 5:53it doesn't affect the right side
150. 5:55Similarly
151. 5:56if on the right side I start looking around
152. 5:58or even do something like go inside
153. 5:59of my geo one-I can have the
154. 6:02right side of my kind of network
155. 6:04editor here inside of Geo one
156. 6:06I can have the left side of my network looking at something else
157. 6:09And you can see here parameter windows start to really get in the way
158. 6:13when you start splitting panes
159. 6:14So maybe what we want to do is have
160. 6:16our mouse over this side of the network
161. 6:18hit P to get rid of our parameter window
162. 6:21And you can see just like this
163. 6:22we can start creating more modular workspaces
164. 6:25So let's say I want to even go further and split this even more
165. 6:31Now you'll see I have two pane options because like I said
166. 6:34this whole area
167. 6:35including the path bar
168. 6:36is inside of the pane
169. 6:37So let's say I want to split this left side top to bottom
170. 6:41I can go to this pane options
171. 6:44click split top to bottom
172. 6:47and now I have you know
173. 6:48these quadrants on the left side
174. 6:51and maybe I can even go up a level here
175. 6:53So I have this you know
176. 6:54this quadrant on the top left
177. 6:56quadrant on the bottom left
178. 6:57They each have their own path bars
179. 6:59Then I have this kind of workspace on
180. 7:01the right side that I can use
181. 7:02It's very flexible how you use your panes
182. 7:06Now we so far have looked at this kind of clicking
183. 7:09and selecting split pane left and right
184. 7:11but there's also very useful shortcuts
185. 7:13The first one you should know is how to close a pane
186. 7:16So let's say I have this right side and I'm
187. 7:18I'm done using it
188. 7:18I just want to close it
189. 7:20What I can do is hit Alt plus Z
190. 7:22inside of that pane with my mouse inside of the background
191. 7:26and you'll see that pane closes
192. 7:28I can do the same
193. 7:28Let's say I'm done working with this bottom half
194. 7:30Alt and Z closes it
195. 7:32and I'm back to just one network
196. 7:36Now let's say you want to use the keyboard shortcuts for splitting them
197. 7:39It's Alt plus the square bracket
198. 7:41So if I do Alt plus left square bracket
199. 7:44it splits it kind of left and right
200. 7:47And if my mouse is inside of this network
201. 7:49and I do Alt slash right square bracket
202. 7:51it'll split it top to bottom
203. 7:53So with these few little shortcuts
204. 7:55it's very easy to kind of just quickly create a customized little modular area
205. 7:59where maybe you're inside of one network on one side
206. 8:02you're inside of another network or
207. 8:04or however you need your networks to be set up for working
208. 8:08Now the nice thing is panes get saved
209. 8:10The pane state itself gets saved in your project
210. 8:13So maybe you have one pane
211. 8:15where you're always working top to bottom in one project
212. 8:18You save that
213. 8:19You want to do another project where maybe it's the opposite
214. 8:22maybe it's just top to bottom
215. 8:24These pane setups are saved inside the project and not application based
216. 8:29Now the nice thing is
217. 8:30if you don't want to kind of create your own pane layout
218. 8:33you can see at the top here pane layouts
219. 8:35there's a few kind of standard ones that you can just kind of click through
220. 8:39and get a
221. 8:39a few kind of template quadrants or kind of halves
222. 8:44uh that you might just want to use on your own
223. 8:45if you didn't want to do the trouble of making the pane split yourself
224. 8:49So panes are very useful
225. 8:50and if you go check out our other video talking about the
226. 8:53um pro tips and tricks
227. 8:55you'll see that there's other kinds of pane layouts that you can use
228. 8:57not just network editors
229. 8:58But for beginners
230. 8:59you're basically always going to be using network editors
231. 9:02So two other things you need to know in the user interface
232. 9:07The first one is how to get help
233. 9:09So I'm going to go back up a network here
234. 9:11and I'm and I'm on my main network
235. 9:14What if I'm in this network
236. 9:17and I'm trying to use a movie file in
237. 9:19but I just don't know how
238. 9:21So if I hit P to open the parameters
239. 9:24what I'll have is a question mark in
240. 9:26the top left portion of the parameters
241. 9:29And you'll see there's actually two question marks
242. 9:31one of them that doesn't have a background
243. 9:33and one of them that has a blue and yellow background
244. 9:35The blue and yellow background is help specific to Python scripting with that operator
245. 9:41So that probably won't be the general usage help
246. 9:44especially if you're watching this as a beginner
247. 9:46You're probably not going to be using that help
248. 9:48as much as you will the left side help
249. 9:54Now if I click that left side help
250. 9:56what you'll see is it takes a moment
251. 9:58but then it immediately opens up my browser
252. 10:01and takes me directly to the wiki page on the derivative wiki
253. 10:05And the the wiki is kind of going to be your main gospel
254. 10:08and codex for kind of getting help
255. 10:10But it takes me right to that movie file in TOPs page
256. 10:13I can read all about it
257. 10:15I can read about its different kind of characteristics
258. 10:17what the different parameters do
259. 10:20So this is really going to be
260. 10:21especially as a beginner
261. 10:22your main source of reference
262. 10:24One thing you should know also
263. 10:26as a beginner is that next to some parameters
264. 10:29you'll see this little kind of
265. 10:32uh plus symbol inside of a box
266. 10:35That means that you can actually click on that
267. 10:37and expand the parameters help to see the different kind of sub-options
268. 10:42So in this case
269. 10:43when I was looking at play mode here
270. 10:45you know if I close this
271. 10:45I'll see play mode specifies the method used to play the movie
272. 10:48There are three options
273. 10:50You know I can confirm there's three options here
274. 10:52but what if I wanted to learn about each one of the three options
275. 10:55I could click on this plus
276. 10:56and all of a sudden I have lock to timeline
277. 10:58It tells me about it
278. 10:59specify index sequential
279. 11:00It tells me about each one of these separate options
280. 11:02So that's an important thing to know about the wiki
281. 11:04as a beginner is that many different parameters will have this plus box to
282. 11:09to reveal more information
283. 11:13Now with that said that's
284. 11:14that's kind of your main go-to way of getting help
285. 11:17The final thing we want to look at with the user interface
286. 11:19which is kind of based on how to get help
287. 11:22is what's called the op snippets or operator snippets
288. 11:25and what these are
289. 11:26are tons and tons of examples of how to use different operators
290. 11:31and kind of little notes on how to use them
291. 11:34So if you want to get to this
292. 11:35you'll go to the top help menu here
293. 11:37and you'll click operator snippets
294. 11:44Once you do that
295. 11:45you'll be greeted with this kind of new floating window
296. 11:49and you'll see that on the top left
297. 11:52you have something that looks very similar to the
298. 11:54op create dialog that we had before
299. 11:56You'll have lists of the operators
300. 11:58So we can say maybe we want to find examples
301. 12:00of how to use a movie file in TOP
302. 12:03Then below that
303. 12:04once you select it
304. 12:05you'll have different examples here
305. 12:07And then each example will have a set of notes
306. 12:10as well as a really easy to use
307. 12:14and really easy to kind of copy and paste
308. 12:16So let's say oh
309. 12:16this is perfect
310. 12:17This is exactly what I wanted to put inside of my network
311. 12:20I could just Control C
312. 12:21copy that close operator snippets
313. 12:24go into my project paste it
314. 12:26and just start immediately using it
315. 12:28So from that kind of usability perspective
316. 12:31operator snippets are an incredible tool
317. 12:33especially for the beginner if you're trying to explore what different operators do
318. 12:37or maybe you're trying to find some more advanced features of an operator
319. 12:40and you don't really quite know how to do it
320. 12:42I highly recommend looking at the op snippets
321. 12:45So with that said
322. 12:46let's start building some stuff in TouchDesigner