When velocity exceeds a certain threshold, collision detection may become unreliable

As I delve into detecting collisions between high-velocity balls, an obstacle arises. This issue seems to be quite common due to the nature of fast-moving objects colliding. I suspect that the solution lies within derivatives, and while I've drafted something on my own, I'm hesitant to reinvent the wheel if there exists a tried-and-tested method.

Any insights that can shed light on my journey would be greatly appreciated!

To illustrate this predicament further, consider a simple example: if two balls are traveling at speeds like 1.5 or 3, they interact smoothly. However, when utilizing significantly higher velocities such as 50, failures occur.

<html>
<head>
  <title>Collision test</title>
</head>
<body>

  <canvas id="canvas"></canvas>

  <script>

    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    const width = window.innerWidth;
    const height = window.innerHeight-4;
    const center = { x: width/2, y: height/2 };

...
...

I have also shared this code snippet on JSBin for further exploration and collaboration.

Answer №1

The issue arises from the fact that the collision detection relies on distance between ball locations, which can result in balls "hopping" past each other at high speeds without triggering a collision event.

One potential solution involves calculating points along these hops for each ball and analyzing their respective times to pinpoint instances when the balls are close enough to collide. By interpolating positions between frames, it's possible to check for collisions at these interpolated positions. However, caution is advised as the timing of these close encounters must align for a collision to occur.

If tackling this challenge independently seems daunting, consider exploring javascript frameworks or libraries tailored specifically for gaming and physics calculations. While I haven't personally used them, resources like Google should provide valuable insights into available options.

Answer №2

It appears that you have a good grasp on the issue at hand: when your scene is discretely sampled, high-speed projectiles may pass through or fail to hit objects they should collide with.

Increasing the frame rate may seem like a simple solution, but it quickly becomes impractical as faster projectiles require more frames. This approach is not recommended. What you really need is a method for continuous collision detection, such as what Bullet utilizes to avoid the problem you're facing.

A straightforward solution could involve creating a cylinder from the current_position to the last_position with the same radius as the projectile. By checking collisions with these cylinders, you can address scenarios where a projectile hits a stationary target. For moving targets, you could begin by comparing cylinders with cylinders as previously mentioned. Upon collision, you would then recalculate the position of the colliding objects at the time of impact to determine if a true collision occurred.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The function of modal in JavaScript is not working properly

I am encountering a problem with my web page that is running on Wildfly 12. It is a simple Java EE project that I developed in Eclipse Neon. The issue arises when I try to use Bootstrap modals, as every time I attempt to open or use the methods in a JavaSc ...

"Error: The chai testing method appears to be improperly defined and is not

I am trying to set up a Mocha and Chai test. Here is my class, myClass.js: export default class Myclass { constructor() {} sayhello() { return 'hello'; }; } Along with a test file, test.myclass.js: I am attempting to a ...

Using the useState hook with an array of objects is not functioning as intended

I have initialized a useState object in my file like this: const [comments, setComments] = useState({ step_up: [], toe_walking: [], toe_touches: [], squat: [], side_to_side: [], rolling: [], leg_lifts: [], hand_to_knees: [], floo ...

Django DRF functions properly, however it returns an error when sending a response to an AJAX request

Successfully implemented an AJAX request using PUT in DRF. All functionalities are functioning correctly except for the error callback being triggered: DRF section: class ProductDataViewSet(viewsets.ViewSet): authentication_classes = [SessionAuthentic ...

Interactive Javascript Dropdown Selection

I'm currently developing a registration page for a website and I've added a drop-down box that explains to users why we need their birthday. However, I seem to be having issues with my code. Take a look at the script below: <script language=& ...

Using the scrollIntoView() method in VUE.js to center an li element within a component

One of the components I'm working with has multiple list items, and I want to achieve a functionality where clicking on any item will center it inside the component, making it visible in the center of the view. <card-maintenance v-for="m ...

Retrieve elements within the array ranging from index 1 to 5 using Javascript

How can I log items from index 1 to 5 in the current array by using a loop? let cars = ["AUDI","BMW","LEXUS","VOLKSWAGEN","FERRARY","PORSCHE"] for (let i = 0; i < cars.length; i++) { if (i >= 1 && i <= 5) { console.log("The current ...

The XML request fails to retrieve any output from the PHP script

I am seeking tools to enable the calling of .php from .html files. Here is an issue: while this example successfully works in a .php file: <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> &l ...

Discovering the names of files in a directory with Angular

Looking for a solution in Angular JS within a ModX app to retrieve file names from the gallery package every time it is updated. Is there a way to achieve this using Angular? I've been searching for Javascript solutions to this issue, but most of the ...

Material UI grid items overlapping issueIn Material UI, the grid

Here is a snippet of code for your review: <div className="mx-md-4 my-5 mx-sm-0 mx-xs-0 flex-column align-items-center d-flex justify-content-center "> <Grid className='mt-3' container spacing={2}> ...

Resizing Elements with JQuery and Moving Them Forward

I have successfully made multiple objects draggable and resizable using the JQuery plugins for Draggable and Resizable. While dragging an object, it automatically comes to the front due to the stack option. However, when resizing an element without draggin ...

Enter your text in the box to search for relevant results

I need assistance with a code that allows me to copy input from a text box to the Google search box using a copy button. Upon pressing the Google search box button, it should display the search results. Here is the code I have been working on: http://jsf ...

Generating a new POST header

I have encountered a challenge: I need to transfer an array to another page without using AJAX. My goal is to either redirect the user to the new page or open a popup displaying the new page, all while ensuring the array data is sent via a POST request. C ...

Having trouble with ReactJS: Why is this.setState not working?

Hello there, I am currently learning ReactJS and struggling with an issue where I keep getting the error message "this.setState is not a function". constructor() { super(); this.state = { visible: false, navLinesShow: true }; ...

Customize data appearance in Django Admin interface

I am working with a model that has a json field. The data stored in this field may not always be pretty-printed, and I am okay with it as long as it is valid. However, when the data is displayed in Django admin, I would like it to be pretty printed for eas ...

Is it possible to import data into a script?

When working with Angular, I am attempting to: $scope.data = "<script> alert('hi'); </script>"; Unfortunately, this approach does not seem to be effective. I also experimented with adding ng-bind-html but did not achieve any success ...

Creating an expandable discussion area (part II)

After checking out this query that was posted earlier, I am interested in implementing a similar feature using AJAX to load the comment box without having to refresh the entire page. My platform of choice is Google App Engine with Python as the primary lan ...

What could be causing the issue with npm install packages not functioning properly?

Currently, I am in the process of setting up and deploying a particular git repository locally: https://github.com/maxie112/gatsby-ecommerce-theme I am strictly adhering to the instructions provided for Mac OS. Here are the encountered error logs; maxden ...

Exploring MapQuest API: Unraveling the process of dissecting MapQuest

I am currently exploring MapQuest navigation and utilizing JavaScript code to retrieve the data. Although I am able to extract JSON content in my application, I am unsure of how to utilize this data for navigation. I have started a new project and execute ...

Guide to displaying a local HTML file in CKEditor 4.3 using jQuery

Using CKEditor 4.3 on my HTML page, I aim to import content from a local HTML file and display it within the editor. (My apologies for any English errors as I am Brazilian :P) The jQuery code I have tried is as follows: $(document).ready(function(){ ...