Introducing Color

[00:00:00]
>> Mathew DesLauriers: And then the next thing I'm gonna do is, I'm gonna introduce color. And we can introduce color in the same way we've been doing before, but we kinda wanna get it a bit more advanced just with another module. And so we're gonna require a module called glsl hsl to our gb.

[00:00:18]
And so, the syntax, let's write this out, hsl2rgb and it's the same as above, except the module itself is just this. We don't need to do any slashes. And, you're gonna notice an error, that's cuz we have to install the module. So if I search on npm, ust googling npm glsl-hsl2rgb, you'll see the module.

[00:00:50]
I'll leave that code there. So this is the code that we need here. And to fix that error, we have to just npm install, or npmi, glsl-hsl2rgb. And that's the command, we run that command. And now lastly, we have these these two utilities, we're using this one, we haven't started using this one yet.

[00:01:18]
And what we wanna do using this this noise value, we wanna try and create different colors. And so what we'll do is we'll manipulate the hue, cuz h itself stand for hue saturation lightness. And so we'll manipulate the hugh based on this noise I'll do. So we're gonna create a new color, and we will use this hsl2rgb, and we're gonna give it three parameters.

[00:01:47]
The first parameter is between 0 and 1. And it's hue, so we can just set them all to .5 for now, just so we can visualize what it'll look like. Once we've set that, we actually have to change the output color. And generally, what I like to do before I get too far into the code, is just test things out.

[00:02:10]
There's no way to console log in a shader, and there's no way to use debugger. So you have to test by actually printing a colors as pixels. So that's what we're doing here, just making sure it works. By setting this color somewhere between 0 and 1 for the first parameter, we're changing the hue.

[00:02:28]
Using 0.5 for this parameter is the saturation. Using 0.5 for this parameter is the lightness. And when it's 50% lightness and saturation, it's a nice pastel color. So if we just change this number here, the first parameter, we're gonna end up with different results. So, you can try putting in n, you're going to get some wonky, disco color.

[00:02:51]
But we wanna make it a bit more polished and a bit more clean. And so, one thing to remember is that noise values go from negative one to one. So we have to turn this into, zeroo to one space.
>> Mathew DesLauriers: And then the next thing we can do, or instead of doing that, we'll just do this.

[00:03:15]
We'll leave it at n for now, and we'll choose a specific hue that we want as our base hue. So we'll say 0.2, let's say, which is 20% of 360 degrees of a hue. I don't know what color that is but we'll find out in a second. And then, we're gonna to add n, but we're going to make n very small.

[00:03:37]
So we're going to add just a little bit of n, maybe even like, 0.2 or 0.5 or something. And what you're gonna start to see as you change these numbers, is you're gonna start to see the larger. This value is the larger, our offset is, the more the hue spectrum is gonna change.

[00:03:54]
It's gonna become more of a rainbow and disco/ And the smaller it is the more it's just gonna be a single hue. So we can use 0.2 for now, and then we can change this value to be a different base value. So if we use something higher, it's gonna be more blue, or more purple.

[00:04:12]
Maybe a bit closer to this reference that we are looking at with the color mask. And at this point, we're pretty close, I think, to getting these kind of images that we wanted. But the only thing we have to do now is bring back our masking. So we're gonna do that with the code that I commented out.

[00:04:35]
>> Mathew DesLauriers: And this is just the Alpha.
>> Mathew DesLauriers: So actually, right now, I didn't intend to make it this soft but, because we're using smooth step and because our values between a smooth step are very large, it's creating this really nice, soft image which is actually kind of cool.

[00:04:55]
But to make it a bit more like a reference, we need to use values that are very close together. So for example, 0.25 and 0.245, or 0.235, something that's close to the first trailer. And the last thing we can do is just continue to tweak some of these settings, so I can increase the frequency of noise, or decrease the frequency, we can maybe.

[00:05:22]
Reduce the time so by multiplying time by some low number, we slow down this animation, or bulk by multiplying it by some high number. We speed it up, and make it more frequent. Those are just things to keep in mind. And now we're pretty close to this sort of graphic that we were looking at earlier, and trying to recreate that encode with shaders.