detect two overlapping triangles and color the overlaying part with javascript

Question

I made two triangle divs with html. Im using jquery Ui to make them draggable.

Now I want to overlap these two triangles and color the overlaying part with another color like this:

Do you have any clues how I can do this with jQuery?

$(document).ready(function() {

  $(".triangle").draggable();
})

#triangle_1 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #00ff00;
}
#triangle_2 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class = "triangle"
id = "triangle_1" > </div>
     <div class="triangle" id="triangle_2"></div >

This is my working solution with rectangles instead of triangles (link).

Answer 1

The jQuery API has no method to find the intersection of 2 triangularly-styled DIVs.

You can find your "red intersecting triangle" using mathematics:

Part I: Find the vertex points of your red polygon

1. Find the 3 vertex points of both triangle-divs.
2. For both triangles, use #1 points to find the find the 3 line segments that form the triangle's sides.
3. Find each intersection point (if any) of each triangle-A line segment with each triangle-B line segment. See the utility below on how to find these intersections.

If you found exactly 3 intersection points in #3 above then the 2 original triangles intersect to form a new triangle -- then continue to Part II...

Part II: Create a triangle polygon from the 3 intersection points found in Part I

1. Find the "centerpoint" of your new triangle. This is the arithmetic mean of its x's and y's: centerX = (vertex1.x + vertex2.x + vertex3.x)/3 and centerY = (vertex1.y + vertex2.y + vertex3.y)/3

2. Calculate all the angles from the centerpoint to each of your user's points. You can do this using Math.atan2( (vertex1.y-centerY), (vertext1.x-centerX) ) ... and the same for vertex2 & vertex3.

3. Sort the points in ascending order by their angles calculated in #2.

This set of 3 points are the vertices of your red triangle.

Part III: Style a new red div into a triangle using the vertices from Part II

---

Utilities

Here's a javascript function that finds the intersection of 2 line segments (if any):

// Get interseting point of 2 line segments (if any)
// Attribution: http://paulbourke.net/geometry/pointlineplane/
function line2lineIntersection(p0,p1,p2,p3) {

    var unknownA = (p3.x-p2.x) * (p0.y-p2.y) - (p3.y-p2.y) * (p0.x-p2.x);
    var unknownB = (p1.x-p0.x) * (p0.y-p2.y) - (p1.y-p0.y) * (p0.x-p2.x);
    var denominator  = (p3.y-p2.y) * (p1.x-p0.x) - (p3.x-p2.x) * (p1.y-p0.y);        

    // Test if Coincident
    // If the denominator and numerator for the ua and ub are 0
    //    then the two lines are coincident.    
    if(unknownA==0 && unknownB==0 && denominator==0){return(null);}

    // Test if Parallel 
    // If the denominator for the equations for ua and ub is 0
    //     then the two lines are parallel. 
    if (denominator == 0) return null;

    // If the intersection of line segments is required 
    // then it is only necessary to test if ua and ub lie between 0 and 1.
    // Whichever one lies within that range then the corresponding
    // line segment contains the intersection point. 
    // If both lie within the range of 0 to 1 then 
    // the intersection point is within both line segments. 
    unknownA /= denominator;
    unknownB /= denominator;

    var isIntersecting=(unknownA>=0 && unknownA<=1 && unknownB>=0 && unknownB<=1)

    if(!isIntersecting){return(null);}

    return({
        x: p0.x + unknownA * (p1.x-p0.x),
        y: p0.y + unknownA * (p1.y-p0.y)
    });
}