# Intersection of ellipses

**URL:** <https://discourse.processing.org/t/intersection-of-ellipses/15357>\
**Category:** Coding Questions\
**Created:** [November 9, 2019, 5:54pm UTC](https://discourse.processing.org/t/intersection-of-ellipses/15357 "2019-11-09T17:54:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![edward](https://avatars.discourse-cdn.com/v4/letter/e/90db22/32.png) [@edward](https://discourse.processing.org/u/edward)\
**Post date:** [November 9, 2019, 5:54pm UTC](https://discourse.processing.org/t/intersection-of-ellipses/15357/1 "2019-11-09T17:54:55Z")

</div>

Hi guys. I’m finding this quite a challenge.

The way I have it in this code, any ellipse avoids contact with the others whilst dragging it, which is kind of what I want. However, in order to keep on dragging an ellipse after it comes close to contact, I need to re-set the boolean (mouseReleased), etc. It doesn’t work very nicely and because of all the iterations, it’s rather clumsy whilst dragging.

I would like to be able to drag any of the ellipses freely whilst keeping the mouse pressed, and naturally, avoiding contact with the other ellipses. Also, I don’t want to code the ellipses as instances of an object. Any ideas? Thanks.

```auto

ArrayList<PVector> point = new ArrayList();
boolean allow=true;
int i;
int j;

void setup() {
  size(300, 200);
  point.add(new PVector(50, 100));
  point.add(new PVector(100, 100));
  point.add(new PVector(150, 100));
  point.add(new PVector(200, 100));
}

void draw() {
  background(255);

  for (j=0; j<point.size(); j++) {
    fill(255, 0, 0);
    noStroke();
    ellipse(point.get(j).x, point.get(j).y, 20, 20);//red balls
  }//for

  if (mousePressed) {

    for (j=0; j<point.size(); j++) {
      if (dist(mouseX, mouseY, point.get(j).x, point.get(j).y)<20 ) {

        if (allow) {
          point.get(j).x=mouseX;
          point.get(j).y=mouseY;       
        }

        for (i=0; i<point.size(); i++) {
          if (i!=j && dist(mouseX, mouseY, point.get(i).x, point.get(i).y)<22 ) { 
           allow=false;
          }
        }
      }
    }
  }//mousePressed
}//draw

void mouseReleased() {
  allow=true;
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 9, 2019, 6:19pm UTC](https://discourse.processing.org/t/intersection-of-ellipses/15357/2 "2019-11-09T18:19:35Z")

</div>

```auto

ArrayList<PVector> point = new ArrayList();

// dragging at the moment? 
boolean allow=false;

// if so which ellipse are we dragging?
int foundEllipse=-1; 

void setup() {
  size(300, 200);
  point.add(new PVector(50, 100));
  point.add(new PVector(100, 100));
  point.add(new PVector(150, 100));
  point.add(new PVector(200, 100));
}

void draw() {
  background(255);

  // display ellipses
  fill(255, 0, 0);
  noStroke();
  for (PVector pv : point) {    
    ellipse(pv.x, pv.y, 
      20, 20);//red balls
  }//for

  dragAndDrop();
}//draw

// ----------------------------------------------------------------------------------

void dragAndDrop() {
  if (!allow) {
    return; // leave
  }

  point.get(foundEllipse).x=mouseX;
  point.get(foundEllipse).y=mouseY;

  // check collision 
  for (int i=0; i<point.size(); i++) {
    if (i != foundEllipse && dist(mouseX, mouseY, point.get(i).x, point.get(i).y)<22 ) { 
      allow=false;
    }
  }
}//func 

void mousePressed() {

  // reset 
  allow = false; 

  // search 
  for (int j=0; j<point.size(); j++) {
    if (dist(mouseX, mouseY, point.get(j).x, point.get(j).y)<20 ) {
      allow=true; 
      foundEllipse=j;
      return; // leave here
    }
  }
}//func

void mouseReleased() {
  allow=false;
}//func
//

```

---

<div class="post-metadata">

**Author:** ![edward](https://avatars.discourse-cdn.com/v4/letter/e/90db22/32.png) [@edward](https://discourse.processing.org/u/edward)\
**Post date:** [November 9, 2019, 6:46pm UTC](https://discourse.processing.org/t/intersection-of-ellipses/15357/3 "2019-11-09T18:46:32Z")

</div>

Hi Chrisir,

Thank you for your interest, I tried your version, it’s certainly an improvement, but it still needs the mouse release to allow you to keep dragging the ellipse after contact. Also, sometimes two ellipses make contact and it’s quite difficult to separate them again. I think it’s almost there.

PS. I don’t mind if the dragged ellipse collides and intersects whilst it is being dragged, so long as one can keep on dragging away from the other ellipse, so it’s not hidden underneath.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 9, 2019, 7:07pm UTC](https://discourse.processing.org/t/intersection-of-ellipses/15357/4 "2019-11-09T19:07:35Z")

</div>

> [@edward](#):
>
> it still needs the mouse release to allow you to keep dragging the ellipse after contact

I see

Chrisir

```auto

ArrayList<PVector> point = new ArrayList();

// dragging at the moment? 
boolean allow=false;

boolean firstTime=false;

// if so which ellipse are we dragging?
int foundEllipse=-1; 

void setup() {
  size(300, 200);
  point.add(new PVector(50, 100));
  point.add(new PVector(100, 100));
  point.add(new PVector(150, 100));
  point.add(new PVector(200, 100));

  //ellipseMode(CENTER);
}

void draw() {
  background(255);

  // display ellipses
  fill(255, 0, 0);
  noStroke();
  for (PVector pv : point) {    
    ellipse(pv.x, pv.y, 
      20, 20);//red balls
  }//for

  dragAndDrop();
}//draw

// ----------------------------------------------------------------------------------

void dragAndDrop() {
  if (!allow) {
    return; // leave
  }

  // check collision
  boolean foundOne=false; // did we find any collision? Then don't allow pos change!!!  
  for (int i=0; i<point.size(); i++) {
    if (i != foundEllipse ) {
      if (dist(mouseX, mouseY, point.get(i).x, point.get(i).y) < 20) {
        foundOne=true;
      }
    }
  }
  if (!foundOne||firstTime) {
    point.get(foundEllipse).x=mouseX;
    point.get(foundEllipse).y=mouseY;
    firstTime=false;
  }
}//func 

void mousePressed() {

  // reset 
  allow = false; 

  // search 
  for (int j=0; j<point.size(); j++) {
    if (dist(mouseX, mouseY, point.get(j).x, point.get(j).y)<20 ) {
      allow=true; 
      foundEllipse=j;
      firstTime=true; 
      return; // leave here
    }
  }
}//func

void mouseReleased() {
  allow=false;
}//func
//

```

---

<div class="post-metadata">

**Author:** ![edward](https://avatars.discourse-cdn.com/v4/letter/e/90db22/32.png) [@edward](https://discourse.processing.org/u/edward)\
**Post date:** [November 9, 2019, 7:25pm UTC](https://discourse.processing.org/t/intersection-of-ellipses/15357/5 "2019-11-09T19:25:25Z")

</div>

Hi Chrisir,

That’s more like it! Thank you, this works. I’m going to test it for a while, but it appears to do what the doctor ordered! Thanks again.  
Edward

---

<div class="post-metadata">

**Author:** ![edward](https://avatars.discourse-cdn.com/v4/letter/e/90db22/32.png) [@edward](https://discourse.processing.org/u/edward)\
**Post date:** [November 9, 2019, 8:00pm UTC](https://discourse.processing.org/t/intersection-of-ellipses/15357/6 "2019-11-09T20:00:40Z")

</div>

And a shortened version of your code if you don’t mind the ellipses colliding, but just want to reposition them.

```auto

ArrayList<PVector> point = new ArrayList();

int foundEllipse; 

void setup() {
  size(300, 200);
  point.add(new PVector(50, 100));
  point.add(new PVector(100, 100));
  point.add(new PVector(150, 100));
  point.add(new PVector(200, 100));
}

void draw() {
  background(255);

  // display ellipses
  fill(255, 0, 0);
  noStroke();
  for (PVector pv : point) {    
    ellipse(pv.x, pv.y, 
      20, 20);
  }//for

  if (mousePressed) {

    if (dist(mouseX, mouseY, point.get(foundEllipse).x, point.get(foundEllipse).y) < 20) {
      point.get(foundEllipse).x=mouseX;
      point.get(foundEllipse).y=mouseY;
    }
  }//mousePressed
}//draw

void mousePressed() {

  for (int j=0; j<point.size(); j++) {
    if (dist(mouseX, mouseY, point.get(j).x, point.get(j).y)<20 ) {
      foundEllipse=j;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 9, 2019, 11:54pm UTC](https://discourse.processing.org/t/intersection-of-ellipses/15357/7 "2019-11-09T23:54:31Z")

</div>

Just a note – this thread is about the intersection of **circles** , which you can draw with `ellipse(x, y, r, r);`

The collision check works for regular **circles** specifically. So, x and y radius are equal, and collision check is distance from the center – the circle radius

Collision between an axis-aligned ellipse and a circle is harder. Axis-aligned ellipse-ellipse collision detection is much harder. Ellipse-ellipse collision detection in the general case (allowing rotation) is a nightmare.

- [http://yehar.com/blog/?p=2926](http://yehar.com/blog/?p=2926)
- [https://math.stackexchange.com/questions/1688449/intersection-of-two-ellipses](https://math.stackexchange.com/questions/1688449/intersection-of-two-ellipses)