Horizontal position of symbols

Symbols
1

Hi, in the attached hype file, I would like the symbols (icons) to remain in a horizontal position regardless of movement. Now they rotate about their axis as they move. I would ask for any help. Thank you!
Automation API.hype.zip (2.0 MB)

1 Like
2

hi woukec78, nice document :slight_smile:

keeping your setup, you could for example get and use beforeUpdate-Event:


	elms.forEach(function(elm){
		var body = 	hypeDocument.getElementProperty(elm, 'physics-body');
		
			Matter.Events.on(engine, 'beforeUpdate', function(){
Matter.Body.setAngularVelocity(body, 0)
});
		
		var c = Matter.Constraint.create({
			pointA: { x: body.position.x, y: body.position.y},
			bodyB: body,
			stiffness: 0.002,
		});
		Matter.World.add(engine.world, [c])
	});
4 Likes
3

What can I say :thinking: ? Thank you very much :pray:

1 Like
4

no matter :wink:

FYI: i did a short research in the Matter-documentation, but could not find a body-property that would prevent axis-rotation ... so the above is a hack ...

another simple approach could be to use a Hype-method (setElementProperty) along with your initialized mutation-obersver, but it seemed more reliable to keep it in the Matter-world ... though did not test ...

///////

to mention: i noticed a persistent error within your basedocument ... have a look in the console ...

3 Likes
5

Couple of things.

The Error that @h_classen mentions is in your untitledFunction2()
Or rather that it is looking for the an Element with the id of interactiveBall

You either need to add one to the scene of comment/remove this follow mouse function.

in the untitledFunction()

You can save a lot of code lines and help readability by giving elements p1-p9 an additional class name, for example icon

You can then clear about a hundred lines of repeat code by changing just one word :open_mouth:
( the class name ) in the first block of code and remove all other repeat blocks.

So the only code you need in untitledFunction() is

var sceneElm = element;
	
	
	var elms = sceneElm.querySelectorAll('.icon');
	
	var engine = hypeDocument.getElementProperty(sceneElm, 'physics-engine');
	elms.forEach(function(elm){
		var body = 	hypeDocument.getElementProperty(elm, 'physics-body');
		var c = Matter.Constraint.create({
			pointA: { x: body.position.x, y: body.position.y},
			bodyB: body,
			stiffness: 0.002,
		});
		Matter.World.add(engine.world, [c])
	});

And all the other repeat code can be removed.

--

Select all the elements in the scene and in the Actions inspector uncheck Allow text selection
This (I hope) will stop the page accidentally getting coved by a larger text selection. ( yes I managed to get it )

If you do add a mouse follow ball then check its Ignore pointer events in the Action inspector.

This will allow the mouse to interact with whatever is below it. basically you can see the ball but the mouse and elements below the mouse point will be able to see each other through the ball. If you do not check Ignore pointer events they cannot and the mouse cannot interact with them.

Automation API_mhv1.hype.zip (2.0 MB)

--

And wow by the way. That page is awesome :+1:

Oh , P.S

I did notice Matter.Axes - Matter.Axes Module - Matter.js Physics Engine API Docs - matter-js 0.18.0

Can't say if this would help I have not played with Matter in a while and it has turned all to jelly for me. If it can do what you are after I am pretty sure it would take some jigging of you code, which if @h_classen's code works then it may not be worth the hassle.

4 Likes
6

Mark hi,

thank you for all your help and advice, I appreciate this!

In the attachment, I have another project I am working on, and I have another question :slight_smile: .

We'd like to show how to open the permalink by scanning the QR code.

In iframe I add link wich is designed for mobile devices (/m/), but now when i open in desktop, opens properly for desktop devices.

Is there any solution that hype source opens as if it were a mobile device?
Scan QR code with phone.zip (157.0 KB)