devicemotion test

by Christian Sonne

HTML

<canvas id="c" height="400" width="400"></canvas>

CSS

html, body {
    margin: 0;
    padding: 0;
}
canvas {
    height: 100%;
    width: 100%;
}

JavaScript

var x,
    y,
    dx = 0,
    dy = 0,
    radius = 5,
    maxSpeed = 100,
    ctx,
    ax, ay, az;

window.addEventListener("load", function () {
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', function (ev) {
            var acc = ev.accelerationIncludingGravity;
            dmHdlr(acc.x, acc.y, acc.z);
        }, false);
    }
    x = c.width/2;
    y = c.height/2;
    ctx = c.getContext("2d");
    draw();

}, false);


function draw() {
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.strokeStyle = "green";
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x+10*dx, y+10*dy);
    ctx.stroke();
    ctx.strokeStyle = "red";
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x+5*ax, y+5*ay);
    ctx.stroke();
}

function dmHdlr(aX, aY, aZ) {
    ax = -aX;
    ay = aY;
    dx = Math.max(-maxSpeed, Math.min(maxSpeed, 995*dx/1000 - aX / 100));
    dy = Math.max(-maxSpeed, Math.min(maxSpeed, 995*dy/1000 + aY / 100));
    x = Math.min(c.width-radius, Math.max(radius, x + dx));
    y = Math.min(c.height-radius, Math.max(radius, y + dy));
    if (x == c.width-radius || x == radius) dx=-dx/2;
    if (y == c.height-radius || y == radius) dy=-dy/2;
    window.requestAnimationFrame(draw);
}