Changing the Scene Gravity programmatically

1

Hey everybody,

i stuck on the problem with changing the Screne gravity programmatically.

I have to program an animation which looks likes a washing machine which contains some ball-like objects. Everything what's inside should behave like turning around and things, when the machine begins to rotate.

My approach is to change the scene's gravity to achieve it.

I tried to get/set the scene's gravity with the Matter.Engine.create() and than engine.world.gravity.

But it seems like that is not the one i can specify in den Hype UI.

If you know a different way to do a washing machine effect it would be nice to share it.

So thanks in advance.

Cheers

2

I looked at the “Properties” that could be modified on the Hype Timeline. I didn't see a listing for “Physics (Gravity)”.

hype-properties
hype-properties596×368 8.74 KB

So, one alternative would be to control the elements manually with the Physics API. That… whew… is not so easy.

Matter.js has an “applyForce” Method…
https://brm.io/matter-js/docs/classes/Body.html#method_applyForce

It has three parameters…

  • Body — That's the element you want to change.
  • Position — I'm not sure what this is about. :man_shrugging:t2:
  • Force — It's a “Vector”, an X & Y value for the new direction.

In Hype, it looks something like this…

     Matter.Body.applyForce(
           hypeDocument.getElementProperty(
                hypeDocument.getElementById("ball"), "physics-body"
           ), { x: 0, y: 0 }, { x: 0.1, y: 0.1 }
      );

Again, I'm not sure what “Position” is about. I tried changing the X & Y values, but it didn't seem to have an effect. But basically, the third parameter (with X as 0.1 and Y as 0.1) accelerates the object 45°, downward and to the right.

Here's a rough example…
applyForce.zip (13.7 KB)

If you click the ball, the force will be applied. It's not constant. It's just a single burst. That's part of the problem. Just like this, it's not acceleration. So, I used reuestAnimationFrame to create a loop.

function nudge() {

     Matter.Body.applyForce(
           hypeDocument.getElementProperty(
                hypeDocument.getElementById("ball"), "physics-body"
           ), { x: 0, y: 0 }, { x: 0.01, y: 0.01 }
      );
      requestAnimationFrame(nudge);
}

requestAnimationFrame(nudge);

The ball went crazy. I played around with the Physics settings and the results were kinda fun…

It's not quite a washing machine though, so I also remembered this…

It's the “Bounce” template, where it uses the Hype API to reverse gravity. It works by moving the element to a new direction, in an incredibly short amount of time. The Physics then takes over and continues to moves the element in that new direction.

The code looks like this…

hypeDocument.setElementProperty(element, 'left', newX, .2, 'easein')
hypeDocument.setElementProperty(element, 'top', newY, .2, 'easein')

…where the element's left and top locations are changed, as a burst that occurs in a fifth of a second. That creates the bounce effect. It's not just those two lines though. The current location of the ball is used and then the ball is sent to slightly above its current location.

That's when I realize, this is complicated. Why does gravity need to change for a washing machine? Couldn't it work like in the real world, where the agitator moves the objects? Couldn't that be recreated with Physics objects in a group, that orbit around in a circle pattern? :thinking:

1 Like
3

Hey photics.

thank you so much for your reply.

I also tried the "applyForce" method. But the result was not really realistic...

I tried to create a group of rectangles in a circle pattern and used a kind of transparent "jigsaw" to move the items...but that crashed after a while or the balls stuck and flew away...

Chat GPT suggested the following

	var hypeScene = hypeDocument.currentSceneElement();
	
	
	console.log(hypeScene);
// Get the physics world for the current scene
var physicsWorld = hypeScene.HYPE_scenePhysicsWorld;

// Check if physics is enabled and get the Matter.js engine
if (physicsWorld && physicsWorld.engine) {
    var engine = physicsWorld.engine;
    console.log(engine); // Log the Matter.js engine object
}

If i get the proper Instance of the Matter.js engine i can use the API to change the gravity

4

But that did not work. I had to extend Hype with the "currentSceneElement()" method but the "physicsWorld" Object is not accessable.

5

Well, I've hit some issues with Matter.js & Hype. One of the current problems is that Hype is using an older version of Matter.js…

A newer version uses ”Substepping”, which appears to help with preventing bodies flying through each other. Although, there's Phaser-box2d, which has Continuous Collision Detection listed as one of the features.

…so alternatively…

why not just create the animations manually? If it's a circular loop, couldn't it just be some paths that repeat? That's what I did here…

https://photics.com/free-template-tuesday-15-tumult-hype-fishy/

Instead of writing code to treat the bubbles as particles, I just used Motion Paths.

6

The Problem is, that i have to do it manually...We build a handle to rotate and i use the sensor data to rotate the object...so it hat do be done dynamically

7

@Jonthan new Matter.js I hope theres progress made for Hype 5 to have a newer matter.js library.

1 Like
8

This can be accomplished without too much code.

The scene and each symbol instance has its own physics engine/world. To get this, you just need to find an element in the desired scene or symbol, and use the getElementProperty() method and request the "physics-engine".

var ballElement = document.getElementById("ball");
var physicsEngine = hypeDocument.getElementProperty(ballElement, 'physics-engine');
physicsEngine.world.gravity.x = 0.0;
physicsEngine.world.gravity.y = 0.1;

Notes:

  • you must do this after the engine has started, like in an On Scene Load handler
  • If your gravity has an angle, you'll need to apply that to the x/y values via trigonometry (like physicsEngine.world.gravity.x = force * Math.cos(radianAngle) etc)

Here's a sample project:
CustomGravity.hype.zip (15.5 KB)

9

Thank you sooo much! that was the solution

1 Like