Fitting images and adding a border to textures

- So let's try it with some different images. What do we get if we have a different starting image? Again, the reason I actually started with the picture of me isn't because I'm vain. It's mainly because I felt like this gave us a kind of good example of where we can see, where faces and necks and t-shirts going. But what happens if we try with something a bit more abstract to begin with? So let's go into our assets, let's find the assets, and I'm gonna take three other images and see how they look.

So I'm just gonna drag these in, and we have those images in there as well. So here, I've got my bluebell, my clouds, and some flowers. Again, all of these pictures, taken by me just on my iPhone, nothing special about them whatsoever. Now what I can do is just quickly put in my flowers one and start that as the feedback loop. But then I need to reset my feedback loop to begin with. And what we get is something that looks like this. Again, it's given us a very different outcome because of the way that our start image is being worked.

So if I want to play around with the displacement or the noises, that might get me something that looks completely different. Let's try clouds. So in here, gonna put in our feedback and press pulse. And again, this is gonna give us something that looks completely different every single time. Again, let's try bluebells. So this could look again completely different. And again, these are all done based on a phone picture that I took.

You know, I just wanted to get something that was quick and the easy to use that isn't something that's super complex or super set up to actually use. Now one thing that you might have is your image might be really, really large. And if you don't, if you haven't paid for TouchDesigner, you might be wondering, how do I stop it, kind of complaining. Now what we can use here is something called fit. So I'm gonna add something between all of these four images and my feedback loop to begin with.

So I'm just gonna press shift, select these, and move them over. I've got my feedback loop as well. Move that back over there. And between these four and my feedback loop, I'm gonna add in on tab. I'm gonna use something called fit. I wanna fit my image to a certain size. So here, I'm gonna take my portrait, let's say. And what we can see here is my image is in a certain size now.

It has some kind of alpha on each side as well, but I don't really want that. I kind of want it to be a set size. So on my common tab, I'm gonna make it a custom resolution of 900 by 1200. And that just gets rid of these edges because they're all this kind of three, four resolution. And I can pass this into my feedback loop now. So this will just stop any complaints. And also, if I had different size images, this will just automatically make it work by default.

I just need to start my feedback loop every single time. Now, one other thing that we can do with fit, which is really nice, is we might wanna add a border on some of this stuff. So if I want to take this in, and let's add on my feedback loop a pulse. What happens if I want a white border on this, for instance? Well, I can do that using something like fit. So I'm gonna go over here where I've got my null. Actually, should we use something else? Yeah, let's use something else.

Let's use over instead. I want this image to be over a white background. So let's use that instead. So I'm gonna go here. I'm gonna click tab and let's find over. So the over top places input one over input two. It says down there at the bottom. So I'm gonna put this in, and I'm gonna take my null, and I'm gonna drag this into over, currently complaining because input one is there, but input two is not there.

So how do I go about adding a white texture? Now I could go into Figma or Photoshop to do this, but instead, again, it's built into TouchDesigner. So tab, and I'm gonna find constant, constant texture. I want my constant texture to be white because I want a white border. And what I can do is drag this into here. Now what you might notice is this hasn't worked instantly because I need to set some things up. So if I click on over right now, there's a few things I can actually change.

So the fixed layer is constant. I want this to be the fixed background. But I also wanna have this fill be kind of a fit vertical because the image is vertical. So you can see here that we've added these kind of edges. It's a little bit too big. I want some at the top as well. So maybe let's add some scale. Let's make it 90% that one, 0.9 in both directions, to give us this white background. But you may notice an issue.

If I start this feedback loop again, feedback pulse. And if I actually turn on my over rather than null, you might notice this looks really pixelated. And that's because this constant, if we go to its common tab, has a really small resolution. Now what I want to do is make this the final resolution. So my initial image was 900 by 1200, but I might wanna make this final output something like 1280. So to do this, I'm gonna change this resolution to 1280 by 1280.

And this is a lot more, well, pixelated, no, less pixelated now. So it's more pixels. So here, if I click on feedback loop and go here, we have our image, which has been distorted with a white background now.