# \[SOLVED\] Having a visual problem with overlapping ellipses

**URL:** <https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253>\
**Category:** Beginners\
**Created:** [September 4, 2018, 3:48pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253 "2018-09-04T15:48:41Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![VimHax](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vimhax/32/1368_2.png) [@VimHax](https://discourse.processing.org/u/VimHax)\
**Post date:** [September 4, 2018, 3:48pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/1 "2018-09-04T15:48:41Z")

</div>

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

I’m having a issue where I’m trying to cover a circle which is fully white (255) with a circle which is not fully white (100) but I can’t seem to get it covered…

New Sketch -

```auto
size(1000,1000);
noStroke();
fill(255,255,255);
ellipse(500,500,100,100);
noStroke();
fill(100,100,100);
ellipse(500,500,100,100);

```

I did the same thing again with a new sketch and it works flawlessly, so what’s the problem with the original code?

Full Code - (Some of the code is disable due to trying to debug my code!)

```auto
//float CircleX = random(0,width);
//float CircleY = random(0,height);
float CircleX = 25;
float CircleY = 25;
int XPlus = 1;
int YPlus = 1;
float TailX = 40;
float TailY = 40;
float Speed = 0;
float Tail = 40;
float SizeX = 10;
float SizeY = 10;
float BackGround = 50;
float EraseX;
float EraseY;

void setup() {
  //fullScreen();
  background(50);
}  

void draw() {

  // Collision and Boundary Restriction Logic //  

  //if (CircleX>=width-(SizeX/2)) {XPlus=0; CircleX=width-(SizeX/2);}  

  if (CircleX<=0) {XPlus=1; CircleX=0;}

  //if (CircleY>=height-(SizeY/2)) {YPlus=0; CircleY=height-(SizeY/2);}

  if (CircleY<=0) {YPlus=1; CircleY=0;}

  // Collision Reaction Logic // 

  if (XPlus==0) {CircleX=CircleX-Speed;}

  if (XPlus==1) {CircleX=CircleX+Speed;}

  if (YPlus==0) {CircleY=CircleY-Speed;}

  if (YPlus==1) {CircleY=CircleY+Speed;} 
  
  // Tail Logic //
  
  if (XPlus==0) {TailX=Tail;}

  if (XPlus==1) {TailX=-Tail;}

  if (YPlus==0) {TailY=+Tail;}

  if (YPlus==1) {TailY=-Tail;}
  
  // Erase Logic //
  
  if (XPlus==0) {EraseX=CircleX+Speed;}

  if (XPlus==1) {EraseX=CircleX-Speed;}

  if (YPlus==0) {EraseY=CircleY+Speed;}

  if (YPlus==1) {EraseY=CircleY-Speed;}
  
  // Visuals //
  
  noStroke();
  fill(255,255,255);
  ellipse(25,25,25,25);
  noStroke();
  fill(100,100,100);
  ellipse(25,25,25,25);
  
  //noStroke();
  //stroke(255);
  //point(EraseX, EraseY);
 
  // Debugging //
  
  println("--------");
  println(CircleY,"X");
  println(CircleX,"Y");

}

void mousePressed() {
  exit(); 
}`Preformatted text`

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 3:54pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/2 "2018-09-04T15:54:32Z")

</div>

Hi VimHax,

Can you please edit your title to something more explicit?

Also can you format your code? You can do it by clicking the little pen icon on the bottom right of your previous post to edit it. Then select your code and hit the `</>` icon. Don’t forget to also hit `crtl+t` in the processing IDE to indent everything correctly.

Thank you 🙂

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 4:00pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/3 "2018-09-04T16:00:58Z")

</div>

I’m not sure I get your problem correctly.

I think it has to do with the white edge that is still here?

If that’s the case it is normal. With the pixels, you can’t draw a perfect circle. If you had just full black and full white color available, you would be able to draw something that look like a circle but that is really harsh on the side if you look closely.

To avoid that effect, the computer is cheating and he is adding some pixels on the edge that are not fully opaque. Those pixels are there to smooth the edges.

It is called anti-alliasing and here an example:  
 ![pA7uy](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/55ec0a374a35a22e257f3e08d494ed2e172a0b32.png)

That’s what is happening in your case. Since some of the edge pixels have some transparency, you can still see a bit of the white beneath it.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [September 4, 2018, 4:32pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/4 "2018-09-04T16:32:18Z")

</div>

Please add `background(50);` as the first line in `draw()`. I think this should solve your issue.

Kf

---

<div class="post-metadata">

**Author:** ![VimHax](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vimhax/32/1368_2.png) [@VimHax](https://discourse.processing.org/u/VimHax)\
**Post date:** [September 4, 2018, 4:58pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/6 "2018-09-04T16:58:38Z")

</div>

> [@jb4x](#):
>
> Hi VimHax,
> 
> Can you please edit your title to something more explicit?
> 
> Also can you format your code? You can do it by clicking the little pen icon on the bottom right of your previous post to edit it. Then select your code and hit the `</>` icon. Don’t forget to also hit `crtl+t` in the processing IDE to indent everything correctly.
> 
> Thank you 🙂

No problem :D, I edited the code as you said…

> [@jb4x](#):
>
> I’m not sure I get your problem correctly.
> 
> I think it has to do with the white edge that is still here?
> 
> If that’s the case it is normal. With the pixels, you can’t draw a perfect circle. If you had just full black and full white color available, you would be able to draw something that look like a circle but that is really harsh on the side if you look closely.
> 
> To avoid that effect, the computer is cheating and he is adding some pixels on the edge that are not fully opaque. Those pixels are there to smooth the edges.
> 
> It is called anti-alliasing and here an example:  
> ![pA7uy](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/55ec0a374a35a22e257f3e08d494ed2e172a0b32.png)
> 
> That’s what is happening in your case. Since some of the edge pixels have some transparency, you can still see a bit of the white beneath it.

Well I don’t see how the code I did with a different sketch to my project worked perfectly the way I wanted, but it doesn’t work in the project where I want to overlap the circles…

Also yes, the white line surround the circle is what I’m talking about and trying to fix.

> [@kfrajer](#):
>
> Please add `background(50);` as the first line in `draw()` . I think this should solve your issue.
> 
> Kf

Well I changed it and just to make sure I even moved the whole section up but the results didn’t change…

Edited Code -

```auto
//float CircleX = random(0,width);
//float CircleY = random(0,height);
float CircleX = 25;
float CircleY = 25;
int XPlus = 1;
int YPlus = 1;
float TailX = 40;
float TailY = 40;
float Speed = 0;
float Tail = 40;
float SizeX = 10;
float SizeY = 10;
float BackGround = 50;
float EraseX;
float EraseY;

void setup() {
  //fullScreen();
  background(50);
}  

void draw() {

  background(50);
  noStroke();
  fill(255,255,255);
  ellipse(25,25,25,25);
  noStroke();
  fill(100,100,100);
  ellipse(25,25,25,25);
  
  // Collision and Boundary Restriction Logic //  

  //if (CircleX>=width-(SizeX/2)) {XPlus=0; CircleX=width-(SizeX/2);}  

  if (CircleX<=0) {XPlus=1; CircleX=0;}

  //if (CircleY>=height-(SizeY/2)) {YPlus=0; CircleY=height-(SizeY/2);}

  if (CircleY<=0) {YPlus=1; CircleY=0;}

  // Collision Reaction Logic // 

  if (XPlus==0) {CircleX=CircleX-Speed;}

  if (XPlus==1) {CircleX=CircleX+Speed;}

  if (YPlus==0) {CircleY=CircleY-Speed;}

  if (YPlus==1) {CircleY=CircleY+Speed;} 
  
  // Tail Logic //
  
  if (XPlus==0) {TailX=Tail;}

  if (XPlus==1) {TailX=-Tail;}

  if (YPlus==0) {TailY=+Tail;}

  if (YPlus==1) {TailY=-Tail;}
  
  // Erase Logic //
  
  if (XPlus==0) {EraseX=CircleX+Speed;}

  if (XPlus==1) {EraseX=CircleX-Speed;}

  if (YPlus==0) {EraseY=CircleY+Speed;}

  if (YPlus==1) {EraseY=CircleY-Speed;}
  
  // Visuals //
  
  
  
  //noStroke();
  //stroke(255);
  //point(EraseX, EraseY);
 
  // Debugging //
  
  println("--------");
  println(CircleY,"X");
  println(CircleX,"Y");

}

void mousePressed() {
  exit(); 
}

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 5:04pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/7 "2018-09-04T17:04:44Z")

