【加速度センサー】初ハッカソンの失敗を活かすための覚書【JavaScript】

var x_element = document.getElementById("x");
var y_element = document.getElementById("y");
var z_element = document.getElementById("z");

var x_value = 0, y_value = 0, z_value = 0;      // 加速度の値を入れる変数を3個用意
var canvas = document.getElementById('canvas'); // ★canvas要素を取得 
var context = canvas.getContext('2d');          // ★絵を描く部品を取得

window.addEventListener('devicemotion', function(event) {
    x_value = event.accelerationIncludingGravity.x;
    y_value = event.accelerationIncludingGravity.y;
    z_value = event.accelerationIncludingGravity.z;

    x_element.textContent = x_value;
    y_element.textContent = y_value;
    z_element.textContent = z_value;

    // 指定時間ごとに繰り返し実行される setInterval(実行する内容, 間隔[ms]) タイマーを設定
    var timer = window.setInterval(() => {
        drawBall();         // ★drawBall 関数を実行
    }, 33); // 33msごとに（1秒間に約30回

    // ★canvasにボール（円）を描く drawBall 関数
    function drawBall() {
        var centerX = canvas.width  / 2;            // canvasの中心のX座標
        var centerY = canvas.height / 2;            // canvasの中心のY座標
        var ballRad = 50;                           // ボールの半径
        var ballColor = "rgb(0, 0, 255)";           // ボールの色
        var g  = 9.80665;                           // 1Gの時の重力加速度[m/s^2]
        var d  = centerX / g;                       // 1m/s^2 あたりでボールが動く量
        var os = navigator.platform;          // OS名の取得
        console.log(os);
        context.clearRect(0, 0, canvas.width, canvas.height);   // canvasの内容を消す clearRect(x, y, w, h)
        context.beginPath();                        // 描画開始
        context.arc(centerX - d * x_value,               // 円を描く arc(x, y, 半径, 開始角度, 終了角度)
                    centerY + d * y_value,               // 加速度xとyに、1m/s^2あたりで動く量dをかける
                    ballRad - 3 * z_value,               // ボールの半径（zに掛けた係数3はテキトー）
                    0, 2 * Math.PI);                // 角度の単位はラジアン（2π = 360度）で指定
        context.fillStyle = ballColor;              // 塗りつぶす色の設定
        context.fill();                             // 塗る
    }
});