For a client I needed a way to draw a gradient in realtime generated from four points, on a mobile phone. To produce an image like this, where the four gradient points can be moved in realtime:

I wanted to implement this using a shader, but after googling for a while I couldn’t find an existing implementation.

The problem is that I have the desired colours at four points, and need to calculate the colour at any other arbitrary point.

So we have three simultaneous equations (vectors in bold):

The key to solving this is to reduce the number of freedoms by setting .

Solving for gives us:

And solving for and :

so:

Defining:

Lets us now rewrite as:

Which written out for x and y is:

Now we have to consider the various different cases. If then we have:

Likewise if then we have:

Otherwise we are safe to divide by and so:

Which can be solved with the quadratic formula when A is not zero: (Note that only the positive solution makes physical sense for us, and we can assume )

and when A is zero (or, for computational rounding purposes, close to zero):

# Math Summary

We can determine and with:

# Implementation as a shader:

This can be implemented as a shader as following: (The following can be run directly on https://www.shadertoy.com for example)

void mainImage( out vec4 fragColor, in vec2 fragCoord ) { //Example colors. In practise these would be passed in // as parameters vec4 color0 = vec4(0.918, 0.824, 0.573, 1.0); // EAD292 vec4 color1 = vec4(0.494, 0.694, 0.659, 1.0); // 7EB1A8 vec4 color2 = vec4(0.992, 0.671, 0.537, 1.0); // FDAB89 vec4 color3 = vec4(0.859, 0.047, 0.212, 1.0); // DB0C36 vec2 uv = fragCoord.xy / iResolution.xy; //Example coordinates. In practise these would be passed in // as parameters vec2 P0 = vec2(0.31,0.3); vec2 P1 = vec2(0.7,0.32); vec2 P2 = vec2(0.28,0.71); vec2 P3 = vec2(0.72,0.75); vec2 Q = P0 - P2; vec2 R = P1 - P0; vec2 S = R + P2 - P3; vec2 T = P0 - uv; float u; float t; if(Q.x == 0.0 &amp;&amp; S.x == 0.0) { u = -T.x/R.x; t = (T.y + u*R.y) / (Q.y + u*S.y); } else if(Q.y == 0.0 &amp;&amp; S.y == 0.0) { u = -T.y/R.y; t = (T.x + u*R.x) / (Q.x + u*S.x); } else { float A = S.x * R.y - R.x * S.y; float B = S.x * T.y - T.x * S.y + Q.x*R.y - R.x*Q.y; float C = Q.x * T.y - T.x * Q.y; // Solve Au^2 + Bu + C = 0 if(abs(A) < 0.0001) u = -C/B; else u = (-B+sqrt(B*B-4.0*A*C))/(2.0*A); t = (T.y + u*R.y) / (Q.y + u*S.y); } u = clamp(u,0.0,1.0); t = clamp(t,0.0,1.0); // These two lines smooth out t and u to avoid visual 'lines' at the boundaries. They can be removed to improve performance at the cost of graphics quality. t = smoothstep(0.0, 1.0, t); u = smoothstep(0.0, 1.0, u); vec4 colorA = mix(color0,color1,u); vec4 colorB = mix(color2,color3,u); fragColor = mix(colorA, colorB, t); }

And the same code again, but formatted as a more typical shader and with parameters:

uniform lowp vec4 color0; uniform lowp vec4 color1; uniform lowp vec4 color2; uniform lowp vec4 color3; uniform lowp vec2 p0; uniform lowp vec2 p1; uniform lowp vec2 p2; uniform lowp vec2 p3; varying lowp vec2 coord; void main() { lowp vec2 Q = p0 - p2; lowp vec2 R = p1 - p0; lowp vec2 S = R + p2 - p3; lowp vec2 T = p0 - coord; lowp float u; lowp float t; if(Q.x == 0.0 &amp;&amp; S.x == 0.0) { u = -T.x/R.x; t = (T.y + u*R.y) / (Q.y + u*S.y); } else if(Q.y == 0.0 &amp;&amp; S.y == 0.0) { u = -T.y/R.y; t = (T.x + u*R.x) / (Q.x + u*S.x); } else { float A = S.x * R.y - R.x * S.y; float B = S.x * T.y - T.x * S.y + Q.x*R.y - R.x*Q.y; float C = Q.x * T.y - T.x * Q.y; // Solve Au^2 + Bu + C = 0 if(abs(A) < 0.0001) u = -C/B; else u = (-B+sqrt(B*B-4.0*A*C))/(2.0*A); t = (T.y + u*R.y) / (Q.y + u*S.y); } u = clamp(u,0.0,1.0); t = clamp(t,0.0,1.0); // These two lines smooth out t and u to avoid visual 'lines' at the boundaries. They can be removed to improve performance at the cost of graphics quality. t = smoothstep(0.0, 1.0, t); u = smoothstep(0.0, 1.0, u); lowp vec4 colorA = mix(color0,color1,u); lowp vec4 colorB = mix(color2,color3,u); gl_FragColor = mix(colorA, colorB, t); }

# Result

On the left is the result using smoothstep to smooth t and u, and on the right is the result without it. Although the non-linear smoothstep is computationally-expensive and a hack, I wasn’t happy with the visual lines that resulted in not using it.