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

**URL:** <https://discourse.processing.org/t/help-how-can-i-intersect-three-colors-from-these-ellipses/22500>\
**Category:** Coding Questions\
**Created:** [July 9, 2020, 11:08am UTC](https://discourse.processing.org/t/help-how-can-i-intersect-three-colors-from-these-ellipses/22500 "2020-07-09T11:08:47Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [July 10, 2020, 1:17pm UTC](https://discourse.processing.org/t/help-how-can-i-intersect-three-colors-from-these-ellipses/22500/4 "2020-07-10T13:17:49Z")

</div>

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?](https://discourse.processing.org/t/is-there-a-better-way-to-draw-gradient-colored-ellipse/22220/4) I wrote a 3 point gradient which might look like this:

```auto
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
}

```

 ![2020-07-10-150248_600x1000_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/48fca81ddb615c420457a11bab7835c38c4ae48a.png)

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 🙂

---

_[View the full topic](https://discourse.processing.org/t/help-how-can-i-intersect-three-colors-from-these-ellipses/22500)._