Dynamic elements fall when the scene loads based on the angle and intensity of the scene gravity.
Inactive and Static Elements are anchored to their position.
By default, all elements are 'inactive' elements, which are not affected by Physics. Dynamic elements fall & accelerate based on the scene's gravity. Static elements form the boundaries through which dynamic elements will not pass. Inactive elements do not move with gravity nor form boundaries. Dynamic Elements Follow the 'Scene Physics Gravity' intensity and angle.
Since dynamic elements react to boundaries, moving boundaries can create new movement in your document after the initial gravity simulation has run its course. Physics simulations continously run. Using Hype's standard animation tools you can bring physics elements to life. Click Bounce to animate the position of the blue rectangle:
Loading a new scene starts the Main Timeline at 00:00.00, and also resets the physics simulation.
Physics + Animation
In most cases, you’ll only set a single ‘Scene Physics Gravity’ value for your scene. For more advanced simulations, you can set multiple gravity forces in a single scene for different groups of elements by creating a symbol. All elements within that symbol will follow the defined force.
This document demonstrates Physics concepts in Tumult Hype Professional so you can quickly get up to speed. Our goal: create real (convincing) physics simulations on the web with no code. Download this document or use the arrows to view this document on the web.
For documentation, please visit: https://tumult.com/hype/documentation/#physics
Physics Crash Course
Element Control: The white cue ball above is a ‘Draggable’ element because we have set a ‘Control Element Position’ action on the element within the Actions inspector.
Create a 'Top Down' physics world by setting the Gravity force to 0.
The cannonball is an animated dynamic element, briefly ‘launched’ by a position animation. The castle consists of rectangles placed on top of each other.
Projectiles & Collisions
Fire Cannon Again
Dynamic elements can fall into the scene from outside of the scene’s area.
Physics Bodies: Initiating Off Scene
Turn on ‘Control gravity with device tilt’ for direct gesture control over dynamic elements positions on mobile devices.
Static Element Boundaries
The flask on the left is surrounded by 'static' elements which form a circular boundary for dynamic elements.
Elements fill this bottle by transitioning from 'Inactive' Physics bodies to 'Dynamic' bodies.
The right ball is a regular physics body, which will fall, bounce, and roll based on the Air drag, Bounce, and Friction values assigned to it.
Faking Physics with Easing
The ‘Bounce’ easing transition is another way to simulate physics and allows for greater control. The left ball has a simple animation with the ‘bounce’ easing transition.
Symbol Physics Gravity (Force = .5)
Scene Physics Gravity
Symbol Physics Gravity (Force = 0)
Three Gravity Realms using Symbols
Inactive and Static Elements are anchored to their position
Dynamic Elements Follow the 'Scene Physics Gravity' intensity and angle.
Static Elements become boundaries & floors
Inactive Elements, like this rectangle, allow dynamic bodies to pass in front or behind them.
Physics + Animations: The L and R buttons animate the blue paddles.
Any property can be animated in Tumult Hype: even the physics properties of elements. For example, you can make an element become ‘dynamic’ by pressing the record button, moving the playhead forward in time, and adjusting the body type of the element. This generates a keyframe to switch that element’s body type. Add more Physics-related properties by selecting the Properties Dropdown and adding more (or recording changes).
Animatable Physics Properties
Make Ball Dynamic
The bounding box of elements define the edges of the element in the phyiscs space. Rectangular images dragged onto your scene can be made rectangular by increasing the 'Border Radius' value of the element in the Element Inspector.
Ellipses & Rectangles: Element Bounds
Pausing a timeline to start Physics via MarkHunte
Detecting and Counting Collisions (between circles)
This scene contains a timeline called 'hit' which repeatedly calculates the distance between the circle and square. When that distance is below a certain threshold, a counter is added to the innerHTML of the circle, and the Square's innerHTML is briefly changed. This example was created by Mark Hunte: https://forums.tumult.com/t/poor-mans-hit-detection-physics/3020
With coded boundary
Normal static walled boundary
We can stop an element (Red circle ) which has physics attributes from exiting a defined area (boundaries) by boxing it in with elements which have Static -Interacts without movement physics properties. ( orange rectangles ) Some Physics behaviours though may cause the Red Circle element to override the boundaries. Too much bounce may do this. As seen in on the left the Red Circle will shoot out of the scene. We can use code to create boxed boundary. Here it calculates the position of the Yellow Circle If the Yellow Circle goes past any of the boundary lines the code will place the element back within the boundaries. The boundary coordinates are in fact calculated using the background grey rectangle element’s top, left,width hight. We can set the replacement within the boundaries to happen instantly so we do not see the element move outside. Replacing the element back within the boundaries may kill the bounce dead so we can also add a secondary 'Static -Interacts without movement’ boundary just inside the coded one. This allows the bounce to continue due to it not activating the replacement. An extra addition to being able to set this type of boundary is if we have set the element to allow dragging. The normal Static -Interacts without movement will not stop either the Red Circle being dragged out off the boundaries or even off scene. Coupled with Red Circle's Physics properties it will likely exit the scene completely. The Yellow Circle cannot be dragged out of the boundaries or the scene. Use the reset and try dragging each circle.
Leverage the Full Matter.js API
Review the JS functions triggered by each of these buttons, and check out http://brm.io/matter-js/docs/ for more info on what these do.
Leverage the Full Matter.js API (Constraints Demo)