how to prevent overlapping of 2 components

Question

how to prevent overlapping of 2 components, please help me to make them follow Mouse but not overlap. i am not expert in coding, please explain in simple language.

function component(x,y,r) {
       var randomcolor = ["violet","indigo","blue","green","yellow","orange","red"];
    this.pos=createVector(x,y);
    this.r=r;
    this.color=randomcolor[Math.floor(Math.random()*randomcolor.length)];
    this.show=function() {
     fill(this.color);
      stroke(241,241,241);
     ellipse(this.pos.x,this.pos.y,this.r*2,this.r*2);
    }
    this.crash = function(other) {
      var d = p5.Vector.dist(this.pos,other.pos);
    if (d<this.r+other.r) {
      this.r+=other.r/20;
      return true;}

}
    
    this.move=function(){
      this.pos.x=lerp(this.pos.x,mouseX,0.1);
      this.pos.y=lerp(this.pos.y,mouseY,0.1);
this.pos.x = constrain(this.pos.x,this.r,width-this.r)
this.pos.y = constrain(this.pos.y,this.r,height-this.r)

}    
}

You should have a list of Vector then when move you iterate throw all and check for collision. read here someone with the same problem https://stackoverflow.com/questions/30363537/2d-simple-ball-collision-vector — Alen.Toma, Feb 22 '19 at 14:05
@Alen.Toma i can detect collision, but how to stop the ball at collision? — Sidshash, Feb 22 '19 at 15:16
I edited your code so that it can run. I made some assumptions about what your draw function should be but tried to stay consistent with your original code. — Charlie Wallace, Feb 23 '19 at 17:58

Charlie Wallace · Accepted Answer · 2019-02-23T18:11:59.767

To make multiple objects move without running into each other you will need to

keep track of the current location of all objects
be able to identify each object so that the collision method does not detect a collision of an object with itself
check to make sure there will not be a collision before attempting to move an object

For your example code this is one possibility for making multiple components move towards the mouse without running into each other. I rewrote your crash function and added some global variables. This is not elegant but I think it answers your question in a way that you can understand how this kind of problem can be approached.

var ids = 0;
var allComponents = [];
function setup(){
  createCanvas(600,600);
  new component(10,10,10);
  new component(590,10,10);
}

function draw(){
   background(255);
   for (let i = 0; i < allComponents.length; i++){
     allComponents[i].show();
     allComponents[i].move();
   }
}
function component(x,y,r) {
    var randomcolor = ["violet","indigo","blue","green","yellow","orange","red"];
    this.pos=createVector(x,y);
    this.r=r;
    this.id = ids++;
    allComponents[allComponents.length] = this;         
    this.color=randomcolor[Math.floor(Math.random()*randomcolor.length)];
    this.show=function() {
      fill(this.color);
      stroke(241,241,241);
      ellipse(this.pos.x,this.pos.y,this.r*2,this.r*2);
    }
    this.crash = function(other) {
      var d = p5.Vector.dist(this.pos,other.pos);
      if (d< this.r + other.r) {
        return true;
      }
      return false;
    }
    
    this.move=function(){
      let originalX = this.pos.x;
      let originalY = this.pos.y;
      this.pos.x=lerp(this.pos.x,mouseX,0.1);
      this.pos.y=lerp(this.pos.y,mouseY,0.1);
      this.pos.x = constrain(this.pos.x,this.r,width-this.r);
      this.pos.y = constrain(this.pos.y,this.r,height-this.r);
      for (let i = 0; i < allComponents.length; i++){
        let other = allComponents[i];
        if (this.id !== other.id && this.crash(other)){
          this.pos.x = originalX;
          this.pos.y = originalY;
          break;
        }
      }  
    }    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

it seems like if a circle moves then another circle get attracted to that circle, is it possible to make all circle getting attracted to mouse but not overlap? — Sidshash, Feb 24 '19 at 09:00
You can make the move function more sophisticated by adding logic to move around the object that it is colliding with when a collision happens. The code in the answer simply prevents collisions. You could put a loop in move that tries some random directions when a collisions happens. — Charlie Wallace, Feb 24 '19 at 14:59

how to prevent overlapping of 2 components

1 Answers1