Color issue when circles overlap

Processing Coding Questions
1

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!

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;
  }

}
2

Hello @tomashau,

This created the effect in the image:

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

Integrated with your code:

image
image602×639 16.7 KB

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

:)