Control a timeline using acelerometers like in some Edge Animate DPS sampler that was around for years

Feature Requests
1

Hi there, maybe someone already ask this, but i wonder if achieve something like this is possible:

http://download.macromedia.com/pub/developer/dps/parallax-effect-sample-files.zip
-Obviously it works only on mobile -

In a nutshell if user rotate the device, the timeline displace itself responding to the acelerometer data, that can create some amazing effects on mobile, and since its pretty old i might wonder if its possible on Hype…

Hope anyone can guide me on this…

2

Yeah, this is no problem with Hype. The example you sent already has the javascript code to get accelerometer data, it only takes a few small adjustments to change it from Edge’s API to Hype’s API.

I setup the timeline the same way (though only did it for 3s instead of 30s), and then added an On Scene Load handler to run javascript to run code that handles the device orientation events. The two changes needed to be:

sym.stop();

becomes:

hypeDocument.pauseTimelineNamed('Main Timeline');

and

sym.stop(position);

becomes:

hypeDocument.goToTimeInTimelineNamed(time, 'Main Timeline');

But as you’ll see in the document I added a little bit of code to convert the number to a percentage of the timeline and feed that value in.

You can check it out here:

DeviceOrientationParallax.hype.zip (874.5 KB)

4 Likes
3

#Awesome thanks #LordHype i am going to play plenty with this sampler… it was something i look for quite some time and now i will be able to make it on Hype…

2 Likes
4

Now, the results on this:

http://freefallmotion.com/clientes/freefallmotion/the_test_app/

The particular scene that use the parallax fx is here:

http://freefallmotion.com/clientes/freefallmotion/the_test_app/parallax_graviter.html

Obviusly, better view on a iPhone 6x and later… thanks for the help…

1 Like
5

Fantastic!

6

How can I prevent the timeline from resetting (go to 00) when the device reaches/passes 90 degrees on beta (x axis)?
@jonathan’s code works brilliantly when looking down at a device but if you demonstrate it to someone you tend to surpass 90 degrees (you hold your phone up to them like a mirror) and the animation starts jumping back and forth.

I have tried to change the code to only listen to gamma or alpha values but I seem to lack the proficiency (or intellect?) to be successful at it…

7

I’m guessing you’ll need some 3D trigonometry to do this correctly. I haven’t done this, but it seems common enough that there might be some solutions online.

You might also be able to use some heuristics to clamp the values and decide when to show what value, but I have a feeling this won’t be a desired result.

8

Thanks, @Jonathan. I ended up “simply” changing the animation. You can now hold (and move) the device any which way without jumpy results.

1 Like
10

Hi there.... this code seems not to work in new iOS versions.... can anyone help me to fix it? i use it in a landing page to respond the acelerometers... but in newer versions of safari dont work anymore

Blockquote

//sym.stop();
hypeDocument.pauseTimelineNamed('macanna');

document.addEventListener('touchstart', function(event){
	event.preventDefault();
	return false;
});

window.ondeviceorientation = function(event) {
	var delta = Math.round(event.beta);
	
	switch (window.orientation) {
		case 0: 
			delta = Math.round(event.gamma);
			break;
		case 180: 
			delta = -Math.round(event.gamma);
			break;
	}
	
	var position = 15000 + (delta * 400);
	position = Math.floor(position);
	//sym.stop(position);
	
	// the old Edge animation was 30s. We'll just keep that math but convert
	// to a percentage and then use that on our timeline duration
	var percentPosition = (position / 30000); 
	var duration = hypeDocument.durationForTimelineNamed('Main Timeline');
	var time = (percentPosition * duration);
	hypeDocument.goToTimeInTimelineNamed(time, 'Main Timeline');
	
	//console.log(position);
}

Blockquote

11