Gradients 1: The Problem of Gradients

When I learned math and geometry in school, I always got the impression that it was invented by the Greeks hundreds of years old. So when I got to university, I was fascinated by the fact that many mathematical concepts that we were taught in schools were actually fairly recent discoveries. Then, as I studied things even more, I discovered that there are some pretty basic geometry operations that we still don't know how to do. It boggled my mind that researchers were still trying to work out how certain key building blocks of computer graphics should work. One of those areas is gradients.

Gradients sound like they should be simple. How do we shade in a shape? If we assign colours to the different points on a polygon, how do we colour in the inside of that polygon?

For triangles, we can use barycentric coordinates. If we want to colour a point in a triangle, we draw lines from the corners of the triangle to this point. That creates different areas. The ratio of the sizes of these areas gives us the ratio we should mix the colours at the corners. The bigger the area, the more of the colour at the opposite corner should be used. This technique for colouring triangles is so simple and so elegant that modern computer hardware is designed specifically to draw these gradient-shaded triangles.

Just moving to four sided shapes immediately causes problems. You would think that you could simply cut a four-sided shape into two triangles, and then use barycentric coordinates to colour the two triangles. Unfortunately, this leads to inconsistent results. Depending on how you cut a four-sided shape into triangles, you get different colourings. Below, in the center square, the middle of the square is a mix of red and blue with no yellow nor green: a purple. In the square on the right, the middle of the square is a mix of green and yellow with no red nor blue: a light-green.

Once you move to five-sided shapes or shapes with curvy sides, things become even more complicated. Gradients should be a basic building block for 2d graphics, but in most computer programs only support simple gradients like linear gradients where one side of a shape is one colour that smoothly blends to another colour on the other side of the shape. So that is the gradient problem that still needs solving: how do we colour a multi-sided shape with different colours at its corners?