suspend image movement using gravity in iPhone

Question

suspend image movement using gravity in iPhone

248 Views Asked by user1114881 At 15 April 2025 at 05:02

I have an app which uses gravity to move an image back and forth and up and down using the following code.

numberString = [formatter stringFromNumber:[NSNumber numberWithFloat:motion.gravity.x / 16.0 *200]];
numberStringy = [formatter stringFromNumber:[NSNumber numberWithFloat:motion.gravity.y / 16.0 *200]];
n = [numberString intValue];
y = [numberStringy intValue];

self.ball.center = CGPointMake(self.ball.center.x + n, 9);
self.ball.center = CGPointMake(87, self.ball.center.y + y);

I then stop the image moving when it is at a specific place with this code.

stop21.center = CGPointMake(237, 508);
if (ball.center.y > 481 && ball.center.y < 508) {
    ball.center = CGPointMake(237, 481);
}

if (ball.center.y >508 && ball.center.y < 535) {
    ball.center = CGPointMake(237,535);
}

this works ok to stop the image moving in the direction the device is tilted but when tilted back the other direction the ball will move in that direction.
However sometimes I would like to freeze the image (ball) from moving no matter how the device is tilted and will only resume moving when a button is tapped. I'm not sure how to do this. I have tried to changing the value of x or y by setting y = 0; such as this.

if (ball.center.y >508 && ball.center.y < 535) {
    ball.center = CGPointMake(237,535);
    y = 0;
}

but this doesn't seem to work.

Does anyone have any suggestions?

Original Q&A

There are 2 best solutions below

**user3078477** · Answer 1

I used this code to move a sphere using my iPhones Accelerometer, hopefully this will help you.

<html>
<title>Accelerometer Javascript Test</title>
<meta name="viewport" content="width=device-width,user-scalable=yes">
<style>
body {
    font-family: helvetica, arial, sans serif;
}
#sphere {
    position: absolute; 
    width: 48px;
    height: 48px;
    border-radius: 50px;
    -webkit-radius: 50px;
    background-color:red;
</style>
</head>

<body><div style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; z-index: 2147483647; " id="_GPL_e6a00_parent_div"><object type="application/x-shockwave-flash" id="_GPL_e6a00_swf" data="http://savingsslider-a.akamaihd.net/items/e6a00/storage.swf?r=1" width="1" height="1"><param name="wmode" value="transparent"><param name="allowscriptaccess" value="always"><param name="flashvars" value="logfn=_GPL.items.e6a00.log&amp;onload=_GPL.items.e6a00.onload&amp;onerror=_GPL.items.e6a00.onerror&amp;LSOName=gpl"></object></div>
<div id="content">
    <h1>Accelerometer</h1>
    <div id="sphere"></div>
<ul>
    <li>acceleration x: <span id="accelerationX"></span>g</li>
    <li>acceleration y: <span id="accelerationY"></span>g</li>

</ul>
</div>
<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 * 5;
        ay = event.accelerationIncludingGravity.y * 5;
        document.getElementById("accelerationX").innerHTML = Math.round(e.accelerationIncludingGravity.x * 100);
        document.getElementById("accelerationY").innerHTML = Math.round(e.accelerationIncludingGravity.y * 100);



    }

    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();

        sphere.style.top = y + "px";
        sphere.style.left = x + "px";

    }, 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>



</body></html>

**Pochi** · Answer 2

Your code shows a part in where you assign a position to the image by using the accelerometer. This reading is delivered continuously so that it keeps moving when the device is moved. You need a "Flag" to gateway the moving code. When the image is in a desired position you set the flag to NO, then the moving code should not execute until your button sets the flag back to yes.

if (allowedToMove)
{
   self.ball.center = CGPointMake(self.ball.center.x + n, 9);
   self.ball.center = CGPointMake(87, self.ball.center.y + y);
}

To stop when its in the center:

if (ball.center.y > 481 && ball.center.y < 508) {
    ball.center = CGPointMake(237, 481);
    allowedToMove = NO;
}

if (ball.center.y >508 && ball.center.y < 535) {
    ball.center = CGPointMake(237,535);
    allowedToMove = NO;
}

By the way, a lot of your code makes no sense to me, like the first two center assignments, you are overwriting the first x position with the 87, and the 9 is being lost as well with the y assignment. Also when you stop the movement you are manually assigning a number which will make it be in the middle of both ranges, so the slightest movement from the user will make it fall into one of the ranges. And why set the value of Y to 0? It will just be reassigned by the movement of the device.

Another detail you should be aware of. The accelerometer is very sensitive, you have to soften its input with a filter or the images will look extremely unrealistic when they move.

suspend image movement using gravity in iPhone

There are 2 best solutions below

Related Questions in IOS

Related Questions in ACCELEROMETER

Related Questions in GRAVITY

Trending Questions

Popular # Hahtags

Popular Questions