Overlapping Divs and Colliding Elements

Question

Overlapping Divs and Colliding Elements

I am currently exploring the moment when my two yellow divs will overlap and make contact with each other. It seems that the collision detection is triggering true even when the divs are not intersecting.

If you'd like to take a look at the example, check out this link.

    var degree = 0;
var degreeSmall = 0;
var timer=30;
var $spin = $(".gear");
var $spinSmall = $(".gear-small");
var to;
var toSmall;

function detectCollision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

$( document ).ready(function() {

    rotate();
});


function rotate() {
    degree++;
    $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});  
    $spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

    to = setTimeout(function() {
        rotate();
    }, timer);

    $('#result').text(detectCollision($('.gear .inner-gear.yellow'), $('.gear-small .inner-gear.yellow')));

}

Thank you.

jquery html css animation

Answer 1

Answer №1

Revision: Check out the updated demonstration below where both gears are shown rotating with polygon detection based on your request for dual gear rotation.

Initial Gear Rotation: I have modified your JSFiddle to function as per my understanding of your requirements here. The collision detection now displays "true" 25% of the time, which aligns with your expectations. However, I noticed some discrepancies in the calculation of your boxes. It seems necessary to exclude borders, so I adjusted the code to account for this by subtracting them from x1, y1, x2, and y2. Additionally, for border exclusion, employing innerWidth/innerHeight rather than outerWidth/outerHeight is more appropriate.

It is crucial to ensure that your rectangles do not encompass an extra pixel merely from adding the width or height. For instance, consider this line of 3 characters with positions:
0 1 2
a b c

The first character 'a' (x1) is located at position 0. The width is 3, yet 0+3 = 3, when character 'c' (r1) should correctly be positioned at 2. This inclusion of the additional pixel leads to erroneous left corner collision detection, making it seem like a collision occurs much sooner than it actually does. By subtracting 1 as demonstrated in the code below, this issue can be rectified:

function collision($div1, $div2) {
  var x1 = $div1.offset().left + parseInt($div1.css('borderLeftWidth'),10);
  var y1 = $div1.offset().top + parseInt($div1.css('borderTopWidth'),10);
  var h1 = $div1.innerHeight();
  var w1 = $div1.innerWidth();
  var b1 = y1 + h1 - 1;
  var r1 = x1 + w1 - 1;
  var x2 = $div2.offset().left + parseInt($div2.css('borderLeftWidth'),10);
  var y2 = $div2.offset().top + parseInt($div2.css('borderTopWidth'),10);
  var h2 = $div2.innerHeight();
  var w2 = $div2.innerWidth();
  var b2 = y2 + h2 - 1;
  var r2 = x2 + w2 - 1;

  return (r1 >= x2 && r2 >= x1 && b1 >= y2 && b2 >= y1);
}

Dual Gear Rotation: To achieve simultaneous rotation of both gears, comprehensive polygon detection is essential, considering the sides of polygons formed by the rotated corners. I have introduced corner divs to highlight yellow areas, incorporated go/stop/step buttons for debugging purposes, and made other divs translucent to enhance visibility. Reference the updated implementation JSFiddle here. Both gears exhibit rotation similar to your secondary example, displaying accurate collision detection results. The algorithm for polygon collision was sourced from a StackOverflow query.

Answer 2

Revision: Check out the updated demonstration below where both gears are shown rotating with polygon detection based on your request for dual gear rotation.

Initial Gear Rotation: I have modified your JSFiddle to function as per my understanding of your requirements here. The collision detection now displays "true" 25% of the time, which aligns with your expectations. However, I noticed some discrepancies in the calculation of your boxes. It seems necessary to exclude borders, so I adjusted the code to account for this by subtracting them from x1, y1, x2, and y2. Additionally, for border exclusion, employing innerWidth/innerHeight rather than outerWidth/outerHeight is more appropriate.

It is crucial to ensure that your rectangles do not encompass an extra pixel merely from adding the width or height. For instance, consider this line of 3 characters with positions:
0 1 2
a b c

The first character 'a' (x1) is located at position 0. The width is 3, yet 0+3 = 3, when character 'c' (r1) should correctly be positioned at 2. This inclusion of the additional pixel leads to erroneous left corner collision detection, making it seem like a collision occurs much sooner than it actually does. By subtracting 1 as demonstrated in the code below, this issue can be rectified:

