# Physics Upon Collision move objects back

**URL:** <https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305>\
**Category:** Questions\
**Created:** [June 13, 2024, 3:36pm UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305 "2024-06-13T15:36:09Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![immunity](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/immunity/32/40353_2.png) [@immunity](https://forum.babylonjs.com/u/immunity)\
**Post date:** [June 13, 2024, 3:36pm UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/1 "2024-06-13T15:36:09Z")

</div>

Trying to do a bumper game

> **[Babylon.js Playground](https://playground.babylonjs.com/#5YVAH0%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I have a platform and 2 spheres on it. I want upon collision both spheres to push back (like billard)

Is there a native function to do that?

Also some “problems” (probably natural things but I want to disable them):

Is it possible for the spheres to not rotate from collision (rotate only on Y axis based on user’s mouse cursor position not because of collision)

After some time the spheres start bouncing on the platform is it possible to disable the Y force (although I do want whenever a sphere go off the platform to fall down)

Thanks!!!

I tried “programmatically” but it’s not very natural xD (I saw on net something like addInPulse or angular/linear velocity is this the correct approach? )

```auto
            // Calculate the direction from car1 to car2
            const direction = item.position.subtract(car.position).normalize();
            // Define the transition distance (4 units in this example)
            const transitionDistance = 2;
            const multiply1 = car.metadata.multiply;
            const multiply2 = item.metadata.multiply;
            // Calculate the target position for both cars (move back by transitionDistance)
            const targetPosition1 = car.position.subtract(
              direction.scale(
                multiply2 *
                  transitionDistance *
                  (item.metadata?.scaling / car.metadata?.scaling || 1)
              )
            );
            const targetPosition2 = item.position.add(
              direction.scale(
                transitionDistance *
                  multiply1 *
                  (car.metadata?.scaling / item.metadata?.scaling || 1)
              )
            );

            // Create animation for car1 to smoothly transition to the target position
            const animation1 = new Animation(
              "moveBack1",
              "position",
              40,
              Animation.ANIMATIONTYPE_VECTOR3,
              Animation.ANIMATIONLOOPMODE_CONSTANT
            );

            // Define keyframes for the animation of car1
            const keys1 = [];
            keys1.push({
              frame: 0,
              value: car.position.clone(), // Start position
            });
            keys1.push({
              frame: 60, // Duration of animation (in frames, adjust as needed)
              value: targetPosition1, // Target position
            });

            // Set keys to the animation of car1
            animation1.setKeys(keys1);

            // Apply animation to car1
            car.animations.push(animation1);
            scene.beginAnimation(car, 0, 60, false, 3); // Start the animation for car1

            // Create animation for car2 to smoothly transition to the target position
            const animation2 = new Animation(
              "moveBack2",
              "position",
              40,
              Animation.ANIMATIONTYPE_VECTOR3,
              Animation.ANIMATIONLOOPMODE_CONSTANT
            );

            // Define keyframes for the animation of car2
            const keys2 = [];
            keys2.push({
              frame: 0,
              value: item.position.clone(), // Start position
            });
            keys2.push({
              frame: 60, // Duration of animation (in frames, adjust as needed)
              value: targetPosition2, // Target position
            });

            // Set keys to the animation of car2
            animation2.setKeys(keys2);

            // Apply animation to car2
            item.animations.push(animation2);
            scene.beginAnimation(item, 0, 60, false, 3); // Start the animation for car2

```

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [June 13, 2024, 3:41pm UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/2 "2024-06-13T15:41:59Z")

</div>

cc @Cedric

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [June 13, 2024, 3:51pm UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/3 "2024-06-13T15:51:43Z")

</div>

Something like this ? [Babylon.js Playground](https://playground.babylonjs.com/#MKR6NF)  
also check examples on these pages : [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/physics/usingPhysicsEngine)

---

<div class="post-metadata">

**Author:** ![immunity](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/immunity/32/40353_2.png) [@immunity](https://forum.babylonjs.com/u/immunity)\
**Post date:** [June 13, 2024, 7:55pm UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/4 "2024-06-13T19:55:14Z")

</div>

Thank you for your reply.  
Yes something like that but a bit more bouncing back (a bit against of Third Law of Force Physics 😃 )

I use Nextjs and I haven’t been able yet to import Havok plugin (I’ve read  
RaananW’s solution for Vite but I could find something similar for Nextjs - trying to load the plugin from a location that doesn’t exist)

> [@Unable to load Havok plugin (error while loading .wasm file from browser)](https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/30?page=2):
>
> Hi! Has there been any update on this? I am working with Vite and Babylon too and encountered same issue with Havok physics. As a work around in dev, we have moved in the node\_modules but we are unable to build anything as well.

So in my project I’m using cannon.js (since I wasn’t able to fix the error with nextjs + havok plugin) and I moving the spheres using addInPlace.

But I see fromm [https://playground.babylonjs.com/#MKR6NF#1](https://playground.babylonjs.com/#MKR6NF#1) that using addInPlace doesn’t work for Havok Physics? I will ask for a bit of help integrating Havok plugin in Nextjs and try your approach with applyForce

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [June 14, 2024, 6:55am UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/5 "2024-06-14T06:55:47Z")

</div>

addinplace translate a vector3. it’s independent of physics engine.

[https://doc.babylonjs.com/typedoc/classes/BABYLON.Vector3](https://doc.babylonjs.com/typedoc/classes/BABYLON.Vector3)

---

<div class="post-metadata">

**Author:** ![immunity](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/immunity/32/40353_2.png) [@immunity](https://forum.babylonjs.com/u/immunity)\
**Post date:** [June 14, 2024, 8:58am UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/6 "2024-06-14T08:58:03Z")

</div>

I see.

Although i can’t figure out why in your example (#MKR6NF#)1 while I added the moveToTarget function with addInPlace it doesn’t move my sphere(first sphere) while in my example it does [https://playground.babylonjs.com/#5YVAH0#2](https://playground.babylonjs.com/#5YVAH0#2)

I am new in game developing (1 month xD) So I want to make a game where player steering his constant moving sphere with mouse cursor and upon physics collision between 2 spheres I want a burst bounce back.

I have used addInPlace for the movement of spheres (and old Physics API), is that ok or it’s better to use setLinearVelocity (with change of sphere’s direction by mouse cursor’s position)

---

<div class="post-metadata">

**Author:** ![immunity](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/immunity/32/40353_2.png) [@immunity](https://forum.babylonjs.com/u/immunity)\
**Post date:** [June 16, 2024, 9:02pm UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/7 "2024-06-16T21:02:16Z")

</div>

@Cedric I migrate my code to havok/ Physics v2 API and I used Force instead of addInPlace in order to move the spheres/“cars”.

> **[Babylon.js Playground](https://playground.babylonjs.com/#ZPR0UI%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I want to recreate this [game](https://youtu.be/nl9sbyrnh-M?t=197) (bumper-io)

I have set limit on frame rates (the higher the fps the higher the velocity, but I want constant velocity on different devices/fps) and also i have applied world’s havok speed limits because I don’t want the “cars” to accelerate to very high velocities.

Prolems ☹ :

1. I have applied Impulse in Collision callback function but It doesn’t see (when I change the value of the Vector3 for higher magnitude of the applied Impulse, the spheres/cars doesn’t bounce farther)

Probably because I have a velocity limiter? Is it possible to get that prefered constant velocity when spheres is moving freely and increase the velocity upon collision based on the applied Impulses/forces? Or I have to have checks/flags and occasionally increase the max allowed velocity if the spheres has been on a collision

2)When a sphere goes outside the ground/platform there is a delay before it start falling (reduce position.y) Increasing gravity doesn’t do much xD (UPDATE: Actually setting gravity to -100 improved this)

1. I don’t want the sphere to rotate on y axis from the collisions or movement. I want always to face the direction of the mouse cursor. This is possible only with creating a secondary Mesh non-PhysicBody and apply the graphics on that?

2. Also occasionally the spheres might travel on Y axis but I don’t want the spheres to jump only negative y (falling off the platform → losing) is this something possible with the Physics Engine (apply very high gravity?)

Thanks again!

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [June 17, 2024, 9:44am UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/8 "2024-06-17T09:44:02Z")

</div>

I would compute a speed limiter that way:

```auto
desired speed = current speed + acceleration * (1- current speed/max speed)

```

basically, the acceleration tends to 0 when current speed approached maximum speed.  
at speed 0, acceleration is maximum. at speed = max speed, acceleration is 0.

You’ll need to adapt that for braking/collision but the principle stays the same: modulate value with `current speed/max speed`

---

<div class="post-metadata">

**Author:** ![immunity](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/immunity/32/40353_2.png) [@immunity](https://forum.babylonjs.com/u/immunity)\
**Post date:** [June 30, 2024, 5:55am UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/9 "2024-06-30T05:55:39Z")

</div>

Thanks Cedric, Also another question if you could help 😃

I’ve seen that on 35 fps (locked) the speed of my spheres is nice/good  
If I drop the fps the spheres’ speed is descrease if I increase the fps (120) the speed is increased a lot, I believe physics /speed is related on frames and not time. What is a good way to lock the game speed despite the frame rates? I should use the engine deltaTime probably, there is a way to apply it on Physics/forces or I should apply it on desired speed equation?

`desired speed = current speed + acceleration * (1- current speed/max speed)`

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [July 1, 2024, 7:40am UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/10 "2024-07-01T07:40:55Z")

</div>

I’ll write a blog post about framerate independant interpolation. It should be released this week.

---

<div class="post-metadata">

**Author:** ![immunity](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/immunity/32/40353_2.png) [@immunity](https://forum.babylonjs.com/u/immunity)\
**Post date:** [July 1, 2024, 8:35am UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/11 "2024-07-01T08:35:19Z")

</div>

Thank you I’ll wait for this 😃

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [July 9, 2024, 5:20pm UTC](https://forum.babylonjs.com/t/physics-upon-collision-move-objects-back/51305/12 "2024-07-09T17:20:19Z")

</div>

> [@Having fun with Linear Interpolation](https://forum.babylonjs.com/t/having-fun-with-linear-interpolation/51957):
>
> Here are some tips with linear interpolation. Medium post : [Having fun with Linear Interpolation | by Babylon.js | Jul, 2024 | Medium](https://babylonjs.medium.com/having-fun-with-linear-interpolation-e2cd960f36d6) LinkedIn post : [Having fun with Linear Interpolation](https://www.linkedin.com/pulse/having-fun-linear-interpolation-cedric-guillemet-f8one/?trackingId=prf1vSXHwa6edrilTdJihA%3D%3D)