[SOLVED] Having a visual problem with overlapping ellipses

Processing Beginners
1

image
image.png1920×1080 118 KB

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 -

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!)

//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`
1 Like
2

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 :slight_smile:

1 Like
3

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

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.

2 Likes
4

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

Kf

2 Likes
6

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

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

You got it too f you pay close attention.

Run the following sketch to see it:

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.

1 Like
8

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.

1 Like
9

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

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.

10

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.

1 Like
11

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

1 Like
12

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

1 Like
13 
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:

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

}

Kf

1 Like
14

image
image.png1920×1080 74.8 KB

This is the final code of this project…

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. :smiley:

2 Likes
15

image

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

1 Like
16

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
17

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()

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();
}
2 Likes
18

I love the result btw :slight_smile:

1 Like
19

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!

3 Likes
20

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

2 Likes