Question

Given:

A point P, circle 1 and circle 2’s positions and radii

What is:

The equation for T, the ‘mix level’ between color 1 and 2 (a value between 0 to 1)

Many radial gradient equations only apply to concentric circles or circles that share a position. I’m looking for something that matches the image below, created using Quartz (Core Graphics). I am writing a GLSL shader, but I need to understand the math first.

Answer 1

If this is in 2D, then you can write the parameters of the circle that your point lies on as:

x3=T*x1+(1-T)*x2
y3=T*y1+(1-T)*y2
r3=T*r1+(1-T)*r2

EDIT: Of course, that circle can be represented as:

(x3-xP)^2+(y3-yP)^2=r3^2

You can substitute the first 3 equations into the last (and remember that (xP, yP) is your point) to get 1 equation with only T as a variable that is quadratic in T, so it is easy to solve for T. Doing so gives us:

T=(-r2*(r1-r2)+(x1-x2)*(x2-xP)+(y1-y2)(y2-yP)
    {+-}sqrt(r2^2*((x1-xP)^2+(y1-yP)^2)-2*r1*r2*((x1-xP)*(x2-xP)
               +(y1-yP)*(y2-yP))+r1^2*((x2-xP)^2+(y2-yP)^2)
               -(x2*y1-xP*y1-x1*y2+xP*y2+x1*yP-x2*yP)^2))
 /((r1-r2)^2-(x1-x2)^2-(y1-y2)^2)

I know that that is a bit hard to read, but it is not actually that bad mathematically. It is just addition, multiplication, and squaring (which is really just multiplication).