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

[johncusack]

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][0], coordinate[i][1]);
  }
  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);
}

[kfrajer]

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:

https://forum.processing.org/one/topic/circle-gradient.html

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:

• https://forum.processing.org/two/discussion/23886/masking-a-shape-with-another-shape
• How to create a clipping mask that preserves transparency?

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);
  createGradient(0, 0, width/2, 
    color(225), 
    color(5));
}

void createGradient (float x, 
  float y, 
  float radius, 
  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 a=radius;
  float b=1.2*radius;
  
  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++) {

    float ratio=i/radius;
    color mainColor=lerpColor(c1, c2, ratio);    
    color gradc=color(red(mainColor), green(mainColor), blue(mainColor), 2*ratio*255);
    stroke(gradc);
    //circle(cx, cy, i*2);    //Use strokeWeight(2);
    ellipse(cx,cy,i*2,i*2*1.2);  //Use strokeWeight(5);    
  }


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

[hamoid]

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