Make overlapping objects use transparency to blend colours, like a Venn Diagram

Processing Coding Questions
1

I have created a Venn diagram using Processing, however, I can either make solid RGB colours, or use an alpha value (RGBA) to give the objects transparency, but I wondered if there was an existing function inside Processing to blend the overlapping parts of the objects whilst leaving the non-overlapping parts the original colour?

void setup(){
 size(500,500); 
}

void draw(){
 background(255);
 noStroke();

 fill(255,0,0); // r
 ellipse(width/2, height/3, width/4, height/4);
  fill(0,255,0); // g
 ellipse(width/2.75, height/3, width/4, height/4);
  fill(0,0,255); // b
 ellipse(width/2.25, height/2.25, width/4, height/4);
}

Above code produces 3 solid, overlapping shapes:

image

void setup(){
 size(500,500); 
}

void draw(){
 background(255);
 noStroke();

 fill(255,0,0, 120); // ra
 ellipse(width/2, height/3, width/4, height/4);
  fill(0,255,0, 120); // ga
 ellipse(width/2.75, height/3, width/4, height/4);
  fill(0,0,255,120); // ba
 ellipse(width/2.25, height/2.25, width/4, height/4);
}

Above code produces 3 transparent, overlapping shapes:

image

Is there an existing function I use to make the overlapping objects appear as below?

image
image960×540 45.5 KB

Thanks

2

Following this up, I have found blendMode and wanted to loop through all the modes, but I’m struggling with the enumeration.

void setup(){
 size(500,500);
 
 ArrayList<String> arrlist = new ArrayList<String>();
      arrlist.add("BLEND");
      arrlist.add("DARKEST");
      arrlist.add("LIGHTEST");
      arrlist.add("DIFFERENCE");
      arrlist.add("MULTIPLY");
      arrlist.add("EXCLUSION");
      arrlist.add("REPLACE");
      arrlist.add("OVERLAY");
      arrlist.add("HARD_LIGHT");
      arrlist.add("SOFT_LIGHT");
      arrlist.add("DODGE");
      arrlist.add("BURN");
      arrlist.add("REMOVE");
      arrlist.add("SUBTRACT");     
}

void draw(){
 background(255); // r,g,b
 noStroke();
 fill(0,204,0);
 
 frameRate(5);

      Enumeration<String> e = Collections.enumeration(arrlist);
 
      while(e.hasMoreElements())
      
      blendMode(e);

 fill(255,0,0); // r
 ellipse(width/2, height/3, width/4, height/4);
  fill(0,255,0); // g
 ellipse(width/2.75, height/3, width/4, height/4);
  fill(0,0,255); // b
 ellipse(width/2.25, height/2.25, width/4, height/4);
 
     e.nextElement();
}
3

Hi @GoodJuJu ,

I was just about to post. What you are looking for is the blendMode. The problem is that the background is also added.
Find the example below

void setup(){
 size(500,500); 
 blendMode(ADD);
}

void draw(){
 background(0);
 noStroke();

 fill(255,0,0); // r
 ellipse(width/2, height/3, width/4, height/4);
  fill(0,255,0); // g
 ellipse(width/2.75, height/3, width/4, height/4);
  fill(0,0,255); // b
 ellipse(width/2.25, height/2.25, width/4, height/4);
}
4

Thanks @MiguelSanches for getting back to me, much appreciated.

I changed the frameRate and slowly stepped through all the blendMode(int) modes and it was helpful.

int i = 0;
 
void setup() {
 background(255);
 size(500,500);
 frameRate(1);
 noStroke();
}

void draw(){
i++;
blendMode(i);
println(i);

redraw();

fill(255,0,0); // r
ellipse(width/2, height/3, width/4, height/4);
fill(0,255,0); // g
ellipse(width/2.75, height/3, width/4, height/4);
fill(0,0,255); // b
ellipse(width/2.25, height/2.25, width/4, height/4);

  if (i >= 15) {
    noLoop();
      }
}

I was surprised I didn’t get an ‘index out of bounds’ error when i >= 14 or even 15. I’m no sure how Java handles these issues?!?

5

Nice,

I am not sure how the function is handling out of bounds under the hood but probably does not select any mode if the int value is higher than possible ones…