Color Interpolation with mix

[00:00:00]
>> Okay, so this is not exactly but we're learning a little bit more about some of these circles and how to draw circles in a shader. One other thing we'd like to do here is maybe instead of using black and white, we would like to introduce some color.

[00:00:18]
And in order to do that, we can use another built in function called mix. So, what we're gonna do is we already have a color uniform here. We're gonna say we want it to be the red color, or the pink color, whatever the color is of our cube that we wanna define down in JavaScript.

[00:00:37]
We're gonna use that color, where all the black is, and then we're gonna modulate the color towards some other color where all the weight is. So, down here once we define our mask, we're going to create a new vec three. Let's call it fragColor just like this. We're going to say the fragColor is equal to mix.

[00:00:59]
Whatever color you want to replace the black with, so let's say we're going to use color, which is the uniform. And then the next one is whatever the circle color should be, let's say, just leave it as white for now. And then we're going to use the mask value to interpolate from the first parameter to the second parameter.

[00:01:19]
And I'll explain that in just a second. But for now we can try putting this value in to the frag color, the final frag color. And one of the things you might see is just pure white. And that's probably because the color in JavaScript might just be pure white.

[00:01:33]
So I'm gonna change this to a different color, tomato, or pink or red. And so what this is doing is it's saying I want to mix from this first parameter, which is the the color in JavaScript. And I want to interpolate or I wanna switch the value towards this second parameter which is white, based on this value here.

[00:02:01]
So, when this value is zero, it's gonna use the first parameter. When this value is 1, it's gonna use the second parameter which is white. That's why I can't see anything. When this value is exactly in between 0 and 1, it's going to use some sort of blended version between the color in between pure white.

[00:02:21]
And so this is called interpolation, or linear interpolation actually is what it's called. So we're interpolating from A to B using the mask value. Because the mask value is also between zero and the mask value is zero. When we're outside or inside of the circle depending on whether we have it inverted or not.

[00:02:38]
And then it's one, on the other side.