Collision between two elements with rotating

Question

var keys = new Array();
 var direction;
 var direction;
 var iNr = 0;
 
 $(document).ready(function(){
  looper();
  $("#demo1").css("margin-top", 400 + "px");
  $("#demo2").css("margin-left", 380 + "px");
  myFunction();
 });
 
 function myFunction()
 {
  iNr = iNr + 0.5;
  $("#main").css("transition","all 0.1s");
  $("#main").css("transform","rotate(" + iNr + "deg)");
  
  
  setTimeout(function()
  {
   myFunction();
  }, 50);
 
 }
 
 function looper()
 { 
  var p =$("#circle");
  var offset = p.offset();
  var t =$(".red");
  var roffset = t.offset();
  
  var rect1 = {x: offset.left, y: offset.top, width: p.width(), height: p.height()}
  var rect2 = {x: roffset.left, y: roffset.top, width: t.width(), height: t.height()}

  if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.height + rect1.y > rect2.y) {
   
   console.log("now");
  }
  
  if(direction == "left")
  {
   if(offset.left - 50 > 0)
   {
    $("#circle").css("left", ($("#circle").position().left - 2) + "px");
   }
  }
  if(direction == "up")
  {
   if(offset.top - 50 > 0)
   {
    $("#circle").css("top", ($("#circle").position().top - 2) + "px");
   }
  }
  if(direction == "right")
  {
   if((offset.left + 50) < $(window).width())
   {
    $("#circle").css("left", ($("#circle").position().left + 2) + "px");
   }
  }
  if(direction == "down")
  {
   if((offset.top + 50) < $(window).height())
   {
    $("#circle").css("top", ($("#circle").position().top + 2) + "px");
   }
  }
  
  
  
  ID=window.setTimeout("looper();", 1);
 }

 
 $(document).keyup(function(event) {
  
  if (event.keyCode == 37)
  {
   var index = keys.indexOf("37");
   keys.splice(index, 1);
   direction = "";
  }
  if (event.keyCode == 38)
  {
   var index = keys.indexOf("38");
   keys.splice(index, 1);
   direction = "";
  }
  if (event.keyCode == 39)
  {
   var index = keys.indexOf("39");
   keys.splice(index, 1);
   direction = "";
  }
  if (event.keyCode == 40)
  {
   var index = keys.indexOf("40");
   keys.splice(index, 1);
   direction = "";
  }
 });
 
 $(document).keydown(function(event) {
  
  if (event.keyCode == 37)
  {
   keys.push("37");
   direction = "left";
  }
  if (event.keyCode == 38)
  {
   keys.push("38");
   direction = "up";
  }
  if (event.keyCode == 39)
  {
   keys.push("39");
   direction = "right";
  }
  if (event.keyCode == 40)
  {
   keys.push("40");
   direction = "down";
  }
 });

<!doctype html>
<html lang="en">

 <head>
  <meta charset="utf-8">
  <title>test</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
 </head>
 
 
 <body style="background-color:black; overflow-y:scroll;">
 
  <div style="width:400px; margin-left:500px; height:400px;" id="main">
   <div id="demo1" style="width:400px; height:20px; background-color:red; position:absolute;" class="red test all"></div>
   <div id="demo2" style="width:20px; height:400px; background-color:yellow; position:absolute;" class="test all"></div>
   <div id="demo3" style="width:400px; height:20px; background-color:blue; position:absolute;" class="test all"></div>
   <div id="demo4" style="width:20px; height:400px; background-color:green; position:absolute;" class="test all"></div>
  </div>
  
  <div style="width:25px; height:25px; background-color:white; position:absolute; border-radius:50%;" id="circle"></div>
 
 </body>
</html>

I have programmed a game. In this game my function checks, whether there is a collision between div1 and div2. Or if they are overlapping or so... how you want to spell it. Without a rotation everything is ok.

But now i have a problem. I want to rotate div2 with transform:rotate(Xdeg);

but if I do this my calculation for the collision dosen't work.

I use this:

var rect1 = {x: 5, y: 5, width: 50, height: 50}
var rect2 = {x: 20, y: 10, width: 10, height: 10}

if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.height + rect1.y > rect2.y) {
    // collision detected!
}

do you have any ideas to solve this problem?

Thanks for helping :-)

FWIW, this'll likely turn out at least 10x harder than what you've currently got. You'd have to calculate the (x, y) coordinates of all four edges of the rotated div, and then test whether any of those line segments intersect (or are wholly contained within) the other div. — Alnitak, Jan 05 '17 at 16:18
IMHO you've now got way too much code in this question, such that you're even less likely to get an answer. Either way, there's likely to be solutions for general (non-axis-aligned) box/box intersection tests online. — Alnitak, Jan 05 '17 at 17:35

