Dynamic elements fall when the scene loads based on the angle and intensity of the scene gravity. 

Element Types

Inactive and Static Elements are anchored to their position.

←

d

s

i

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.

Bounce

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.

Reload Scene

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. 

Gravity Realms

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

Level One

Rebuild Castle

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. 

Start

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

Reload Scene.

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.  

L

R

Physics + Animations: The L and R buttons animate the blue paddles. 

reset

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

Programmatic Physics 

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

drop ball

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 

CIRC

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.

Creating Boundaries with Static Elements and JavaScript-based Constraints

start

Button

change velocity

grav

stop

Change Gravity

Increase Bounce

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. 

Create Constraint

Leverage the Full Matter.js API (Constraints Demo)