# HELP. How can I intersect three colors from these ellipses?

Hello! I need some help with this sketch. I’m trying to draw this shape filled with three different colors, in tree different vertex. I’m thinking I need to draw three ellipses of different colors, then they intersect with each other to create different shades/gradients between them. But ellipses need to have gradual transparency from center to the edges (100%-0%).
How can i do that? Or there are different method to achieve this result?
(Yes, I need to do a mask after that, but I don’t know how to do that with this shape with many vertices).
I’m so noob, sorry! ``````int[][] coordinate = {
{0, 150}, {100, 450}, {200, 500}, {150, 750}, {400, 850}, {500, 750}, {450, 450}, {500, 100}, {175, 0}
};
int dim;
int eldim = 790;

void setup() {
size(800, 475);
ellipseMode(CENTER);
}

void draw() {
background(#ffffff);

scale(0.5); //"MAP"
fill(#000000);
translate(50, 50);
noStroke();
beginShape();
for (int i = 0; i < coordinate.length; i++) {
vertex(coordinate[i], coordinate[i]);
}
endShape(CLOSE);

noFill(); //EllIPSES (x3)
strokeWeight(3);
stroke(#FF0000);
ellipse(0, 150, eldim, eldim);

noFill();
strokeWeight(3);
stroke(#FF0000);
ellipse(450, 450, eldim, eldim);

noFill();
strokeWeight(3);
stroke(#FF0000);
ellipse(150, 750, eldim, eldim);
}
``````

Can you try generating concentric ellipses outlines and see if this works for your case? The trick would be to draw them with `noFill` and only `stroke()` set to the color at the level of transparency based on how close it is to the geometrical center of the ellipse. There is this previous attempt with circles:

My attempt below. There is some “ringing” but this would be a good start.

For the mask task, you need to use a separate PGraphics to draw your closed “irregular shape” outline with PShape and then apply it to your color sketch. If you have any issues, please share your attempt. Check this post in addition to the docs:

Kf

``````//REFERENCE: https://courses.lumenlearning.com/boundless-algebra/chapter/the-circle-and-the-ellipse/

void setup() {
size(800, 800);
background(200);
smooth(8);

noLoop();
}

void draw() {
background(200);
translate(width/2, height/2);
color(225),
color(5));
}

float y,
color c1,
color c2) {

//1=((x-h)/a)^2 +((y-k)/b)^2
//y = k + b * sqrt(  1-((x-h)/a)^2 ) where hk,k is the center of the ellipse

float cx=x; //Ellipse center
float cy=y; //Ellipse center

noFill();
strokeWeight(5); // 2 for Circle, 5 for Ellipse

for (int i=0; i<radius; i++) {

color mainColor=lerpColor(c1, c2, ratio);
//circle(cx, cy, i*2);    //Use strokeWeight(2);
ellipse(cx,cy,i*2,i*2*1.2);  //Use strokeWeight(5);
}

// hack anti-aliasing
noFill();
stroke(150);
strokeWeight(2);
ellipse(x, y, width, width*1.2);  //Outline border
}
``````

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);

"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, p);
}
shp.endShape(CLOSE);
}

void draw() {
background(40);
translate(50, 50);
noStroke();
shape(shp);
}

// configure a random gradient (3 random positions, fixed colors)
void keyPressed() {
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 