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…

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.

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:

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.

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

Edited Code -

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

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.

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.

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…

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. **

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.

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!

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

I feel very inspired to continue learning Processing!