Conflict arises between entities due to the speed of one

I am working on creating a scenario in my world where a ball enters a tube with multiple sections. To achieve this, I have constructed the tube using a series of box shapes that I manipulate by moving and rotating them to form the complete structure of the tube. Progress has been good so far.

However, I am facing challenges when it comes to the collisions between these tubes and the ball (which is represented by a single sphere shape). Depending on the velocity at which the ball is propelled, there are instances where the ball passes through the tube as if there were no obstacles present. When applying a lower velocity value, the collision behaves as expected.

I have attempted various solutions such as increasing the number of iterations in the solver, adjusting the step of the world, and modifying different options of the contactMaterial. Unfortunately, none of these fixes have yielded positive results. As I am relatively new to Cannon.js and physics engines in general, I am left wondering if there is a specific configuration setting within my world that I may be overlooking.

To visually demonstrate how velocity impacts the collisions based on the 'three_fps' example, I have created two brief gifs:

  • with a shootVelo at 10:

  • with a shootVelo at 60:

Any assistance or advice on resolving this issue would be greatly appreciated! Thank you :)

Answer №1

If you're interested in learning more about the tunneling issue, check out this article. Keep in mind that Cannon.js does not offer Continuous Collision Detection (CCD), leading to several potential solutions:

  • Adjusting to a smaller time step,
  • Increasing the thickness of the tube walls, or
  • Maintaining a lower shootVelo.

Answer №2

In my experience, the effectiveness of collision calculations largely depends on the method used. When I was developing a small game previously, I encountered a similar issue. The solution that worked for me involved adjusting the object's depth based on the difference in position of the moving object (treating one object as stationary and the other as moving).

This approach resolved collisions with thin objects and fast-moving sprites. Essentially, if the sprite moved quickly (resulting in a large position change), it would interact with thin objects as if they were thicker. Conversely, if the sprite moved slowly, it would still recognize thin objects appropriately.

Explaining this concept can be challenging, so if you're interested, feel free to take a look at the code here: https://github.com/Mc128k/SquaredBobble

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 first component triggers an event when a dynamic component is added and clicked

I currently have a component that includes a v-checkbox with dynamic behavior. The issue arises when clicking one of the dynamic v-checkbox elements within a v-for loop. This triggers the v-checkbox :key="'checkfont'" causing the checkFont prop v ...

Check if a user is currently on the identical URL using PHP and JavaScript

In my Laravel and AngularJS project, I have a functionality where users can view and edit a report. I'm looking to add a feature that will prevent multiple users from editing the report at the same time - essentially locking it while one user is makin ...

What is the most effective way to extract the output from a JSONP request and utilize it beyond the

I have a function that is working well. I had to use JSONP to handle cross-domain issues, and I also wrote an HTTP module to change the content-type. However, I did not include a callback name in the URL. function AddSecurityCode(securityCode, token) { va ...

A sleek Javascript gallery similar to fancybox

I'm currently working on creating my own custom image gallery, inspired by fancybox. To view the progress so far, please visit: I've encountered some issues with the fade effects of #gallery. Sometimes the background (#gallery) fades out before ...

Learn how to retrieve data prior to rendering with Vue 3 and the composition api

Is there a way to fetch data from an API and populate my store (such as user info) before the entire page and components load? I have been struggling to find a solution. I recently came across the beforeRouteEnter method that can be used with the options ...

Tips for fixing flickering tables and bringing the scrollbar back to the top in your DataTable Forge viewer

Presently, I am working with a DataTable that consists of 100 rows and is being set up using lists. The lists dynamically change based on the selected name from a drop down. To achieve this, I use: $("#datatable").remove(); this.datatable = new Au ...

Converting JavaScript QML objects to C++ QT components

I have a QML JavaScript function that generates and returns a component called Item: function createComponent() { var component = Qt.createComponent('MyComponent.qml'); var obj = component.createObject(container, {'x': 0, &apos ...

The function crypto.randomUUID() does not exist in the Vitest library

vite.config.ts import { sveltekit } from '@sveltejs/kit/vite'; const config = { plugins: [sveltekit()], test: { include: ['**/*.spec.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], environment: 'jsdom', glo ...

What is the best way to retrieve the date and time using the Open Weather API for a specific city

Currently, I am in the process of developing a weather application using React and integrating the Open Weather API. Additionally, I have incorporated an external library for weather icons. The functionality allows users to input a city name and receive t ...

Make the mp3 file automatically download/save as by forcing the link

My website has links to mp3 files using normal <a href="file.mp3"> tags. However, many users with Apple Quicktime installed experience the mp3 files opening instead of saving when clicking on the links. Is there a way to force the browser to save t ...

Creating a nested list of objects in JavaScript can be achieved by using arrays within objects

I'm currently in the process of creating a new Product instance in Javascript, with the intention of sending it to the server using [webmethod]. [WebMethod] public static void SetProduct(Product product) { // I need the Product instance ...

How can I customize the color of the cross in the hamburger menu?

Seeking guidance for a technical issue I'm facing. The problem lies with the X button on the menu - although everything seems to be in order, I encounter an error when attempting to change its color to black. If anyone has insight or advice on how I c ...

Transferring the bundle files of one Next.js app to another Next.js app

Currently, I manage two distinct Next.js applications that handle separate sets of routes. Additionally, I have developed a custom Next.js server that determines which page to display based on the requested URL. I am interested in utilizing the custom ser ...

Tips for incorporating a download button into a video player using Plyr JS

I'm using Plyr JS and I am trying to add a download option for each video. Here is what I've done so far to make the download option work: Even though I have included: controlsList="nodownload" <video controls crossorigin playsinline contro ...

Identify the row containing a value of null using jQuery (functionality not performing as anticipated)

Whenever the user clicks on the GetData button, I retrieve JSON data and display it in an HTML table similar to the demo below. Demo: https://plnkr.co/edit/I4XYY6CZohf7IS6wP8dR?p=preview There are instances where the value can be null, such as the loanNu ...

Utilizing requirejs for handling asynchronous callback functions with ajax

If I need to take advantage of the jQuery AJAX API features and customize settings for each ajax call made by my application, it can be done like this: For example, imagine a page that showcases employee information in a table using ajax calls to an API. ...

Is there a way to run /_next/static/xxx.js using a script tag?

I have customized my next.config file (webpack) to generate a static JavaScript file (.next/static/loader.js). The original loader.js is an Immediately Invoked Function Expression (IIFE): (function stickerLoader(){ alert('Hello'); // ... so ...

I am facing an issue where childnodes return as undefined after a clone operation, making it impossible for me to assign their attributes as needed,

There seems to be an issue with changing the attributes of my child nodes as they are returning as undefined. It's possible that the problem arises when the nodes are placed in a list. Upon testing, it was discovered that placing the nodes in a list c ...

Techniques for transferring child properties and values to parent components upon the screen being initialized

Is there a way to pass property values from a child component to a parent component when the react app is first loaded? In my scenario, I have a parent component named app.js that renders a home component containing a JSON component. Initially, upon loadi ...

Vue.js error: Reaching maximum call stack size due to failed data passing from parent to child component

I'm having trouble passing data from a parent component to a child component. I tried using props and returning data, but with no success. The parent component is a panel component that contains the data, while the child component is a panelBody. Thi ...