# Hitbox around a triangle?

**URL:** <https://discourse.processing.org/t/hitbox-around-a-triangle/18473>\
**Category:** Coding Questions\
**Created:** [March 7, 2020, 5:16am UTC](https://discourse.processing.org/t/hitbox-around-a-triangle/18473 "2020-03-07T05:16:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon94203042](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94203042](https://discourse.processing.org/u/anon94203042)\
**Post date:** [March 7, 2020, 5:16am UTC](https://discourse.processing.org/t/hitbox-around-a-triangle/18473/1 "2020-03-07T05:16:56Z")

</div>

Is there an accurate way to create a hitbox (for collision detection) around a triangle?

---

<div class="post-metadata">

**Author:** ![YellowGTM](https://avatars.discourse-cdn.com/v4/letter/y/a87d85/32.png) [@YellowGTM](https://discourse.processing.org/u/YellowGTM)\
**Post date:** [March 7, 2020, 1:17pm UTC](https://discourse.processing.org/t/hitbox-around-a-triangle/18473/2 "2020-03-07T13:17:00Z")

</div>

Not sure of the application, but pseudo code:

```auto
if((objectXcoordinates >= (triangleCoordinates + bufferSizeCoordinates)){ 
  doSomething(); 
}

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [March 7, 2020, 2:06pm UTC](https://discourse.processing.org/t/hitbox-around-a-triangle/18473/3 "2020-03-07T14:06:17Z")

</div>

Hello @anon94203042,

I think what is usually done to check if a point is within a triangle is to compute the area of the triangle and compare it with the sum of the area of the 3 triangles formed with the new point.

If this is equal, the point is inside the triangle otherwise the point is outside.

Here’s a quick and dirty demo:

```auto
Triangle t = new Triangle(200, 600, 400, 200, 600, 600);

void setup() {
  size(800, 800);
  background(20);
}

void draw() {
  background(20);
  
  if (t.isInside(mouseX, mouseY)) {
    t.setBackgroundColor(50, 240, 20, 40);
  } else {
    t.setBackgroundColor(255, 255, 255, 40);
  }
  
  t.draw();
}

class Triangle {
  PVector a, b, c;
  color backgroundColor;
  
  Triangle(float x1, float y1, float x2, float y2, float x3, float y3) {
    a = new PVector(x1, y1);
    b = new PVector(x2, y2);
    c = new PVector(x3, y3);
    backgroundColor = color(255, 255, 255, 40);
  }
  
  boolean isInside(float x, float y) {
    PVector p = new PVector(x, y);
    
    float area_1 = b.copy().sub(a).cross(p.copy().sub(a)).mag();
    float area_2 = c.copy().sub(b).cross(p.copy().sub(b)).mag();
    float area_3 = a.copy().sub(c).cross(p.copy().sub(c)).mag();
    float area_tot = b.copy().sub(a).cross(c.copy().sub(a)).mag();
    
    if (area_1 + area_2 + area_3 - area_tot == 0) {
      return true;
    }
    
    return false; 
  }
  
  void setBackgroundColor(float r, float g, float b, float o) {
    backgroundColor = color(r, g, b, o);
  }
  
  void draw() {
    fill(backgroundColor);
    stroke(255);
    strokeWeight(2);
    beginShape();
    vertex(a.x, a.y);
    vertex(b.x, b.y);
    vertex(c.x, c.y);
    endShape(CLOSE);
    
    fill(255);
    noStroke();
    ellipse(a.x, a.y, 8, 8);
    ellipse(b.x, b.y, 8, 8);
    ellipse(c.x, c.y, 8, 8);
  }
}

```

---

<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:** [March 7, 2020, 3:29pm UTC](https://discourse.processing.org/t/hitbox-around-a-triangle/18473/4 "2020-03-07T15:29:15Z")

</div>

You can use a line detection algorithm. Triangle has 3 sides, cast 3 rays from the mouse to the midpoint of the lines, if you have any intersections then you are outside of the triangle else you are inside.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 7, 2020, 5:10pm UTC](https://discourse.processing.org/t/hitbox-around-a-triangle/18473/5 "2020-03-07T17:10:14Z")

</div>

You can use this method to see if a point is inside a triangle

```auto
/**
 * Determine if the point pX/pY is inside triangle defined by triangle ABC whose
 * vertices are given by [ax,ay] [bx,by] [cx,cy]
 * @return true if the point is inside
 */
public boolean isInsideTriangle(double aX, double aY, 
  double bX, double bY, 
  double cX, double cY, 
  double pX, double pY) {
  double ax, ay, bx, by, cx, cy, apx, apy, bpx, bpy, cpx, cpy;
  double cCROSSap, bCROSScp, aCROSSbp;

  ax = cX - bX;  
  ay = cY - bY;
  bx = aX - cX;  
  by = aY - cY;
  cx = bX - aX;  
  cy = bY - aY;
  apx= pX - aX;  
  apy= pY - aY;
  bpx= pX - bX;  
  bpy= pY - bY;
  cpx= pX - cX;  
  cpy= pY - cY;

  aCROSSbp = ax*bpy - ay*bpx;
  cCROSSap = cx*apy - cy*apx;
  bCROSScp = bx*cpy - by*cpx;

  return ((aCROSSbp >= 0.0f) && (bCROSScp >= 0.0f) && (cCROSSap >= 0.0f));
}

```

---

<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:** [March 7, 2020, 8:32pm UTC](https://discourse.processing.org/t/hitbox-around-a-triangle/18473/6 "2020-03-07T20:32:45Z")

</div>

There is an illustrated discussion of the Triangle / Point formula here:

- [http://www.jeffreythompson.org/collision-detection/tri-point.php](http://www.jeffreythompson.org/collision-detection/tri-point.php)

---

<div class="post-metadata">

**Author:** ![anon94203042](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94203042](https://discourse.processing.org/u/anon94203042)\
**Post date:** [March 7, 2020, 9:55pm UTC](https://discourse.processing.org/t/hitbox-around-a-triangle/18473/8 "2020-03-07T21:55:56Z")

</div>

Cool! I’ll check it out. Thanks

 ![761752B659B24F11A3AD65B60A6F1529.png](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/677f06bdf711468707faf594c72c7993f90d2513.png)