Physics Dynamics

behave3d introduces simulated movements caused by attracting (and repulsing) forces, so that elements can be attracted to paths and other HTML elements in pseudo-realistic way. Every element has its position and velocity updated on each drawing frame based on the accelerations applied by its controllers. The 'physical' movement of the elements can be mixed with regular movements and other transformations/effects.

Inertial Behavior of Properties

All core controllers that animate translation, rotation, scaling, opacity and other DOM and stylesheet properties ( move(), circle(), rotate(), scale(), opacity() and property() ) have options for enabling "inertia"-like behavior in the animated properties:


#ma
#mb
#mc

#ra
#rb
#rc

#sa
#sb
#sc

Physical Simulations

Since the behave3d engine works with fixed frame duration (i.e. assumes the browser maintains a constant framerate of 60fps), no noise is introduced in the calculations by timing inaccuracies, and a simulation always follows exactly the same course.

Here's an element gravitating towards a moving position on a triangular path with a gravitate() controller, where the path is described by 3 move() controllers.


An element is assigned a gravitate() controller which "attracts" it towards another element:


#a
#b

A matrix of elements each of which has 4 controllers assigned: gravitate(), which "pulls" the element towards the mouse cursor; spring(), which "pulls" the element towards its initial position; slow(), which slows the element's movement as if friction is applied; lookAt(), which rotates the element to always "look" at the mouse cursor.


Manually Fake Inertia

Pseudo-physical movements can also be realised without using the special physics functionality of controllers. Here is an example that displays inertial-like behavior caused by moving an element towards a target, in fixed-duration steps, but moving it a little more than needed every time. So at the end of every movement, the controller has to order a smaller movement in the opposite direction, in order to compensate the last oversized movement.

Mouse Hunter