# Mouse inside a triangle checker

**URL:** <https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727>\
**Category:** Coding Questions\
**Created:** [November 22, 2019, 8:26pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727 "2019-11-22T20:26:56Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![SimoneBatistini](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@SimoneBatistini](https://discourse.processing.org/u/SimoneBatistini)\
**Post date:** [November 22, 2019, 8:26pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/1 "2019-11-22T20:26:57Z")

</div>

I’m trying to make a program that will detect if the mouse is inside a triangle or not. It has to be any type of triangle. My idea is taking a triangle ABC and the mouse point K and calculating the areas Aabc Aabk Aakc Akbc and figuring out that  
if Aabc- (Aabk+Aakc+Akbc) = 0 the point is inside. The function I’m using to find the area is making a matrix 3x3 where column one has x1,x2,x3 and column two has y1,y2,y3 and last column is just filled with ones. This function is mathematically correct but in the code it doesnt work well for the last 3 areas, giving me weird values. I’ll paste down the code. (The notes are in italian, sorry about it but I’m in quite of an hurry and it doesn’t seem hard to follow)

```auto
int mK = 255;
int K;
int bgr = 220;
float x1 = 200;
float x2 = 600;
float x3 = 400;
float y1 = 500;
float y2 = 500;
float y3 = 100;
float A;
float A1;
float A2;
float A3;
float At;

void setup(){
  size (800,600);
  }

void draw(){
  
  //Aree calcolo
  A = abs(x1*y2*1+y1*1*x3+1*x2*y3-y1*x2*1-x1*1*y3-1*y2*x3)/2;
  A1 = abs(x1*y2*1+y1*1*mouseX+1*x2*mouseY-y1*x2*1-x1*1*mouseY-1*y2*mouseY)/2;
  A2 = abs(x1*mouseY*1+y1*1*x3+1*mouseX*y3-y1*mouseX*1-x1*1*y3-1*mouseY*x3)/2;
  A3 = abs(mouseX*y2*1+mouseY*1*x3+1*x2*y3-mouseY*x2*1-mouseX*1*y3-1*y2*x3)/2;
  At = A1+A2+A3;
  
  //Resetta lo sfondo e i colori
  background(bgr);
  K=255;
  
  //Disegna i triangoli
  fill(K);
  triangle(x1,y1,x2,y2,x3,y3);
  triangle(x1,y1,x2,y2,mouseX,mouseY);
  triangle(x1,y1,mouseX,mouseY,x3,y3);
  triangle(mouseX,mouseY,x2,y2,x3,y3);
  
  //Mostra i valori
  fill(bgr);
  rect(0,0,200,200);
  fill(0);
  text("A = " + A,10,20);
  text("A1 = " + A1,10,30);
  text("A2 = " + A2,10,40);
  text("A3 = " + A3,10,50);
  text("At = " + At,10,60);
  text("mX = " + mouseX,10,70);
  text("mY = " + mouseY,10,80);
}

```

---

<div class="post-metadata">

**Author:** ![SimoneBatistini](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@SimoneBatistini](https://discourse.processing.org/u/SimoneBatistini)\
**Post date:** [November 22, 2019, 8:29pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/2 "2019-11-22T20:29:48Z")

</div>

> [@SimoneBatistini](#):
>
> .

and then calcolating the sauruss determinant of it and taking the absolute value of it, and dividing by two. Sorry I forgot to finish the formula xD

---

<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 22, 2019, 8:50pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/3 "2019-11-22T20:50:36Z")

</div>

You can also draw the triangle in its own unique color c1 and take the color c2 with get(mouseX, mouseY); and compare the two colors. When they are the same, you are inside the triangle.

This is also possible when you draw the triangle on an invisible PGraphics of the same size and do the checks there

Welcome to the forum - have fun!

---

<div class="post-metadata">

**Author:** ![SimoneBatistini](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@SimoneBatistini](https://discourse.processing.org/u/SimoneBatistini)\
**Post date:** [November 22, 2019, 9:01pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/4 "2019-11-22T21:01:37Z")

</div>

thank you, any idea for doing this on a triangle which color is the same as the background?

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 22, 2019, 9:34pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/5 "2019-11-22T21:34:28Z")

</div>

Alternatively you can isolate all the edges, and the midpoints of said edges, then use line intersection tests to see if the mouse is inside or outside of the triangle.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b0ec35d3287d5c5d81f6d5229c7914667e20804d.png)  
if the mouse is outside of the triangle that it shouldnt intersect with any of the bounding edges.

Heres what the code might look like, please bear in mind this makes use of a boundary class, which I wont post because its too big and a line intersection function

```auto
trit = 0;
        for(int i=0;i<a.Boundaries.size();i++){
          
          Boundary b = a.Boundaries.get(i);
          
          Boundary A = new Boundary((b.x1 + b.x2)/2,(b.y1 + b.y2)/2,X,Y);
          
          for(int j=0;j<a.Boundaries.size();j++){
            
            Boundary c = a.Boundaries.get(j);
            
            Boundary C = new Boundary(c.x1,c.y1,c.x2,c.y2);
            PVector i1 = check_intersect(A,C);
            if(i1!=null&&i!=j){
              trit++;
            }}}
            return trit<1;

```

```auto
PVector check_intersect(Boundary a, Boundary b){

    float a1 = a.y2 - a.y1;
    float b1 = a.x1 - a.x2;
    float c1 = a1 * a.x1 + b1 * a.y1;
    float a2 = b.y2 - b.y1;
    float b2 = b.x1 - b.x2;
    float c2 = a2 * b.x1 + b2 * b.y1;
    float denom = a1 * b2 - a2 * b1;
    
    if((a.x1==b.x1||a.x2==b.x2)&&(a.y1==b.y1||a.y2==b.y2)){
      
      return null;
    }
     else{
        
    Float X = (b2 *c1 - b1 * c2) / denom;
    Float Y = (a1 *c2 - a2 * c1) / denom;
    
    PVector p = new PVector(X,Y);   
      boolean Linea = ((p.x<a.x1&&p.x>a.x2)||(p.x>a.x1&&p.x<a.x2))||((p.y<a.y1&&p.y>a.y2)||(p.y>a.y1&&p.y<a.y2));
      boolean Lineb = ((p.x<b.x1&&p.x>b.x2)||(p.x>b.x1&&p.x<b.x2))||((p.y<b.y1&&p.y>b.y2)||(p.y>a.y1&&p.y<b.y2));
      
        if(Linea&&Lineb){
        //stroke(255);
        //strokeWeight(20);
        //point(p.x,p.y);
        //strokeWeight(1);
        return p;
      }
      else{
      return null;
      }}
  };

```

---

<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 22, 2019, 10:04pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/6 "2019-11-22T22:04:55Z")

