# Color issue when circles overlap

**URL:** <https://discourse.processing.org/t/color-issue-when-circles-overlap/42867>\
**Category:** Coding Questions\
**Created:** [October 1, 2023, 11:12am UTC](https://discourse.processing.org/t/color-issue-when-circles-overlap/42867 "2023-10-01T11:12:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tomashau](https://avatars.discourse-cdn.com/v4/letter/t/9e8a1a/32.png) [@tomashau](https://discourse.processing.org/u/tomashau)\
**Post date:** [October 1, 2023, 11:12am UTC](https://discourse.processing.org/t/color-issue-when-circles-overlap/42867/1 "2023-10-01T11:12:56Z")

</div>

Hi, I am running into an issue trying to create this effect. I am trying to make new circles for each mousePressed that have the same gradient border. To achieve the orange border I have added an orange stroke, and the white fill so the center of the circles are not solid orange. But here is the issue: As I keep creating new circles, the inside of the existing circles overlap the new circles and takes away from the color. I am left with a transparent orange after creating more circles. What I want is for all new circles to appear in its entirety on top of all the circles underneath, and that the old circles have 0 effect on the color of the new circles. How can I achieve this?  
Thank you in advance!

```auto
ArrayList<Circle> circles;
int circleSize = 100;
int xPos = -circleSize;
int yPos = -circleSize;

void setup(){
  fullScreen();
  background(255);
  circles = new ArrayList<Circle>();
  circles.add(new Circle(-10000, -10000, 0, circleSize));
}

void draw(){  
   for (int i = 0; i < circles.size(); i++) { 
    Circle circle = circles.get(i);
    circle.display();
   }
}

void mousePressed(){
  circles.add(new Circle(mouseX, mouseY, 0, circleSize));
}

class Circle {
  float x;
  float y;
  float w;
  float w2;

  Circle(float tempX, float tempY, float tempW, float tempW2) {
    x = tempX;
    y = tempY;
    w = tempW;
    w2 = tempW2;
  }
  
  void display() {
    strokeWeight(40);
    stroke(220,125,0,10);
    fill(255);
    ellipse(x,y,w,w);
    w = w + 1;
  }

}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 1, 2023, 12:47pm UTC](https://discourse.processing.org/t/color-issue-when-circles-overlap/42867/2 "2023-10-01T12:47:43Z")

</div>

Hello @tomashau,

This created the effect in the image:

```auto
size(200, 200);
background(0);

int x=100, y=100, w=80;

strokeWeight(5);
  for(int r=w, s=255; r<w+40; r = r+5, s-=25) // Increase r (radius) and decrease s (stroke)
    {
    noFill();
    stroke(255, 255, 0, s);
    circle(x, y, r);
    }

```

Note:

- background(0) was used at start of draw.
- P3D was used and speeded things up.
- P2D was very slow compared to P3D.
- You may want to consider removing circles from ArrayList once they are out of the sketch window.
- noFill() was used in my efforts.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/b/9bb9336559625f8ab4717d4617aeca0efcb01870.png)

Integrated with your code:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/6/f621aef8bcce43899c830e2954b151221fe9e3fb.png)

This was a quick first pass at this and just one way of doing it.  
I leave the rest with you…

`:)`