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.

Showing toggling of effect

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.

Results graphed

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?


1 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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.