[SOLVED] Having a visual problem with overlapping ellipses

To get back to your initial project, the way to go is to draw your track on a PGraphic.

The white part is then draw on top of the PGraphic but never on it.

Here a code illustrating it:

int posX, posY;
int prevX, prevY;
int velX, velY;
int size;
PGraphics back;

void setup() {
  fullScreen();
  background(20);
  
  noStroke();
  fill(255);
  
  back = createGraphics(width, height);
  
  posX = 20;
  posY = 20;
  prevX = posX - 1;
  prevY = posY - 1;
  velX = 1;
  velY = 1;
  size = 30;
}  

void draw() {
  // Draw on the graphic
  back.beginDraw();
  back.fill(100);
  back.noStroke();
  back.ellipse(prevX, prevY, size, size);
  back.endDraw();
  
  // Draw the leading shape on top of the PGraphics
  background(20);
  image(back, 0, 0);
  ellipse(posX, posY, size, size);
  
  //Change position
  prevX = posX;
  prevY = posY;
  posX += velX;
  posY += velY;
}

void mousePressed() {
  exit(); 
}
1 Like