</div>

> [@SimoneBatistini](#):
>
> doing this on a triangle which color is the same as the background

(then your triangle is invisible?)

But Sure.

draw the triangle on an invisible PGraphics (other background color) of the same size as your size() command and draw the triangle there as well and do the checks there.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 22, 2019, 10:27pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/7 "2019-11-22T22:27:43Z")

</div>

use mid points and not edge points, as some caases will yield false positives.  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d97e6bea289a0583663cd2df1516e642ab189409.png)

---

<div class="post-metadata">

**Author:** ![SimoneBatistini](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@SimoneBatistini](https://discourse.processing.org/u/SimoneBatistini)\
**Post date:** [November 22, 2019, 10:38pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/8 "2019-11-22T22:38:50Z")

</div>

I don’t know how to do the invisible PGraphics. I’d rather fix my function

---

<div class="post-metadata">

**Author:** ![SimoneBatistini](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@SimoneBatistini](https://discourse.processing.org/u/SimoneBatistini)\
**Post date:** [November 22, 2019, 10:39pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/9 "2019-11-22T22:39:28Z")

</div>

I don’t really know if in that case the determinant would give me the area

---

<div class="post-metadata">

**Author:** ![SimoneBatistini](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@SimoneBatistini](https://discourse.processing.org/u/SimoneBatistini)\
**Post date:** [November 22, 2019, 10:40pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/10 "2019-11-22T22:40:21Z")

</div>

thanks for the idea, I’d rather not stray too far from the starting sketch though

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 22, 2019, 11:04pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/11 "2019-11-22T23:04:36Z")

</div>

> [@paulgoux](#):
>
> trit = 0; for(int i=0;i\<a.Boundaries.size();i++){ Boundary b = a.Boundaries.get(i); Boundary A = new Boundary((b.x1 + b.x2)/2,(b.y1 + b.y2)/2,X,Y); for(int j=0;j\<a.Boundaries.size();j++){ Boundary c = a.Boundaries.get(j); Boundary C = new Boundary(c.x1,c.y1,c.x2,c.y2); PVector i1 = check\_intersect(A,C); if(i1!=null&&i!=j){ trit++; }}} return trit\<1;

Here you go feel free to use it.

```auto
ArrayList<Boundary> Boundaries = new ArrayList<Boundary>();
Triangle test = new Triangle(new PVector(100,200),new PVector(300,200),new PVector(200,400));

void setup(){
  size(500,500);
  
  
};

void draw(){
  background(51);
  test.draw();
};

class Boundary{
  
  PVector a,b;
  float x1,x2,y1,y2;
  
  Boundary(PVector A,PVector B){
    
    a = A;
    b = B;
    x1 = a.x;
    y1 = a.y;
    x2 = b.x;
    y2 = b.y;
  }
  Boundary(Float X1,Float Y1,Float X2, Float Y2){
    
    x1 = X1;
    y1 = Y1;
    x2 = X2;
    y2 = Y2;
  }
  
};

class Triangle{
  
  int trit;
  PVector a,b,c;
  float x1,y1,x2,y2,x3,y3;
  
  ArrayList<Boundary> Boundaries = new ArrayList<Boundary>();
  
  Triangle(PVector A,PVector B, PVector C){
    a = A;
    b = B;
    c = C;
    x1 = a.x;
    y1 = a.y;
    x2 = b.x;
    y2 = b.y;
    x3 = c.x;
    y3 = c.y;
    Boundaries.add(new Boundary(a,b));
    Boundaries.add(new Boundary(b,c));
    Boundaries.add(new Boundary(c,a));
  }
  
  void draw(){
    
    beginShape();
    for(int i=0;i<Boundaries.size();i++){
      Boundary b = Boundaries.get(i);
      
      stroke(0);
      fill(0);
      if(pos()){
        fill(255);
      }
      vertex(b.a.x,b.a.y);
      vertex(b.b.x,b.b.y);
      //line(b.a.x,b.a.y,b.b.x,b.b.y);
    }
    endShape(CLOSE);
  };
  
  boolean pos(){
    boolean k = false;
    float X = mouseX;
    float Y = mouseY;
    
    trit = 0;
        for(int i=0;i<Boundaries.size();i++){
          
          Boundary b = Boundaries.get(i);
          /* this calculates mid point for the boundary*/
          Boundary A = new Boundary((b.x1 + b.x2)/2,(b.y1 + b.y2)/2,X,Y);
          /* loop through all boundaries and test for intersection, remember if there is an 
           intersection it means the mouse is outside*/
          for(int j=0;j<Boundaries.size();j++){
            
            Boundary c = Boundaries.get(j);
            
            Boundary C = new Boundary(c.x1,c.y1,c.x2,c.y2);
            PVector i1 = check_intersect(A,C);
            if(i1!=null&&i!=j){
              // if there is then increment the counter;
              trit++;
            }}
          
        }
        /*if the counter is 0 then there is no midpoint to boundary intersections and the mouse is 
          inside*/
        if(trit<1){
          return true;
        }
    return k;
  }
  
};

PVector check_intersect(Boundary a, Boundary b){

    float a1 = a.y2 - a.y1;
    float b1 = a.x1 - a.x2;
    float c1 = a1 * a.x1 + b1 * a.y1;
    float a2 = b.y2 - b.y1;
    float b2 = b.x1 - b.x2;
    float c2 = a2 * b.x1 + b2 * b.y1;
    float denom = a1 * b2 - a2 * b1;
    
    if((a.x1==b.x1||a.x2==b.x2)&&(a.y1==b.y1||a.y2==b.y2)){
      
      return null;
    }
     else{
        
    Float X = (b2 *c1 - b1 * c2) / denom;
    Float Y = (a1 *c2 - a2 * c1) / denom;
    
    PVector p = new PVector(X,Y);   
      boolean Linea = ((p.x<a.x1&&p.x>a.x2)||(p.x>a.x1&&p.x<a.x2))||((p.y<a.y1&&p.y>a.y2)||(p.y>a.y1&&p.y<a.y2));
      boolean Lineb = ((p.x<b.x1&&p.x>b.x2)||(p.x>b.x1&&p.x<b.x2))||((p.y<b.y1&&p.y>b.y2)||(p.y>a.y1&&p.y<b.y2));
      
        if(Linea&&Lineb){
        //stroke(255);
        //strokeWeight(20);
        //point(p.x,p.y);
        //strokeWeight(1);
        return p;
      }
      else{
      return null;
      }}
  };

```

---

<div class="post-metadata">

**Author:** ![SimoneBatistini](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@SimoneBatistini](https://discourse.processing.org/u/SimoneBatistini)\
**Post date:** [November 22, 2019, 11:06pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/12 "2019-11-22T23:06:57Z")

</div>

thanks, but I only am able to use simpler language for now and the triangle is just a part of a bigger project, I need to do it the way I was doing it. Thanks for the example though

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 22, 2019, 11:10pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/13 "2019-11-22T23:10:29Z")

</div>

No worries, good luck with your project.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 22, 2019, 11:25pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/14 "2019-11-22T23:25:24Z")

</div>

this might help

> **[Collision Detection](http://www.jeffreythompson.org/collision-detection/tri-point.php)**
>
> An online book about collision detection using Processing.

---

<div class="post-metadata">

**Author:** ![SimoneBatistini](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@SimoneBatistini](https://discourse.processing.org/u/SimoneBatistini)\
**Post date:** [November 22, 2019, 11:28pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/15 "2019-11-22T23:28:30Z")

</div>

nah my issue is matematic ill check it out tho

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [November 22, 2019, 11:33pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/16 "2019-11-22T23:33:23Z")

</div>

> [@SimoneBatistini](#):
>
> int mK = 255;  
> int K;  
> int bgr = 220;  
> float x1 = 200;  
> float x2 = 600;  
> float x3 = 400;  
> float y1 = 500;  
> float y2 = 500;  
> float y3 = 100;  
> float A;  
> float A1;  
> float A2;  
> float A3;  
> float At;
> 
> void setup(){  
> size (800,600);  
> }
> 
> void draw(){
> 
> //Aree calcolo  
> A = abs(x1 _y2_ 1+y1 _1_ x3+1 _x2_ y3-y1 _x2_ 1-x1 _1_ y3-1 _y2_ x3)/2;  
> A1 = abs(x1 _y2_ 1+y1 _1_ mouseX+1 _x2_ mouseY-y1 _x2_ 1-x1 _1_ mouseY-1 _y2_ mouseY)/2;  
> A2 = abs(x1 _mouseY_ 1+y1 _1_ x3+1 _mouseX_ y3-y1 _mouseX_ 1-x1 _1_ y3-1 _mouseY_ x3)/2;  
> A3 = abs(mouseX _y2_ 1+mouseY _1_ x3+1 _x2_ y3-mouseY _x2_ 1-mouseX _1_ y3-1 _y2_ x3)/2;  
> At = A1+A2+A3;
> 
> //Resetta lo sfondo e i colori  
> background(bgr);  
> K=255;
> 
> //Disegna i triangoli  
> fill(K);  
> triangle(x1,y1,x2,y2,x3,y3);  
> triangle(x1,y1,x2,y2,mouseX,mouseY);  
> triangle(x1,y1,mouseX,mouseY,x3,y3);  
> triangle(mouseX,mouseY,x2,y2,x3,y3);
> 
> //Mostra i valori  
> fill(bgr);  
> rect(0,0,200,200);  
> fill(0);  
> text("A = " + A,10,20);  
> text("A1 = " + A1,10,30);  
> text("A2 = " + A2,10,40);  
> text("A3 = " + A3,10,50);  
> text("At = " + At,10,60);  
> text("mX = " + mouseX,10,70);  
> text("mY = " + mouseY,10,80);  
> }

alright, I’m down, lets give it a go, can you help me with your variables though, they’re throwing errors;

```auto
A = abs(x1y21+y11x3+1x2y3-y1x21-x11y3-1y2x3)/2;
A1 = abs(x1y21+y11mouseX+1x2mouseY-y1x21-x11mouseY-1y2mouseY)/2;
A2 = abs(x1mouseY1+y11x3+1mouseXy3-y1mouseX1-x11y3-1mouseYx3)/2;
A3 = abs(mouseXy21+mouseY1x3+1x2y3-mouseYx21-mouseX1y3-1y2x3)/2;

```

---

<div class="post-metadata">

**Author:** ![SimoneBatistini](https://avatars.discourse-cdn.com/v4/letter/s/dbc845/32.png) [@SimoneBatistini](https://discourse.processing.org/u/SimoneBatistini)\
**Post date:** [November 23, 2019, 12:02am UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/17 "2019-11-23T00:02:07Z")

</div>

you didn’t add the moltiplication sign in those. It’s a determinant of a matrix. Like when solving systems of more variables. [https://en.wikipedia.org/wiki/Rule\_of\_Sarrus](https://en.wikipedia.org/wiki/Rule_of_Sarrus)

| x1 y1 1 |  
| x2 y2 1 |  
| x3 y3 1 |

---

<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 23, 2019, 12:25am UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/18 "2019-11-23T00:25:45Z")

</div>

here is my PGraphics

```auto

ArrayList<TriangleClass> triangles=new ArrayList();
PGraphics pg;

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

void setup() {
  // init (runs once)
  size(800, 600);

  addOne();
  addOne(); 
  addOne(); 
  addOne(); 
  addOne(); 
  addOne(); 
  addOne();
  addOne();
  addOne(); 
  addOne(); 
  addOne(); 
  addOne(); 
  addOne(); 
  addOne();
  addOne();
  addOne(); 
  addOne(); 
  addOne(); 
  addOne(); 
  addOne(); 
  addOne();

  pg = createGraphics(width, height);
  pg.beginDraw();
  pg.background(255, 0, 0); 
  pg.endDraw();
} // func 

void draw() { 
  // runs again and again 
  background(255);

  // draw them all 
  for (int i=0; i < triangles.size(); i++) {
    // get object from ArrayList
    TriangleClass myCurrentTriangle;
    myCurrentTriangle = triangles.get(i);
    // show it 
    myCurrentTriangle.display();
    // when mouse is over - make outline thicker
    if (myCurrentTriangle.mouseOver()) {
      myCurrentTriangle.triangleStrokeWeight += 0.1;
    }//if
  } // for

  if (keyPressed)
    showPG();
} // func 

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

void addOne() {
  // add one new triangle

  int widthX= 50;
  int widthY= 50;
  int widthXhalf= widthX/2;
  int widthYhalf= widthY/2;

  color myColor1 = color (0) ; // color( random (255), random (255), random (255));   
  // A new TriangleClass object is added to the ArrayList (by default to the end)
  //             
  float x=random(width);
  float y=random(height);

  triangles.add(
    new TriangleClass(
    x-widthXhalf, y+widthY/2, 
    x, y-widthY/2, 
    x+widthXhalf, y+widthY/2, 
    myColor1, 
    triangles.size()
    ));
}

void showPG() {
  image(pg, 
    0, 0) ;
}

// =====================================================================
// Simple class

class TriangleClass {
  // 
  float x1, y1, x2, y2, x3, y3; // points 
  color myColor; // fill color

  color myColorIntern= 0; // color(random(255)); // fill color for pg - could be improved by using ID 

  float mouseSensorX, mouseSensorY;// one check point for dist to mouse

  float triangleStrokeWeight=0.6; // the thickness of lines  

  boolean selected=false; 
  // constructor
  TriangleClass(
    float tempX1, float tempY1, 
    float tempX2, float tempY2, 
    float tempX3, float tempY3, 
    color tempmyColor1, 
    int ID_) {

    // for pg
    myColorIntern=color(ID_);
    println(ID_);

    x1 = tempX1;
    y1 = tempY1;
    x2 = tempX2;
    y2 = tempY2;
    x3 = tempX3;
    y3 = tempY3;    

    myColor=tempmyColor1;

    mouseSensorX = (x1+x2+x3 )/ 3;
    mouseSensorY = (y1+y2+y3 )/ 3;
  } // constructor

  boolean mouseOver() {
    // tells if mouse is over
    if (pg.get ( mouseX, mouseY ) == myColorIntern) {
      selected=true;
      return true;
    } // if

    triangleStrokeWeight=0.6; // reset 
    selected=false;
    return false;
  } // func

  boolean mouseOverOld() {
    // tells if mouse is over
    if (dist ( mouseX, mouseY, mouseSensorX, mouseSensorY ) < 20) {
      selected=true;
      return true;
    } // if

    selected=false;
    return false;
  } // func

  void display() {
    // show rectangle
    fill(myColor); 
    strokeWeight(triangleStrokeWeight);
    noStroke(); 
    if (selected)
      stroke(255, 0, 0);
    triangle(x1, y1, x2, y2, x3, y3);

    // and pg
    pg.beginDraw();
    pg.fill(myColorIntern); 
    pg.triangle(x1, y1, x2, y2, x3, y3);
    pg.endDraw();
  } // func
} // class
// =====================================================================

```

---

<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 25, 2019, 6:51pm UTC](https://discourse.processing.org/t/mouse-inside-a-triangle-checker/15727/19 "2019-11-25T18:51:40Z")

</div>

> [@SimoneBatistini](#):
>
> My idea is taking a triangle ABC and the mouse point K and calculating the areas Aabc Aabk Aakc Akbc

You problem is that your formula for the area of a triangle is broken.

First, use floating-point division, not integer division: `2.0`.

Next, it is impossible to read your calculations and try to find errors. Instead, create a function with your equation:

```auto
float triarea (float ax, float ay, float bx, float by, float cx, float cy) {
  return abs( (ax * ( by - cy ) + bx * ( cy - ay ) + cx * ( ay - by )) / 2.0 );
}

```

Then, call that function so that you can see what you are doing:

```auto
  A = triarea(x1, y1, x2, y2, x3, y3);
  A1 = triarea(x1, y1, x2, y2, mouseX, mouseY);
  A2 = triarea(x1, y1, mouseX, mouseY, x3, y3);
  A3 = triarea( mouseX, mouseY, x2, y2, x3, y3);
  At = A1+A2+A3;

```

This fixes your design, so that At == A while the mouse is inside the triangle.

Finally, if you want this to work on triangles with fractional point locations (like y2=100.3) then you can’t always count on `if(At==A)` – because you are using floating point math, which is imprecise. When you compare, you may need a small fudge factor, such as `if(abs(At-A) < .0005)`. You can test this on the largest triangles you expect to create to see what the largest difference is in practice.
