Adding displacement to a texture

- So we're gonna start working on our project. We don't wanna make jelly beans, but instead we actually wanna make some actual art. Now the project that we're gonna be working on as part of this is called alla prima, and it's actually a bit of a pun. So we worked on this idea of saying let's manipulate some textures, but what should we call it? We kind of had this idea of it being almost like an oil painting. And then we also found that alla prima, which is a kind of technique in art, also means first attempt as well.

So this is our first attempt at making something and it happens to be using something that looks a bit like an oil painting. Now the first thing we're gonna do is set up our kind of workspace. We've just set up the layout, but you might notice up here that it's not actually saved. Now I've just quickly on my desktop, I've made a project for all my art unsurprisingly called art. I've also got some assets in here as well.

So we're gonna be basically saving our project into art and then using some assets from here as well. So first thing we're gonna do is actually save this project. So I'm gonna save, and where do I wanna save? So it's gonna save on my desktop. I'm gonna put it in art. And I'm gonna call this one 01-alla-prima just somewhere to kind of keep this for now. Now we don't want to actually make jelly beans in here, so I'm actually just gonna zoom out a little bit, select everything, and I can do that with shift and drag, and then I'm just gonna get rid of everything completely.

Now the reason for doing this is we don't really wanna use jelly beans. We actually wanna use our own textures in here. Now as part of our kind of assets that I've given you, we've tried to make this so that you can use any image that you want. Now I've taken some images and they're in here, and we can just look at them very quickly as gallery, and we can see that this is just some images that I've taken on my phone and they're very easy for you to take images on your phone and manipulate them which is kind of what we wanna do.

We wanna take these images and manipulate them. Now I'm gonna just take, first of all, a picture of me. So I'm just gonna take this picture of me and I'm gonna drag it into my project. And there we go. Now what I have is essentially a texture. This texture is an image of me, and I can see if this works by just toggling this display. And there I am in full on the left-hand side as well. But what we wanna do is actually play around with this portrait.

Now if you are on the free version of this, you might get a little error in the corner saying there's a kind of, your image might be too big. You can kind of ignore this for now. It's just a problem when you actually come to export it. We'll talk about how to fix that a little bit later. But how do we go about actually manipulating things? Now we wanna have this kind of idea of an oil painting back in this kind of way. So what we wanna do is make something look actually less realistic.

We wanna take the initial input, which is a picture of me, and essentially try to like make it worse in a way. Not make it worse, but make it more artistic, actually make it a bit more softer and actually kind of work with the actual pixels going on in this picture over here. So how do we go about doing this? Now one thing you might have seen when we actually set up the project was this idea called displace which was essentially a kind of operator.

It was in our jelly beans. We took our jelly beans in, we did some wavy stuff to it, and we displaced things. So we're gonna do the same idea here. So how do I go about actually taking my portrait and making something happen with it? What we're gonna do is we're gonna use a displacement. Now how do we go about adding another box in here? We've added one box by dragging in an image, but how do we go about adding any other boxes? Now what you can do is a few different options.

There's a plus button up here, which will add an operator. There's right click and Add Operator here. But the quick way is to press tab. Tab will open up this OP Create Dialog which basically has a list of everything that we can actually use in TouchDesigner. This is why TouchDesigner is really good 'cause it has a lot of things that are particularly made for generative art. For us, what we wanna do is go through this list and be like, hmm, what can we actually do here? What can we actually play around with on our portrait or our textures or anything that we're trying to do here? Now we're gonna be mainly focusing on this purple tab, TOP.

TOP stands for Texture Operators. We'll talk about other tabs a little bit later, but we're mainly gonna stick with this purple tab for now. If I press tab again, I'll go to the green one, and I'll keep going around until I get back to the TOP one. So just make sure you're on TOP. You can also click it as well. What we're gonna pick is down here in D, Displace. Here we go. And what will happen is I'll get this outline which I can basically click.

So this has now added a operator, a Texture Operator as well, a TOP. So you'll hear me say TOP a lot because it's a texture operator. This is a texture. It's basically a lot of pixels in a 2D kind of way, so across and up and down. And what we wanna do is change our texture to do something else. So I wanna connect these up. So the first thing I'm gonna do is take my output here.

So I'm gonna go into my side bit here on portrait, and I'm gonna drag into the first input on here. Now what you might notice here is there's this big cross 'cause it doesn't know what to displace by. Now what we're gonna be using in here is something called a noise. Now we can make a texture from scratch using something like an image or we can let TouchDesigner do something instead. So what we're gonna do here is add a noise TOP. A noise TOP will basically add some kind of like distortion and make it look a little bit more random.

So to do this, we're gonna press tab again. This OP Create Dialog will pop up and we have a list of everything that we could potentially use. And what I'm gonna pick here is Noise. I can also start typing as well if I know what I'm writing very quickly. So I can type in N-O-I and that will say noise. I can press enter and this will pop up. So now I have my new texture which isn't made by an image on my phone.

It's actually made by TouchDesigner. So we have something that looks like this. What we're gonna do next is, again, we're gonna take our input on this kind of side here. Our output is gonna go to the second input here. So we're gonna take this texture and displace it by this noise. So I'm gonna take this in and drag it into the second one. And what we'll get all of a sudden is we get this displacement being displaced. What you might notice here is this image now is using the same colors as what is in my portrait but it's moving and shifting the pixels by this noise.

So you'll notice that almost like this matches up. Notice how this noise pattern here, this kind of black area here is kind of over here as well. So wherever it's kind of black has the same kind of pattern as what is going on in my left-hand side here. So it's kind of almost like a match, a like for like version of what is happening over here. But this is way too much. It's way too aggressive like this is too much displacement. So how do we go about actually changing that? So what we can do is select on displace, we can click on here.

And what we should see in the sidebar over here in the parameters is how it's changed. There's a few things we can do in here. We can change the horizontal source, the vertical source, which we'll come to in a minute, where it's actually displacing from. We want it to be displacing from the middle which kind of makes sense. But the next one, the fourth one is Displace Weight. How strong is this displacement? At the moment, it's one by one, one across and one up and down, but this is too strong.

So we're gonna reduce it down a little bit. So we're gonna click in this first one where it says Displace Weight, and we're gonna change this to maybe like 10 times less, 0.1, and we'll do it in both directions, 0.1 there and 0.1 there. And what you might notice now is we have this portrait which has still been displaced by this noise but it's not as aggressive as before. So just by adding three different texture operators, our original image, a displacement one, and what to displace it with, we get a brand new image from scratch.