Shaders Example: Shape & Form

[00:00:00]
>> Mathew DesLauriers: And so, the next thing we'll do, maybe is, why don't we just introduce a bit of color? So I'm gonna change this to say color, and I'm gonna create a new variable called color, rather than putting it all in a single line. And maybe what we'll do, is we'll say, we can start to play around here with some math, sometimes, it's kind of fun.

[00:00:27]
So we can, I'm sort of just riffing here, but we can say sign. This is like Math.sign in JavaScript. We can say sin of time, and we can just try a few different variables. This might give us an odd effect where it goes to pure white, and then, it sort of fades down to black.

[00:00:50]
And what's happening is that we're putting time which is a, in seconds, between zero and how ever many seconds this loop is running for. And we're doing sin with time. And that's producing a number between negative one and one. So maybe what we'll do, is we'll try and create a colorful gradient, instead of just making a black and white gradient.

[00:01:12]
So maybe what I'll do, is I'll go back to using vuv.x to create a gradient. And the next thing we're gonna do is maybe interpolate between one color and another. And so, what we can do is create colorA and let's make that red. And then, we can create colorB, and let's make that green, or blue, or whatever you'd like.

[00:01:48]
Just by setting a different component, so we're using 100, 010. And here, instead of doing this line with the gradient, maybe what we can do is we can say, I want to mix from colorA to colorB based on this gradient value. And we can introduce this new key word, called mix, and it's a function that's built into GLSL.

[00:02:18]
And the way it works, is you specify the A and B that you wanna mix between. And then, you specify the value between 0 and 1. And if you remember back to earlier in our lesson, we were talking about lurp. And that was at the very start when we were trying to create that margin.

[00:02:35]
And the way it works, is that you pass in a minimum, and you pass in a maximum. And then, you pass in some value between 0 and 1. And if you pass in a value that's 0, it's gonna be the minimum, one is gonna be the maximum. Anything in between there, and it's gonna slowly interpolate between those two.

[00:02:50]
And that's exactly what's happening with mix. Mix is actually just another way of saying lerp in the case of shaders. It's the exact same function down to the code. So now, I mean, you could try tweaking these things. Maybe make it less green or less red, still, we're not really there yet.

[00:03:11]
So maybe what we'll do, is maybe we'll try and mask this as a circle. Because remember our branding that we're sort of going for here, is a circle, and it's got a white background. And all of the colors are happening inside of that circle. So to do that, we're gonna have to think about how do we say, for certain pixels, we want it to be white.

[00:03:40]
And for everything within a circle, we want it to be colorful. And so, what we'll do, is we will try and find the center coordinate, and then, try and see based on how far away from the center the current pixel is. That's how we're gonna end up changing it, whether it's colorful, or whether it's not colorful.

[00:04:03]
And so, this is where it starts to get a little bit more, you have to wrap your head around the idea that shaders, you can't just say I want the third pixel from the left, you can't just say I want the top left of the screen to be blue.

[00:04:19]
You have to just act on being blind to other pixel. You can't operate them on neighboring pixels and stuffs like that. So what we'll do, is we'll have a vec2 called center, and we do vUv- 0.5. Another way of writing this would be to say vec2.5.5, the way I just wrote that is the same no matter what, so it's basically taking the vUv, the UV coordinates, and subtracting 0.5, and now, what we have is this center value is the exact center of the screen, and now, what we wanna find is how far away from the center of the screen is the current pixel.

[00:05:07]
So what we're gonna do, is we're gonna say is dist is a float which is a number, decimal value number, and we're gonna say length (center). And so far, the visuals aren't changing, and that's because our pixel color hasn't changed. So we have to actually change that. So one thing we can try and do is, instead of using one here, we can set the alpha to dist.

[00:05:35]
And it's hard to see on the screen, but what you're gonna have. It's this black hole effect where all the colors are gonna be on the outer rim, and it's gonna go black as you get closer and closer to the center. And what's actually happening, is that the value in the very center, the pixel in the very center, is saying the distance from the center is 0, because it's at the very center.

[00:06:00]
And the pixels that are far away from the center, they're gonna be closer to 1, or closer to some large value like 1. And it's gonna slowly increase. This length function here is just saying what is the, this is where it starts to get a bit more like math-y, and this is something that, at first, when I was learning this stuff, I didn't understand the implications of what length means, and that's okay if you don't.

[00:06:27]
But if you're familiar with vectors or anything like that, length is just the magnitude of a vector. But again, it's maybe not something that you'll understand the first time you look at it, especially, if you aren't so familiar with vectors and that kind of math. And that's okay, don't worry about it too much.

[00:06:45]
But what we'll do, is we'll say that if the distance is greater than, let's say, 0.5, let's make our alpha one, and if the distance is less than 0.5, let's make our alpha 0. So we're just gonna use a here. Just like in JavaScript, it's the same thing.

[00:07:11]
And you'll notice now that we have this big circle, we can make the circle smaller by just making that 0.5 less, like a 0.25.
>> Mathew DesLauriers: You'll also notice that it's a bit like an ellipse, rather than a circle. And what we'll do in a second, is we're gonna fix that.

[00:07:32]
But before we fix that, we have to actually try and make this a bit more like the primary branding that we had before, cuz remember, it's colorful on the inside, and it's white on the outside. So I'm gonna just flip these numbers.
>> Mathew DesLauriers: And so, now, we have something a little bit closer.

[00:07:52]
The colors are a bit weird and ugly. It's a little bit like a squashed circle rather than a perfect circle, and the background is black, and we need the background to be white. But we're getting there, we're getting closer. The first thing I'm gonna do with this code, is I'm gonna fix this circle, so that it's not squashed depending on the aspect ratio.

[00:08:12]
And so, to do that, we will pass in a uniform from JavaScript. So this is a good opportunity to understand how do we pass in values from JavaScript. So first, let's say, what we need to do to fix this aspect ratio correction stuff, is we need to correct the coordinates based on the width and height of the screen, as it currently is.

[00:08:36]
And we need to correct it based on aspect ratio, which we're gonna use float for. So it's just gonna be a single value, gonna call it aspect. I'm gonna scroll down. Once we've added this uniform float aspect. I'm gonna scroll down and I'm gonna go to my uniforms, and you'll see already, we're passing down time, and so, that's how we had that weird effect earlier.

[00:08:58]
We're gonna just pass down one more thing called aspect, and the way we pass it down, is using a function and returning a value. And the function, this object here that's being destructured, is the same props that we've been using all day from Canvas Sketch. So we have things like width and height.

[00:09:17]
We have time. We have play head. We have all those other props that comes with Canvas Sketch. And so, the way we're gonna do this is we're gonna take the props from the Canvas Sketch, we're gonna take the current width and the current height, divide the current width by the current height, and we send that value to the shader.

[00:09:35]
So it just looks like that, make sure that this property is called aspect. And then, up here, we actually have to use this aspect value, and to do that, we're going to squeeze the center by that aspect ratio. And what's gonna end up happening, is that we're shrinking the width of the the circle here to be a bit better when we change the size of our image or our browser, in our case.