function collision($div1, $div2) {
  var x1 = $div1.offset().left + parseInt($div1.css('borderLeftWidth'),10);
  var y1 = $div1.offset().top + parseInt($div1.css('borderTopWidth'),10);
  var h1 = $div1.innerHeight();
  var w1 = $div1.innerWidth();
  var b1 = y1 + h1 - 1;
  var r1 = x1 + w1 - 1;
  var x2 = $div2.offset().left + parseInt($div2.css('borderLeftWidth'),10);
  var y2 = $div2.offset().top + parseInt($div2.css('borderTopWidth'),10);
  var h2 = $div2.innerHeight();
  var w2 = $div2.innerWidth();
  var b2 = y2 + h2 - 1;
  var r2 = x2 + w2 - 1;

  return (r1 >= x2 && r2 >= x1 && b1 >= y2 && b2 >= y1);
}

Dual Gear Rotation: To achieve simultaneous rotation of both gears, comprehensive polygon detection is essential, considering the sides of polygons formed by the rotated corners. I have introduced corner divs to highlight yellow areas, incorporated go/stop/step buttons for debugging purposes, and made other divs translucent to enhance visibility. Reference the updated implementation JSFiddle here. Both gears exhibit rotation similar to your secondary example, displaying accurate collision detection results. The algorithm for polygon collision was sourced from a StackOverflow query.

Answer 3

Answer №2

The code provided for testing the intersection of axis-aligned bounding boxes seems to be correct. However, if you are encountering issues, it may be due to incorrect box coordinates being checked. While I won't make the corrections for you, I can guide you on how to troubleshoot this effectively:

One suggestion is to include a semitransparent overlay:

<div id="bb" style="background:rgba(0,0,0,0.5); position:absolute;"></div>

This will allow you to visually compare the elements:

$('#bb').offset({left:x1,top:y1}).width(w1).height(y1);

You can find an updated JSFiddle here.

Answer 4

The code provided for testing the intersection of axis-aligned bounding boxes seems to be correct. However, if you are encountering issues, it may be due to incorrect box coordinates being checked. While I won't make the corrections for you, I can guide you on how to troubleshoot this effectively:

One suggestion is to include a semitransparent overlay:

<div id="bb" style="background:rgba(0,0,0,0.5); position:absolute;"></div>

This will allow you to visually compare the elements:

$('#bb').offset({left:x1,top:y1}).width(w1).height(y1);

You can find an updated JSFiddle here.

Answer 5

Answer №3

Check out this demonstration:

To remove the border and make a width change, replace 49% with 50%

View demo

Alternatively, consider this solution

Modify the width & height to use calc(50% - 1px) instead of 49%, and adjust top & left positions from 149px to 148px

View demo

Answer 6

Check out this demonstration:

To remove the border and make a width change, replace 49% with 50%

View demo

Alternatively, consider this solution

Modify the width & height to use calc(50% - 1px) instead of 49%, and adjust top & left positions from 149px to 148px

View demo

Overlapping Divs and Colliding Elements

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing CSS to position elements on a webpage

Tips for creating a more condensed materialized table with form elements

What is the best way to target the nth-child() of a slotted element within a web component that utilizes multiple uniquely named slots?

qunit timer reset

Enhancing the performance of your code by optimizing it using jQuery when a checkbox is either checked or

What is the best way to ensure my hover caption spans the entire size of the image?

What steps are involved in establishing client-side AJAX polling?

Steps for setting up an info window on a Google map with multiple markers

Sort your Laravel pagination table effortlessly with just one click

Top method for individually choosing multiple selections from a foreach loop output

Mastering the art of seamless navigation within a single page through the magic of

What is the best way to activate a function to control animation transitions?

Utilizing Twitter Bootstrap to populate form fields from a dropdown selection

Solving the default font problem in Laravel

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

The submit button is not reading the JavaScript file for validation and instead goes directly to my PHP file

Issue with CakePdf unable to properly render CSS styling

Struggling to effectively use XPath to target LI elements that contain specific text

Is there a way to eliminate the "x" in the upper right corner of a Foundation Joyride?

When JQuery is written in a separate file, it does not get applied in the HTML file