why do the circles disappear from the screen？

Question

Processing code as below, one quick question: why do the circles disappear from the screen when my mouse is playing with them? i've already add the boundary check however it does not seem to work. why???

int maxCircle = 200;
float minDistance=30;
float distance1;
float distance2;
Circle [] circles= new Circle[maxCircle];


void setup() {
  size(800,800);
  smooth();
  for(int i=0;i<maxCircle;i++){
    circles[i] = new Circle(random(width),random(height),random(2,20));
  }
}


void draw() {
  background(255,255);
  for(int i=0;i<maxCircle;i++) {
    circles[i].update(width,height);

    for (int j=0; j<maxCircle; j++) {
      distance1 = dist(circles[i].x,circles[i].y,circles[j].x,circles[j].y);
      if ( distance1 < minDistance ) {
        stroke(0,10);
        noFill();
        line(circles[i].x,circles[i].y,circles[j].x,circles[j].y);
       }
    }
    circles[i].display();
  }
}

void mouseMoved() {
  for(int i = 0; i<maxCircle;i++) {
    distance2 = dist(mouseX,mouseY,circles[i].x,circles[i].y);

    circles[i].x-=(mouseX-circles[i].x)/distance2;
    circles[i].y-=(mouseX-circles[i].y)/distance2;

    if(circles[i].x<circles[i].r || circles[i].x>width-circles[i].r) {
      circles[i].vx*=-1;
    };
    if(circles[i].y<circles[i].r || circles[i].y> height-circles[i].r) {
      circles[i].vy*=-1;
    }
  }
}    

class Circle {
  float x,y,vx,vy,r,speed;

  Circle(float tempx, float tempy, float tempr) {  
    x=tempx;
    y=tempy;
    vx=random(-1,1);
    vy=random(-1,1);
    r=tempr;
   }

  void update(int w,int h) {
    x+=vx;
    y+=vy;

    if(x<r || x>w-r) {
      vx*=-1;
    }
    if(y<r || y>h-r) {
      vy*=-1;
    }
   }

  void display() {
    fill(0,50);
    noStroke();
    ellipse(x,y,r,r);
  }
}

Answer 1

Oh i found the solution:

   int maxCircle = 200;
   float minDistance = 20;
     Circle [] circles = new Circle[maxCircle];

void setup() {
size(800, 800);
smooth();
for (int i = 0; i < maxCircle; i++) {
  circles[i] = new Circle();
 }
}

  void draw() {
  background(255, 255);
     for (int i = 0; i < maxCircle; i++) {
circles[i].update(); 

noFill();
for (int j = 0; j < maxCircle; j++) {
  if (i == j)
    continue;


  float distance = dist(circles[i].x, circles[i].y, circles[j].x, circles[j].y);
  if (distance < minDistance) {
    stroke(0, 20);
    line(circles[i].x, circles[i].y, circles[j].x, circles[j].y);
  }
}

         circles[i].display();
    }
      }

 void mouseMoved() {
  for (int i = 0; i < maxCircle; i++) {
 float distance = dist(mouseX, mouseY, circles[i].x, circles[i].y);

circles[i].x -= (mouseX - circles[i].x) / distance;
circles[i].y -= (mouseX - circles[i].y) / distance;

circles[i].checkBounds();
      }
    }
     class Circle {
   float x, y, vx, vy, r, speed;

       Circle() {  
        vx = random(-1, 1);
         vy = random(-1, 1);
         r = random(1, 10); // See below
         x = random(r, width - r);
         y = random(r, height - r);  
     }

        void checkBounds() {
         if (x < r || x > width - r) {
           vx *= -1;
          if (x < r) {
           x = r;
           } else {
             x = width - r;
           }
           }
           if (y <= r || y >= height - r) {
           vy *= -1;
              if (y < r) {
                y = r;
             } else {
              y = width - r;
               }
            }
              }

        void update() {
x += vx;
y += vy;
checkBounds();
 }

   void display() {
     fill(0, 50);
      noStroke();

       ellipse(x, y, r * 2, r * 2);
      }
        } 

Answer 2

in your update() method, when you calculate a new coordinate with your vector, you are potentially setting the coordinate offscreen. I have added 4 conditional statements that reset the value to the bounds of the screen if it exceeds it.

  void update(int w,int h) {
    x+=vx;
    y+=vy;

    if(x<r || x>w-r) {
      vx*=-1;
      if (x>w-r) x = w-r;
      if (x<r) x = r;
    }
    if(y<r || y>h-r) {
      vy*=-1;
      if (y>h-r) y = h-r;
      if (y<r) y = r;
    }
   }