Range Mapping

[00:00:00]
>> Here we have some SVG that creates these two eyes but it could be creating anything and you can see it here. And we have some CSS to set where these eyes are pointing to. And reasonable values would be 75 to say roughly 25. But these values don't really make sense.

[00:00:24]
We can't remember how do we make the eyes look right? I have no idea I would have to fiddle and see that it's actually 75. So we could abstract it away with a variable. Say look. That goes from zero to one. Let's set it 2.5 for now. And then, We can specify a calc expression to transform this variable.

[00:00:55]
We have zero to one, we want to transform it to 25 to 75. How would we do that? So, by trial and error, we could probably figure out, that we could have this look variable, it goes from zero to one. So the part that actually changes our minimum is 25 pixels.

[00:01:19]
And then it goes up to 75. So we won't look to be multiplied by 50 So that it gives us the entire range And we can see that this now works, it goes from zero to one And even though I'm using SVG here, this point has nothing to do with SVG.

[00:01:44]
What I want to show you is how you can use this kind of range mapping to transform a range of values to a different range of values. And it's actually the same formula pretty much that we've seen earlier. Remember how we had the value that was multiplied by the value we wanted to get as a result if the value was 1.

[00:02:13]
And then one minus the value multiplied by what we wanted to get when the value was zero. So it turns out that actually this very same formula works for getting the entire range in between. And this is essentially the interpolation formula. Note that it's not necessary that min is smaller than max.

[00:02:34]
Min could actually be larger than max if the value we want to get when our property is one is actually smaller than the value we want to get when our property is zero.