Hi @johncusack Welcome to the forum!
Anything that has to do with gradients is a great fit for shaders, unfortunately writing GLSL is not very beginner friendly. Based on Is there a better way to draw gradient colored ellipse? I wrote a 3 point gradient which might look like this:
PShader gradient;
PShape shp;
int[][] coordinate = {
{0, 150}, {100, 450}, {200, 500}, {150, 750}, {400, 850}, {500, 750}, {450, 450}, {500, 100}, {175, 0}
};
void setup() {
size(600, 1000, P3D);
gradient = new PShader(this, new String[] {
"uniform mat4 transformMatrix;",
"attribute vec4 position;",
"void main() { gl_Position = transformMatrix * position; }"
}, new String[] {
"uniform vec2 posA, posB, posC;",
"uniform vec3 colorA, colorB, colorC;",
"void main() {",
" float dA = 1.0 / (1.0 + distance(posA, gl_FragCoord.xy));",
" float dB = 1.0 / (1.0 + distance(posB, gl_FragCoord.xy));",
" float dC = 1.0 / (1.0 + distance(posC, gl_FragCoord.xy));",
" float dSum = dA + dB + dC;",
" gl_FragColor = vec4((colorA * dA + colorB * dB + colorC * dC)/dSum, 1.0);",
"}"
});
shp = createShape();
shp.beginShape();
for (int[] p : coordinate) {
shp.vertex(p[0], p[1]);
}
shp.endShape(CLOSE);
}
void draw() {
background(40);
translate(50, 50);
noStroke();
shader(gradient); // enable the gradient
shape(shp);
resetShader(); // disable the gradient
}
// configure a random gradient (3 random positions, fixed colors)
void keyPressed() {
gradient.set("posA", random(width), random(height));
gradient.set("posB", random(width), random(height));
gradient.set("posC", random(width), random(height));
gradient.set("colorA", 1.0, 1.0, 0.0); // yellow
gradient.set("colorB", 1.0, 0.0, 0.0); // red
gradient.set("colorC", 0.0, 0.0, 1.0); // blue
}
ps. I think you should definitely pursue your approach using ellipses, as it would be easier to understand and it can work fine. I leave this example here only to inspire people to look into using shaders. They can be very useful sometimes