Linear Interpolation

[00:00:00]
>> Mathew DesLauriers: Now we've got a grid, it's still not very interesting. We want to give it a bit of margin, this is the next thing I tend to do in all of my artworks is to space things out a bit, just to give the artwork a bit more breathing room and we're gonna install the module.

[00:00:14]
And this is sort of our way of introducing some MPM modules. In this case, we're gonna install one called canvas-sketch-util, and it looks like that. And sorry, I should write "npm install canvas-sketch-util". And you have to run this command from the same folder that you have all your other JavaScript stuff going on in.

[00:00:38]
>> Mathew DesLauriers: So if you run that command, it should just install the module within our folder. And once it's installed, it'll look just like that. Once it's installed, you can require it up here, just like we've required canvas sketch. And we're gonna require a specific function called lerping, canvas sketch util.

[00:01:01]
And the way it looks is like this. So, you start with lerping or destructuring a single function from the utility library and we're installing canvas-sketch-util/math. If we go to our docs, here in our repo, you'll see canvas-sketch-util. You can learn all about the actual utilities here and you can see the documentation for each of these utilities.

[00:01:24]
And right now, we're requiring math, which is a specific library within that. Has all sorts of functions here, lerp and all these, fract and signs and stuff like that. We'll just talk about lerp. Lerp is a function for linear interpolation and the way it works is you pass in a minimum and a maximum bound.

[00:01:46]
So here it is on the left, I've got the documentation. You pass in a minimum and a maximum and then you pass in a T value and usually the T value that you pass in is between 0 and 1. And what's gonna happen is if you pass in 0 as the T value you're gonna get back the same value as min.

[00:02:04]
And if you pass in 1 as a t value, you're gonna get back the same value as max. That's just a number between whatever your minimum and maximum is. And if you pass in 0.5 as your T value, you're gonna get a number that's equally spaced between min and max, kind of the middle of the two.

[00:02:21]
And that might be a bit complicated, yeah, but once we see it happening, hopefully it will make more sense. So I'm just gonna go back to this code, and once I've required this function, I'm gonna scroll down. And instead of just saying, I want my grid to go from the very top left of the screen to the very bottom right of the screen using U times width and V times height, what I want to do is I want to interpolate from somewhere close to the top left of the screen to somewhere close to the bottom right of the screen.

[00:02:55]
So that I have a bit of a margin around the edge of our image here. And so to do that, I'm gonna define a margin. And you can define it wherever you like, I'm just gonna define it here. Let's say it's 100 for now. It's just a number.

[00:03:11]
We can define it after we create our grid. And here, we're gonna replace the u * width with lerp. We're gonna give it the minimum value, which is the top left of our surface, with the margin included. So. One margin across. And then we're gonna do width- margin and then U as the T parameter.

[00:03:33]
And that's gonna just make it, so that all the circles go from our minimum to our maximum. And it's hard to see right now but if I make this margin really big, all of a sudden we're gonna see that instead of it going from 0 to width, it's going from 400 to width minus 400.

[00:03:50]
We do the same thing on the y-axis.
>> Mathew DesLauriers: And all of a sudden, we're gonna have this grid, which is a bit more margined. So that's something I like to do a lot, is bring everything in using the lerp function.