Move text with collision detection

[Buntafujiwaaa]

Hi guys!

I've been trying to figure out how to do a text that interacts with a object. With the text being push away from an object when it's near the object.

I tried using on several physics library and it seems most of them are overkill and hard to control. (For example, its hard to bind the text back to its original position as the collision library either makes it a static or a dynamic [reacting to gravity]. )

Currently, there is what is on my head. Correct me if i'm wrong.

I probably need to make use requestAnimationFrame to constantly detect the collision. As the collision object will probably be a constantly changing object.

 

I can't seems to wrap my head around on how to create a Tween function that pushes a characters (near colliding object) out and then back when its not near the colliding object.

 

Any help is appreciated
 

[OSUblake]

If your objects aren't rotated, Axis-Aligned Bounding Box (AABB) Collision Detection is really fast, and dead simple. All it does is check to see if two rectangles are overlapping. This is the same form of collision detection used in Draggable's hitTest method.

 

var rect1 = element1.getBoundingClientRect();
var rect2 = element2.getBoundingClientRect();

if (intersects(rect1, rect2)) {
  // collision detected
}

function intersects(a, b) {
  return !(b.left > a.right || b.right < a.left || b.top > a.bottom || b.bottom < a.top);
}

 

 

See the Pen fd96fdd774bb202254adefed93916d8a?editors=0010 by osublake (@osublake) on CodePen

 

How you implement and optimize collision detection is going to depend on what you're doing. For example, what happens on impact? Does it stop, bounce, do you make any adjustments for the overlap, etc?  And how many objects are being animated? I used the onUpdate callback in that demo, but if I had more then 1 object that is constantly being animated, I'd probably do all the collision detection using the ticker, which uses requestAnimationFrame.

 

If you need more help, please provide a demo. It's really hard to advise without seeing what you're trying to do.