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

**URL:** <https://discourse.processing.org/t/make-overlapping-objects-use-transparency-to-blend-colours-like-a-venn-diagram/32930>\
**Category:** Coding Questions\
**Created:** [October 19, 2021, 12:20pm UTC](https://discourse.processing.org/t/make-overlapping-objects-use-transparency-to-blend-colours-like-a-venn-diagram/32930 "2021-10-19T12:20:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![GoodJuJu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goodjuju/32/14504_2.png) [@GoodJuJu](https://discourse.processing.org/u/GoodJuJu)\
**Post date:** [October 19, 2021, 12:20pm UTC](https://discourse.processing.org/t/make-overlapping-objects-use-transparency-to-blend-colours-like-a-venn-diagram/32930/1 "2021-10-19T12:20:18Z")

</div>

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?

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/55e35c0bde4b6c705034967672f5e97a53ded454.png)

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/45069834e438bd14ea916352d67531b2093d607b.png)

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/86460100378d2514c49b76c4f2977cdc28e30dbd.png)

Thanks

---

<div class="post-metadata">

**Author:** ![GoodJuJu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goodjuju/32/14504_2.png) [@GoodJuJu](https://discourse.processing.org/u/GoodJuJu)\
**Post date:** [October 19, 2021, 12:43pm UTC](https://discourse.processing.org/t/make-overlapping-objects-use-transparency-to-blend-colours-like-a-venn-diagram/32930/2 "2021-10-19T12:43:49Z")

</div>

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

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![MiguelSanches](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miguelsanches/32/11172_2.png) [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)\
**Post date:** [October 19, 2021, 3:00pm UTC](https://discourse.processing.org/t/make-overlapping-objects-use-transparency-to-blend-colours-like-a-venn-diagram/32930/3 "2021-10-19T15:00:13Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![GoodJuJu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/goodjuju/32/14504_2.png) [@GoodJuJu](https://discourse.processing.org/u/GoodJuJu)\
**Post date:** [October 19, 2021, 3:16pm UTC](https://discourse.processing.org/t/make-overlapping-objects-use-transparency-to-blend-colours-like-a-venn-diagram/32930/4 "2021-10-19T15:16:22Z")

</div>

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.

```auto
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?!?

---

<div class="post-metadata">

**Author:** ![MiguelSanches](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miguelsanches/32/11172_2.png) [@MiguelSanches](https://discourse.processing.org/u/MiguelSanches)\
**Post date:** [October 19, 2021, 3:20pm UTC](https://discourse.processing.org/t/make-overlapping-objects-use-transparency-to-blend-colours-like-a-venn-diagram/32930/5 "2021-10-19T15:20:45Z")

</div>

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…