Blauharley · Accepted Answer · 2018-01-02T13:45:18.547

There are several ways to do this. This example just guides you of how it could be done with rectangles.

These are the steps that are done here:

You have to calculate the position of all rotated corners of all rectangles that you want to check whether they are being collided. To get these rotated corners, you can use several methods. In this example 2d-vectors and a 2d-rotation-matrix are used:
- a vector that has its origin in the center of a rectangle and directs to the top-left-corner(x,y) of a rectangle:
```
var center = {
    x: x + width / 2,
    y: y + height / 2
};

var vector = {
    x: (x - center.x),
    y: (y - center.y)
};
```
- multiply this vector with a rotation-matrix to rotate this vector:
```
// modified sin function to calulcate sin in the unit degrees instead of radians
function sin(x) {
   return Math.sin(x / 180 * Math.PI);
}

// modified cos function 
function cos(x) {
   return Math.cos(x / 180 * Math.PI);
}

var rotationMatrix = [[cos(angle), -sin(angle)],[sin(angle), cos(angle)]];

var rotatedVector = {
    x: vector.x * rotationMatrix[0][0] + vector.y * rotationMatrix[0][1],
    y: vector.x * rotationMatrix[1][0] + vector.y * rotationMatrix[1][1]
};
```
- And finally get the rotated top-left-corner, you can start from the center of a rectangle and go to where the rotated vector points to. This is where top-left-corner is located after rotation:
```
{
    x: (center.x + rotatedVector.x),
    y: (center.y + rotatedVector.y)
}
```
- All the steps described above are done by getRotatedTopLeftCornerOfRect and must be done with all other corners as well. Before the location of the next corner (right-top) can be calculated next vector must be calulcated that points to this corner. To get the next vector that points to the top-right-corner the angle between the first vector (left-top) and the second vector (right-top) is calculated. The third vector points to the right-bottom-corner when its angle is incremended by the first angle and the second angle and the fourth vector is rotated by an angle that is summed up the first, second and third angle. All of this is done in the setCorners-method and this image shows this process partly:

To detect a collision there are tons of algorithms. In this example the Point in polygon algorithm is used to check each rotated corner of a rectangle whether a corner is with the border or within another rectangle, if so, then the method isCollided returns true. The Point in polygon algorithm is used in pointInPoly and can also be found here.

Combining all of the steps described above was tricky, but it works with all rectangles of all sizes and the best of all you can test it right here without a library by clicking on "Run code snippet".