</div>

You got it too f you pay close attention.

Run the following sketch to see it:

```auto
void setup() {
  size(1000, 1000);
  background(0);
  fill(255, 255, 255);
  noStroke();
  ellipse(500, 500, 100, 100);
  noStroke();
  fill(0, 0, 0);
  ellipse(500, 500, 100, 100);
}

```

It is just that since it is bigger, it is way more subtle and if you don’t have such a high contrast as with the previous sketch, you don’t really see it.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 5:06pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/8 "2018-09-04T17:06:17Z")

</div>

> [@VimHax](#):
>
> Well I changed it and just to make sure I even moved the whole section up but the results didn’t change…

What @kfrajer meant was to add that line before you draw the other ellipse.  
This way you start with a fresh canvas with nothing on it.  
So when you draw you circle you don’t have that problem.

---

<div class="post-metadata">

**Author:** ![VimHax](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vimhax/32/1368_2.png) [@VimHax](https://discourse.processing.org/u/VimHax)\
**Post date:** [September 4, 2018, 5:09pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/9 "2018-09-04T17:09:41Z")

</div>

> [@jb4x](#):
>
> You got it too f you pay close attention.
> 
> Run the following sketch to see it:
> 
> ```auto
> void setup() {
> size(1000, 1000);
> background(0);
> fill(255, 255, 255);
> noStroke();
> ellipse(500, 500, 100, 100);
> noStroke();
> fill(0, 0, 0);
> ellipse(500, 500, 100, 100);
> }
> 
> ```
> 
> It is just that since it is bigger, it is way more subtle and if you don’t have such a high contrast as with the previous sketch, you don’t really see it.

Well if that’s the case, I assume the only way around is to have noSmooth() on?

> [@jb4x](#):
>
> > Well I changed it and just to make sure I even moved the whole section up but the results didn’t change…
> 
> What @kfrajer meant was to add that line before you draw the other ellipse.  
> This way you start with a fresh canvas with nothing on it.  
> So when you draw you circle you don’t have that problem.

If that’s what he mean’t then it won’t help me as it defeats the purpose of what I’m trying to do with the project…

Anyhow I’ll experiment with noSmooth() and let you know whether I have fixed my problem.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 5:12pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/10 "2018-09-04T17:12:12Z")

</div>

> [@VimHax](#):
>
> it defeats the purpose of what I’m trying to do with the project…

Can you tell us more what you want to do exactly, maybe we can help you with that.  
But I doubt it would defeat the purpose of what you wanna do.

A way to solve it though would be to draw the second ellipse a bit bigger to compensate for that effect. Visually it won’t really make any differences.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 5:17pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/11 "2018-09-04T17:17:26Z")

</div>

It took the liberty of editing the title of your thread so it describes better the content.

---

<div class="post-metadata">

**Author:** ![VimHax](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vimhax/32/1368_2.png) [@VimHax](https://discourse.processing.org/u/VimHax)\
**Post date:** [September 4, 2018, 5:42pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/12 "2018-09-04T17:42:15Z")

</div>

> [@jb4x](#):
>
> > it defeats the purpose of what I’m trying to do with the project…
> 
> Can you tell us more what you want to do exactly, maybe we can help you with that.  
> But I doubt it would defeat the purpose of what you wanna do.
> 
> A way to solve it though would be to draw the second ellipse a bit bigger to compensate for that effect. Visually it won’t really make any differences.

Well I cleaned up some of my code with the noSmooth() command and adding all the other code back in and I was able to accomplish what I was trying to do with the program, I was trying to make a circle being traced but the trace left a different color than the circle which is tracing it… I was able to accomplish this but not with a circle, with a square…

```auto
float CircleX = random(0,width);
float CircleY = random(0,height);
int XPlus = 1;
int YPlus = 1;
float TailX = 40;
float TailY = 40;
float Speed = 1;
float Tail = 40;
float SizeX = 20;
float SizeY = 20;
float BackGround = 50;
float EraseX;
float EraseY;

void setup() {
  fullScreen();
  background(BackGround);
  noSmooth();
}  

void draw() {
  
  // Collision and Boundary Restriction Logic //  

  if (CircleX>=width-(SizeX/2)) {XPlus=0; CircleX=width-(SizeX/2);}  

  if (CircleX<=0) {XPlus=1; CircleX=0;}

  if (CircleY>=height-(SizeY/2)) {YPlus=0; CircleY=height-(SizeY/2);}

  if (CircleY<=0) {YPlus=1; CircleY=0;}

  // Collision Reaction Logic // 

  if (XPlus==0) {CircleX=CircleX-Speed;}

  if (XPlus==1) {CircleX=CircleX+Speed;}

  if (YPlus==0) {CircleY=CircleY-Speed;}

  if (YPlus==1) {CircleY=CircleY+Speed;} 
  
  // Tail Logic //
  
  if (XPlus==0) {TailX=Tail;}

  if (XPlus==1) {TailX=-Tail;}

  if (YPlus==0) {TailY=+Tail;}

  if (YPlus==1) {TailY=-Tail;}
  
  // Erase Logic //
  
  if (XPlus==0) {EraseX=CircleX+Speed;}

  if (XPlus==1) {EraseX=CircleX-Speed;}

  if (YPlus==0) {EraseY=CircleY+Speed;}

  if (YPlus==1) {EraseY=CircleY-Speed;}
  
  // Visuals //
  
  noStroke();
  fill(100);
  rect(EraseX,EraseY,20,20);
  noStroke();
  fill(255);
  rect(CircleX,CircleY,SizeX,SizeY);
 
  // Debugging //
  
  println("--------");
  println();
  println();

}

void mousePressed() {
  exit(); 
}

```

\*\*Update - I got it to work with the circle as well. \*\*

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [September 4, 2018, 5:44pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/13 "2018-09-04T17:44:44Z")

</div>

```auto
float CircleX = random(0,width);
float CircleY = random(0,height);

```

That above will not work as width and height are only available INSIDE setup or draw functions.

I dont have Processing in my current computer so I cant test your code. What I suggested before was this:

```auto
void draw(){
  background(50);
  ...
  ...Rest of your code

}

```

Kf

---

<div class="post-metadata">

**Author:** ![VimHax](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vimhax/32/1368_2.png) [@VimHax](https://discourse.processing.org/u/VimHax)\
**Post date:** [September 4, 2018, 6:43pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/14 "2018-09-04T18:43:23Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/373dbbdd1f5bf02eaab370c152995d0e6f32fedd.png)

This is the final code of this project…

```auto
boolean XPlus = true, YPlus = true;
boolean RTrue = true, GTrue = false, BTrue = false;    
    int once;
  float SquareX, SquareY;
  float Speed = 1;
  float Size = 20;
  float BackGround = 0;
  float TraceX, TraceY;
  int R = 0, G = 0, B = 0;

void setup() {
  background(BackGround);
  noSmooth();
  fullScreen(); 
}  

void draw() {
  
  // Random Start Location //
  
  if (once == 0) {SquareX = random(0,width); SquareY = random(0,height); once++;}

  // Collision and Boundary Restriction Logic //  

  if (SquareX>=width-(Size/2)) {XPlus=false; SquareX=width-(Size/2);}  

  if (SquareX<=0) {XPlus=true; SquareX=0;}

  if (SquareY>=height-(Size/2)) {YPlus=false; SquareY=height-(Size/2);}

  if (SquareY<=0) {YPlus=true; SquareY=0;}

  // Collision Reaction Logic // 

  if (XPlus==false) {SquareX=SquareX-Speed;}

  if (XPlus==true) {SquareX=SquareX+Speed;}

  if (YPlus==false) {SquareY=SquareY-Speed;}

  if (YPlus==true) {SquareY=SquareY+Speed;} 
  
  // Trace Logic //
  
  if (XPlus==false) {TraceX=SquareX+Speed;}

  if (XPlus==true) {TraceX=SquareX-Speed;}

  if (YPlus==false) {TraceY=SquareY+Speed;}

  if (YPlus==true) {TraceY=SquareY-Speed;}
  
  // Color Logic //
  
  if (RTrue == true) {R++;}
  if (GTrue == true) {G++;}
  if (BTrue == true) {B++;}
  
  if (R >= 255) {RTrue = false; GTrue = true;}
  if (G >= 255) {GTrue = false; BTrue = true;}
  if (B >= 255) {BTrue = false; RTrue = true;}
  
  if (RTrue == false && R > 0) {R--;}
  if (GTrue == false && G > 0) {G--;}
  if (BTrue == false && B > 0) {B--;}
  
  // Visuals //
  
  noStroke();
  fill(R, G, B);
  rect(TraceX, TraceY, Size, Size);
  noStroke();
  fill(255);
  rect(SquareX, SquareY, Size, Size);
 
}

void mousePressed() {
  exit(); 
}

```

The only feature which I would like for this project is for maybe a way to speed up the process without having none smooth traces, if you don’t know what I mean try editing the speed variable at the very top to about 50 or 100 and you can definitely see that the square can’t trace everything perfectly.

Also thank you for the people who tried to help me. 😃

---

<div class="post-metadata">

**Author:** ![VimHax](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vimhax/32/1368_2.png) [@VimHax](https://discourse.processing.org/u/VimHax)\
**Post date:** [September 4, 2018, 6:46pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/15 "2018-09-04T18:46:14Z")

</div>

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

That’s what speed 100 looks like, if you’re curious!

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 6:52pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/16 "2018-09-04T18:52:17Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 6:55pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/17 "2018-09-04T18:55:41Z")

</div>

For the speeding up, you just need to run what’s in your `draw()` function several time per frame.

So you just need to add a `nbOfCycles` variable and add a for loop in `draw()`

```auto
boolean XPlus = true, YPlus = true;
boolean RTrue = true, GTrue = false, BTrue = false;    
int once;
float SquareX, SquareY;
float Speed = 1;
float Size = 20;
float BackGround = 0;
float TraceX, TraceY;
int R = 0, G = 0, B = 0;
int nbOfCycles = 50;

void setup() {
  background(BackGround);
  noSmooth();
  fullScreen();
}  

void draw() {
  for (int i = 0; i < nbOfCycles; i++) {

    // Random Start Location //

    if (once == 0) {
      SquareX = random(0, width); 
      SquareY = random(0, height); 
      once++;
    }

    // Collision and Boundary Restriction Logic //  

    if (SquareX>=width-(Size/2)) {
      XPlus=false; 
      SquareX=width-(Size/2);
    }  

    if (SquareX<=0) {
      XPlus=true; 
      SquareX=0;
    }

    if (SquareY>=height-(Size/2)) {
      YPlus=false; 
      SquareY=height-(Size/2);
    }

    if (SquareY<=0) {
      YPlus=true; 
      SquareY=0;
    }

    // Collision Reaction Logic // 

    if (XPlus==false) {
      SquareX=SquareX-Speed;
    }

    if (XPlus==true) {
      SquareX=SquareX+Speed;
    }

    if (YPlus==false) {
      SquareY=SquareY-Speed;
    }

    if (YPlus==true) {
      SquareY=SquareY+Speed;
    } 

    // Trace Logic //

    if (XPlus==false) {
      TraceX=SquareX+Speed;
    }

    if (XPlus==true) {
      TraceX=SquareX-Speed;
    }

    if (YPlus==false) {
      TraceY=SquareY+Speed;
    }

    if (YPlus==true) {
      TraceY=SquareY-Speed;
    }

    // Color Logic //

    if (RTrue == true) {
      R++;
    }
    if (GTrue == true) {
      G++;
    }
    if (BTrue == true) {
      B++;
    }

    if (R >= 255) {
      RTrue = false; 
      GTrue = true;
    }
    if (G >= 255) {
      GTrue = false; 
      BTrue = true;
    }
    if (B >= 255) {
      BTrue = false; 
      RTrue = true;
    }

    if (RTrue == false && R > 0) {
      R--;
    }
    if (GTrue == false && G > 0) {
      G--;
    }
    if (BTrue == false && B > 0) {
      B--;
    }

    // Visuals //

    noStroke();
    fill(R, G, B);
    rect(TraceX, TraceY, Size, Size);
    noStroke();
    fill(255);
    rect(SquareX, SquareY, Size, Size);
  }
}

void mousePressed() {
  exit();
}

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 6:56pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/18 "2018-09-04T18:56:08Z")

</div>

I love the result btw 🙂

---

<div class="post-metadata">

**Author:** ![VimHax](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vimhax/32/1368_2.png) [@VimHax](https://discourse.processing.org/u/VimHax)\
**Post date:** [September 4, 2018, 7:05pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/19 "2018-09-04T19:05:59Z")

</div>

> [@jb4x](#):
>
> 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:
> 
> ```auto
> 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(); 
> }
> 
> ```

I found Processing probably about 4 days ago and its easier to start with than Java and I’m definitely going to learn how to do some advanced stuff. This seems interesting, I’ll try to check this method out aswell!

> [@jb4x](#):
>
> For the speeding up, you just need to run what’s in your `draw()` function several time per frame.
> 
> So you just need to add a `nbOfCycles` variable and add a for loop in `draw()`
> 
> ```auto
> boolean XPlus = true, YPlus = true;
> boolean RTrue = true, GTrue = false, BTrue = false;    
> int once;
> float SquareX, SquareY;
> float Speed = 1;
> float Size = 20;
> float BackGround = 0;
> float TraceX, TraceY;
> int R = 0, G = 0, B = 0;
> int nbOfCycles = 50;
> 
> void setup() {
> background(BackGround);
> noSmooth();
> fullScreen();
> }  
> 
> void draw() {
> for (int i = 0; i < nbOfCycles; i++) {
> 
> // Random Start Location //
> 
> if (once == 0) {
> SquareX = random(0, width); 
> SquareY = random(0, height); 
> once++;
> }
> 
> // Collision and Boundary Restriction Logic //  
> 
> if (SquareX>=width-(Size/2)) {
> XPlus=false; 
> SquareX=width-(Size/2);
> }  
> 
> if (SquareX<=0) {
> XPlus=true; 
> SquareX=0;
> }
> 
> if (SquareY>=height-(Size/2)) {
> YPlus=false; 
> SquareY=height-(Size/2);
> }
> 
> if (SquareY<=0) {
> YPlus=true; 
> SquareY=0;
> }
> 
> // Collision Reaction Logic // 
> 
> if (XPlus==false) {
> SquareX=SquareX-Speed;
> }
> 
> if (XPlus==true) {
> SquareX=SquareX+Speed;
> }
> 
> if (YPlus==false) {
> SquareY=SquareY-Speed;
> }
> 
> if (YPlus==true) {
> SquareY=SquareY+Speed;
> } 
> 
> // Trace Logic //
> 
> if (XPlus==false) {
> TraceX=SquareX+Speed;
> }
> 
> if (XPlus==true) {
> TraceX=SquareX-Speed;
> }
> 
> if (YPlus==false) {
> TraceY=SquareY+Speed;
> }
> 
> if (YPlus==true) {
> TraceY=SquareY-Speed;
> }
> 
> // Color Logic //
> 
> if (RTrue == true) {
> R++;
> }
> if (GTrue == true) {
> G++;
> }
> if (BTrue == true) {
> B++;
> }
> 
> if (R >= 255) {
> RTrue = false; 
> GTrue = true;
> }
> if (G >= 255) {
> GTrue = false; 
> BTrue = true;
> }
> if (B >= 255) {
> BTrue = false; 
> RTrue = true;
> }
> 
> if (RTrue == false && R > 0) {
> R--;
> }
> if (GTrue == false && G > 0) {
> G--;
> }
> if (BTrue == false && B > 0) {
> B--;
> }
> 
> // Visuals //
> 
> noStroke();
> fill(R, G, B);
> rect(TraceX, TraceY, Size, Size);
> noStroke();
> fill(255);
> rect(SquareX, SquareY, Size, Size);
> }
> }
> 
> void mousePressed() {
> exit();
> }
> 
> ```

Oh, I didn’t even think about that lol…

> [@jb4x](#):
>
> I love the result btw 🙂

I feel very inspired to continue learning Processing!

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 4, 2018, 7:08pm UTC](https://discourse.processing.org/t/solved-having-a-visual-problem-with-overlapping-ellipses/3253/20 "2018-09-04T19:08:30Z")

</div>

Welcome to the community then.  
I’m looking forward to see more of your projects then 🙂