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?

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