(tested browsers: FF 50.1.0, IE:10-EDGE, Chrome:55.0.2883.87 m):

    var Rectangle = (function () {

        function sin(x) {
            return Math.sin(x / 180 * Math.PI);
        }

        function cos(x) {
            return Math.cos(x / 180 * Math.PI);
        }

        function getVectorLength(x, y, width, height){
            var center = {
                x: x + width / 2,
                y: y + height / 2
            };
            //console.log('center: ',center);
            var vector = {
                x: (x - center.x),
                y: (y - center.y)
            };
            return Math.sqrt(vector.x*vector.x+vector.y*vector.y);
        }

        function getRotatedTopLeftCornerOfRect(x, y, width, height, angle) {
            var center = {
                x: x + width / 2,
                y: y + height / 2
            };
            //console.log('center: ',center);
            var vector = {
                x: (x - center.x),
                y: (y - center.y)
            };
            //console.log('vector: ',vector);
            var rotationMatrix = [[cos(angle), -sin(angle)],[sin(angle), cos(angle)]];
            //console.log('rotationMatrix: ',rotationMatrix);
            var rotatedVector = {
                x: vector.x * rotationMatrix[0][0] + vector.y * rotationMatrix[0][1],
                y: vector.x * rotationMatrix[1][0] + vector.y * rotationMatrix[1][1]
            };
            //console.log('rotatedVector: ',rotatedVector);
            return {
                x: (center.x + rotatedVector.x),
                y: (center.y + rotatedVector.y)
            };
        }

        function getOffset(el) {
            var _x = 0;
            var _y = 0;
            while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
                _x += el.offsetLeft - el.scrollLeft;
                _y += el.offsetTop - el.scrollTop;
                el = el.offsetParent;
            }
            return {
                top: _y,
                left: _x
            };
        }

        function pointInPoly(verties, testx, testy) {
            var i,
                    j,
                    c = 0
            nvert = verties.length;
            for (i = 0, j = nvert - 1; i < nvert; j = i++) {
                if (((verties[i].y > testy) != (verties[j].y > testy)) && (testx < (verties[j].x - verties[i].x) * (testy - verties[i].y) / (verties[j].y - verties[i].y) + verties[i].x))
                    c = !c;
            }
            return c;
        }

        function Rectangle(htmlElement, width, height, angle) {
            this.htmlElement = htmlElement;
            this.width = width;
            this.height = height;
            this.setCorners(angle);
        }

        function testCollision(rectangle) {
            var collision = false;
            this.getCorners().forEach(function (corner) {
                var isCollided = pointInPoly(rectangle.getCorners(), corner.x, corner.y);
                if (isCollided) collision = true;
            });
            return collision;
        }

        function checkRectangleCollision(rect, rect2) {
            if (testCollision.call(rect, rect2)) return true;
            else if (testCollision.call(rect2, rect)) return true;
            return false;
        }

        function getAngleForNextCorner(anc,vectorLength) {
            var alpha = Math.acos(anc/vectorLength)*(180 / Math.PI);
            return 180 - alpha*2;
        }

        Rectangle.prototype.setCorners = function (angle) {
            this.originalPos = getOffset(this.htmlElement);
            this.leftTopCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);

            var vecLength = getVectorLength(this.originalPos.left, this.originalPos.top, this.width, this.height);
            //console.log('vecLength: ',vecLength);

            angle = angle+getAngleForNextCorner(this.width/2, vecLength);
            //console.log('angle: ',angle);
            this.rightTopCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);

            angle = angle+getAngleForNextCorner(this.height/2, vecLength);
            //console.log('angle: ',angle);
            this.rightBottomCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);

            angle = angle+getAngleForNextCorner(this.width/2, vecLength);
            //console.log('angle: ',angle);
            this.leftBottomCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);

            //console.log(this);
        };

        Rectangle.prototype.getCorners = function () {
            return [this.leftTopCorner,
                this.rightTopCorner,
                this.rightBottomCorner,
                this.leftBottomCorner];
        };

        Rectangle.prototype.isCollided = function (rectangle) {
            return checkRectangleCollision(this, rectangle);
        };

        return Rectangle;

    }) ();


    var rotA = 16;
    var widthA = 150;
    var heightA = 75;
    var htmlRectA = document.getElementById('rectA');

    var rotB = 28.9;
    var widthB = 50;
    var heightB = 130;
    var htmlRectB = document.getElementById('rectB');

    var msgDiv = document.getElementById('msg');

    var rectA = new Rectangle(htmlRectA, widthA, heightA, rotA);
    var rectB = new Rectangle(htmlRectB, widthB, heightB, rotB);

    window.requestAnimFrame = function(){
        return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                window.oRequestAnimationFrame      ||
                window.msRequestAnimationFrame;
    }();

    function draw(){

        rotA+=1.2;
        htmlRectA.setAttribute('style','-ms-transform: rotate('+rotA+'deg);-webkit-transform: rotate('+rotA+'deg);transform: rotate('+rotA+'deg)');

        rotB+=5.5;
        htmlRectB.setAttribute('style','-ms-transform: rotate('+rotB+'deg);-webkit-transform: rotate('+rotB+'deg);transform: rotate('+rotB+'deg)');

        rectA.setCorners(rotA);
        rectB.setCorners(rotB);

        if(rectA.isCollided(rectB)){
            msgDiv.innerHTML = 'Collision detected!';
            msgDiv.setAttribute('style','color: #FF0000');
        }
        else {
            msgDiv.innerHTML = 'No Collision!';
            msgDiv.setAttribute('style','color: #000000');
        }

        setTimeout(function(){
            window.requestAnimFrame(draw);
        },50);
    }

    window.requestAnimFrame(draw);

#rectA{
        background-color: #0000FF;
        width:150px;
        height:75px;
        position:absolute;

        top:60px;
        left:180px;

        -ms-transform: rotate(16deg);
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg);
}

#rectB{
        background-color: #FF0000;
        width:50px;
        height:130px;
        position:absolute;

        top:140px;
        left:250px;

        -ms-transform: rotate(28.9deg);
        -webkit-transform: rotate(28.9deg);
        transform: rotate(28.9deg);

}

<div id="rectA">A</div>
<div id="rectB">B</div>

<div id="msg"></div>

I'm so sorry that i am only answering now. I'm really impressed about this code. Thank you very much for your help. And again, I apologize for my late reply. — WilliWespe, Apr 13 '17 at 10:13

Collision between two elements with rotating

1 Answers1

Linked