I am seeking guidance as I am unsure of where to begin. I have a collection of 25 images for the same position, and I want to dynamically change the image displayed on an iPhone Safari browser based on the degree of change in mobile position from left to right. Any assistance or suggestions would be greatly appreciated.
Here is the code snippet I have to obtain the rotation rate:
window.ondevicemotion = function(event) {
var accelerationX = event.accelerationIncludingGravity.x;
var accelerationY = event.accelerationIncludingGravity.y;
var accelerationZ = event.accelerationIncludingGravity.z;
}
I have a concrete example that illustrates exactly what I am trying to achieve.
EDIT:-
I have attempted some code.
<script type="text/javascript">
var x = 0, y = 0,
vx = 0, vy = 0,
ax = 0, ay = 0;
var sphere = document.getElementById("sphere");
if (window.DeviceMotionEvent != undefined) {
window.ondevicemotion = function(e) {
ax = event.accelerationIncludingGravity.x * 10;
ay = event.accelerationIncludingGravity.y * 10;
}
setInterval( function() {
var landscapeOrientation = window.innerWidth/window.innerHeight > 1;
if (landscapeOrientation) {
vx = vx + ay;
vy = vy + ax;
} else {
vy = vy - ay;
vx = vx + ax;
}
vx = vx * 0.98;
vy = vy * 0.98;
y = parseInt(y + vy / 50);
x = parseInt(x + vx / 50);
boundingBoxCheck();
document.getElementById("sphere").innerHTML = x;
sphere.style.right = y + "px";
sphere.style.left = x + "px";
var screenWidth=screen.width;
var imageCount=24;
var medianImageChange=screenWidth/imageCount;
var count=1;
for (i = 0; i < imageCount; i++) {
var medianImageChange=medianImageChange*count;
if((medianImageChange)<x || medianImageChange==x){
document.getElementById("innerHTML").innerHTML = '<img class="change'+count+'" id="change'+count+'" src="https://cf0.getmoju.com/f/Sq6ZUEom-lkB_'+i+'.jpg" />';
}
count++;
}
}, 25);
}
function boundingBoxCheck(){
if (x<0) { x = 0; vx = -vx; }
if (y<0) { y = 0; vy = -vy; }
if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = -vx; }
if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = -vy; }
}
</script>
HTML:-
<div id="content">
<h1>Accelerometer Javascript Test</h1>
<div id="sphere"></div>
<div id="innerHTML"></div>
</div>
However, the desired outcome is not being achieved. Can anyone offer assistance, please?