Calculating internal color values between known color points (bilinear interpolation?)

Question

This seems like a pretty elementary math/graphics question, but for some reason I can't seem to wrap my head around it.

What I've got is four line segments, outlining a quad. Each vertex on each line segment has a known color value. For simplicity, let's assume that each line segment has 100 vertices (aka 100 known color points). An example might look something like this:

What I need to do is, render a solid quad with every internal pixel colored, based on the colors of the points on the outline. The most obvious way to do this (without specifying a vertex for every 100*100 color point) would be to first generate a 100x100 bitmap with each interpolated color value, then apply this as a texture to the quad. I'm just having difficulty figuring out how to calculate those internal color values.

It seems like it would be a matter of bilinear interpolation, but since I'm not trying to find values within four known corner points but at the intersection of a "+" of known color points, I keep getting confused. My math is a bit rusty :P

As an example, how might I approach calculating the color value of the point at (50,50) - in the middle of the quad - with known color points at (0,50), (50,0), (50,100), and (100,50)? Is this even bilinear interpolation, or is it something else entirely?

Thanks in advance!

Answer 1

This looks like a boundary value problem with Dirichet conditions (that is, the values are specified at the boundary). You can't solve this using bilinear interpolation because it will usually turn out (if you have more than four input points), that the pixels adjacent to your edge pixels won't have a color continuous with their immediate neighbor.

The main thing you need to solve this is an equation that's reasonably smooth and that always gives a color value close to it's neighbor at the boundary, and there are multiple options. The obvious thing to use is Laplace's equation, which is basically like pinning a rubber sheet to the value of each color channel at the boundary and then letting it relax. Solving Laplace's isn't trivial because you need to simulate the rubber sheet for each new set of boundary conditions, but it's very common, so you could look for solvers or examples in almost any language.