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…
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:
#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…
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…
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.
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);
}