<p>It seems to be just a scalar Bezier function to me, where the second coefficient is determined by <span class="math-container">$a$</span></p>
<p><span class="math-container">$$(1-x)^2 + a 2 (1-x) x,$$</span></p>
<p>here <span class="math-container">$a \in [0, 1]$</span> is a normalized percentage. This gets you pretty close to the function that is graphed, but the function will not be as flat for <span class="math-container">$a = 0$</span> and <span class="math-container">$a = 1$</span>. I suspect the function is of a higher degree:</p>
<p><span class="math-container">$$(1-x)^3 + a 3(1-x)^2 x + a 3(1-x) x^2$$</span></p>
<p>or even</p>
<p><span class="math-container">$$(1-x)^4 + a 4(1-x)^3 x + a 6(1-x)^2 x^2 + a 4 (1-x) x^3$$</span></p>
<p>With increasing degree comes increased flatness (dragging out the colour of the midpoint). However, these higher order function are not exactly straight at <span class="math-container">$a = 0.5$</span>. Using the coefficients <span class="math-container">$\frac{2}{3}$</span> <span class="math-container">$\frac{1}{3}$</span> in the cubic equation will get you a straight line for the cubic version</p>
<p><span class="math-container">$$(1-x)^3 + \frac{2}{3} 3(1-x)^2 x + \frac{1}{3} 3(1-x) x^2.$$</span></p>
<p>For the cubic version you can create two additional functions</p>
<p><span class="math-container">$$q(a) = 0.975 \cdot 2 (1-x) x + x^2$$</span>
<span class="math-container">$$r(a) = 0.025 \cdot 2 (1-x) x + x^2$$</span></p>
<p>and then replace the second and fourth coefficents in the quartic function with these</p>
<p><span class="math-container">$$(1-x)^4 + q(a) 4(1-x)^3 x + a 6(1-x)^2 x^2 + r(a) 4 (1-x) x^3$$</span></p>
<p>this will preserve flatness at extremes and (approximate) linearity at <span class="math-container">$a=0.5$</span>. You can view it here: <a href="https://www.desmos.com/calculator/hwj7jyozv9" rel="nofollow noreferrer">https://www.desmos.com/calculator/hwj7jyozv9</a></p>

CC BY-SA 4.0
2020-12-29T12:24:34.220Z
2021-01-02T12:14:01.880Z
2021-01-02T12:14:01.880Z
Reynolds
<p>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.</p>
<p><a href="https://i.sstatic.net/8tBPH.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/8tBPH.gif" alt="Showing toggling of effect" /></a></p>
<p>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.</p>
<p>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.</p>
<p><a href="https://i.sstatic.net/pyzFY.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/pyzFY.png" alt="Results graphed" /></a></p>
<p>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?</p>

<mathematics><shading><gradient>
Determining the function of a radial gradient fill with midpoint
CalebK
# Determining the function of a radial gradient fill with midpoint

(Asked by: username_0 on 2020-12-29)

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](https://i.sstatic.net/8tBPH.gif)](https://i.sstatic.net/8tBPH.gif)

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](https://i.sstatic.net/pyzFY.png)](https://i.sstatic.net/pyzFY.png)

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?

**Tags:** mathematics, shading, gradient


---

## 1 answers

### Answer by username_1 on 2020-12-29. Score: 2 | Accepted answer

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>


---

