Gradient Color Query

In the HTML canvas class you can create a linear or radial color gradient. Suppose we wanted to make a color-picker that queries the value of a gradient at a specific pixel. It turns out that there is no built-in function that does this for you. One trick is to apply the gradient to a hidden canvas and then query the pixel color value using the getImageData() function. An implementation can be found here.

Now in Paper, we can use the same trick to query the Color of a Gradient at a Point. However, since Paper gives us syntax to operate on 2D points, we can just as easily compute the color value. The following links show three different implementations.


A version that computes the color value but makes a few assumptions about the gradient, namely that the stops are in sorted order by offset and that there is no highlight. The algorithm is simpler than the robust analog.

A robust version that computes the color value and makes no assumptions about the gradient.

A robust version that uses the hidden canvas trick.

No comments:

Post a Comment