Determining the function of a radial gradient fill with midpoint

Question

Recently I have been trying to create a shader that imitates a shader within Affinity Photo. It is used in the radial gradient fill and essentially you set your endpoint colors and then set the midpoint to a percent.

What is interesting here is that with a midpoint set to 0 everything is not just one color. Same with 100. So it does not appear to be a trivial function.

I exported some images of this gradient at percent of 0%, 50% and 100% and graphed the red pixel values from the center pixel going to the end. Below are the results.

Unfortunately even after seeing it graphed I am unable to determine the f(x,a) where a goes from 0-100 that would recreate this graph in order to replicate the shader. Any tips that might get me closer to this formula?

Answer 1

It seems to be just a scalar Bezier function to me, where the second coefficient is determined by $a$

$$(1-x)^2 + a 2 (1-x) x,$$

here $a \in [0, 1]$ is a normalized percentage. This gets you pretty close to the function that is graphed, but the function will not be as flat for $a = 0$ and $a = 1$. I suspect the function is of a higher degree:

$$(1-x)^3 + a 3(1-x)^2 x + a 3(1-x) x^2$$

or even

$$(1-x)^4 + a 4(1-x)^3 x + a 6(1-x)^2 x^2 + a 4 (1-x) x^3$$

With increasing degree comes increased flatness (dragging out the colour of the midpoint). However, these higher order function are not exactly straight at $a = 0.5$. Using the coefficients $\frac{2}{3}$ $\frac{1}{3}$ in the cubic equation will get you a straight line for the cubic version

$$(1-x)^3 + \frac{2}{3} 3(1-x)^2 x + \frac{1}{3} 3(1-x) x^2.$$

For the cubic version you can create two additional functions

$$q(a) = 0.975 \cdot 2 (1-x) x + x^2$$ $$r(a) = 0.025 \cdot 2 (1-x) x + x^2$$

and then replace the second and fourth coefficents in the quartic function with these

$$(1-x)^4 + q(a) 4(1-x)^3 x + a 6(1-x)^2 x^2 + r(a) 4 (1-x) x^3$$

this will preserve flatness at extremes and (approximate) linearity at $a=0.5$. You can view it here: https://www.desmos.com/calculator/hwj7jyozv9