Animating static images with CHOPs - TouchDesigner Tutorial

- [Instructor] In this chapter, we're going to start to bring together a couple of the things we've looked at to build a procedural animation all based from one imported still image, and then, as we move through this course, we're going to use that as a texture on 3D objects later in a more complex scene. So we're going to really be building up from a very basic building block all through a much more complicated system with all of this stuff leveraging the work that we're doing. So we're in our empty project, and the first thing I'm going to do is just go inside here. I'm going to hit Tab, go to my Tops, and type M-O-V. Get a movie file in. Okay, I've got our default banana in there. Click on our plus sign here, go to our desktop. Exercise Files, chapter two, TouchDesigner, textures, shape1. All right, cool, so we have our little hexagon here. And now what we're going to do is I'm going to right-click, and I am going to type C-H-A-N, channel mix, 'cause what I want to do is I want to get rid of the black background, and I want to have this be, just be white on an alpha channel. So what I'm going to do here is it's just kind of a channel remapper. I'm going to go red, one, green, one, blue, one, alpha, one, get rid of the green, get rid of the blue, and get rid of that. Okay, so, we're just doing some simple channel remapping here, just to get rid of the black background and have an alpha channel. And this is going to become clear why we're doing this down the line, 'cause we're going to create a feedback loop that requires this to have an alpha. Okay, so, now, let's do a simple transform. Bring these nodes down, and at the end of the transform, right-click and type, B-L-U, and get a blur. Okay. So this is our basic initial node network. And you can see, I can move these nodes and change their size. By default, they're rectangular, but if we're bringing in a square thing, I'm just going to square this guy up a little bit. All right. So, now what we want to do is I'm going to build a procedural channel that we're going to use to animate the transform and the blur of this object. So what I'm going to do is I'm going to type Tab, go over to my chops here, and type wave. Now, wave is a very useful chop we use all the time that gives us different waveform functions, sine, gaussian, triangle, and all these different kind of waveforms. What we're going to do here is we're going to do a ramp. And what I want to do is I just want to create a channel that just goes from zero to one, and have that just loop. So, what I'm going to do is under the channel length, I'm going to change the end to six, and I'm going to go under wave, and I'm going to change the period to six. And so, instead of having any repetitions, we know that over this period of time, we're just going from zero to one, and repeating. If I middle mouse click here, you can see that we have six seconds here, and then we go from zero to one. And what I want to do is I want to use this same channel to drive different parameters that are going to have different value ranges. So, we're basically just going to rescale, using some math nodes, this zero to one information to drive some different things. Okay, so, first off, let's do this. I'm going to right-click here, and type M-A-T-H, get a math node. And I'll bring that up here. And what we want to do here is I just want to take the value, and you can take and just multiply that value, so I'm going to multiply it by 180, 'cause I'm going to use this as a rotation. And now what we want to do is I want to rename this channel to something, just so it's a little clearer as I actually create my rotation. So I'm going to right-click and type select. And the select chop is a great quick and easy renamer, so I'm going to rename it from chan1 to rotation. And now, just to be super clean and organized, I'm going to right-click here and type N-U, to get a null. And I'll call this rotation. So we have a chop called rotation, within a null node called rotation. So what I can do is I can call that channel from this transform node to have it animate that rotation. So you can see we have a rotate field here that I can manually just turn. You can see the object rotating. Let me set that back to zero. And I'm going to click on this plus sign, and you can see that these plus signs appear when we've rolled over a parameter, and that gives us this larger field here where we can type an expression. So in our rotate field here, we're just going to type a simple expression that's going to allow us to access that channel in this parameter. So I type up, open parenthesis, single quote, rotation, single quote, close parenthesis. That gives me access to the node, and now, to get me the actual channel, now we type a bracket, single quote, rotation, 'cause we had named it that, end quote, and bracket. Okay, so, you can see as I hit return, this dotted line appeared connecting that rotation channel to this transform, and now, if I hit play, so you see we have this rotation channel driving this transform. Really straightforward, and this kind of stuff is really where we start to see the great power of touch, and that we have these different contacts and different kinds of nodes that we can link together in numerous ways. So now, what we're going to do is I'm actually going to take these three nodes and select them, copy and paste them. All right, let me move my wave over here, and let's just give this a little bit more room, let's move all this stuff up a little bit. And now, what we want to do is we want to change the scaling of this object in that same transform node, but we want to have a different range, and we want to rename the channel to a different thing so we can access it directly. So, for scale, what we're going to do, the multiply isn't going to be 180, it is going to be 2.5. And under this select here, we're going to change it from renaming from rotation to scale. And now you can see there are channels named scale, and now, the node that we want to access it from, we don't want it called it rotation1, we want it called scale. So, now, in my transform1, you can see that we have the scale parameter here. I'm going to open that up. And I'm going to do this, copy the same thing. I'm going to type up, but this time, parenthesis, quote, scale, quote, parenthesis, and then, bracket, quote, scale, end quote, end parenthesis. And you can see that it's disproportionately scaling, 'cause we just entered that in the X parameter, not the Y parameter yet. I'm going to select all of that text, copy it, paste it into Y. Okay, so now we have the same source channel being arranged in two different ways and renamed two different ways, and now, driving both the rotation and the scaling of that object. And I'm going to hit the little tab here so we can see what's going on in the background. And actually, no, I want this to go clockwise instead of counterclockwise, so all I need to do there is go up to our rotation chain here and go back to my math, and instead of multiplying it by 180, I'm going to go negative 180. And I'm going to hit play again. And so, now, we have our hexagon rotating clockwise. So, straightforward, really simple animation system, but, this is the seed of the potential to build some really complex and intriguing procedural animation. All right, I'm going to turn off the Display flag here, and we're going to make one more of these chains. So I'm going to copy these three nodes and paste them, and now, what we're going to do is I'm going to change the multiply on this last one here to one, 'cause we want a specific range we want to arrange the zero to one to. So now, I'll go into the Range tab, and I'll say, I want to take zero to one, and rearrange those 15 to zero. So that means when the number is zero, it's going to be 15, and then when it hits up to one, it'll have scaled down to zero. And what we're doing here is we're going to animate the blur. So, under select, I'm going to now rename this blur, and now we have a rotation scale and blur channel, and under scale1 here, I'm going to call this blur. Okay, so, now we have our blur top, and you can see we have our filter size parameter. And so if I scroll in here and change this, you can see that that is controlling the strength of our blur on that node. So, just like we did in the transform top, I'm going to type op, parenthesis, quote, blur, quote, parenthesis, and then, bracket, quote, blur, quote, bracket. All right, open that up, so we can just see everything we just typed. There we go. And we're just accessing the blur node and the blur channel. So, now, we are driving the rotation, scaling, and blurring, all from just this one initial piece of information. And then we can see, this just has it so it starts in a little bit blurrier, and then goes back to its regular state. All right, so, now we have brought in a still image file, and just with a couple nodes and one source channel created a series of animations on this object, by playing with some chops and doing some channel renaming and assigning those channels to parameters via some basic Python expressions. So, next up, what we're going to do is we're going to start to make this animation a little bit more interesting with a feedback loop.