When it’s ready.

出来るまで出来ない

FireFox3.6の加速度センサーで遊ぶ

js firefox

PCのブラウザで加速度センサーが取得出来る必要性があるのか疑問だが、やってみたら相当面白かったので紹介

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>加速度センサーテスト</title>
    <script>  
      var count = 0;  
      var v = 50;
      var h = 50;
      var winH = document.documentElement.clientWidth;
      var winV = document.documentElement.clientHeight;
      function handleOrientation(orientData) {   
        count++;  
        var d = document.getElementById("display");  

        var canvas = document.getElementById('sample');
      	var ctx = canvas.getContext('2d');
      	ctx.fillStyle = "rgb(255,255,255)";
      	ctx.fillRect(0, 0, winH, winV);
  
        d.innerHTML = "<p> count = " + count +  "<p> x = " + orientData.x + "<p> y = " + orientData.y + "<p> z  = " + orientData.z;

      	ctx.fillStyle = "rgb(255,0,0)";
      	var hpos = winH/2 * orientData.x + winH/2
      	var vpos = winV/2 * orientData.y + winV/2
      	ctx.strokeRect(hpos, vpos, v, h);
      }  
      window.addEventListener("MozOrientation", handleOrientation, true);  
    </script>
    
  </head>
  <body>
    <canvas id="sample" width="1200" height="1000"></canvas>
    <div id="display"></div>
  </body>
</html>

PCが水平ならば、真っ白なページの真中に50x50の四角だけがあります。
PCを左右、前後に傾けると四角が上下左右に動きます。
それだけだけど、なぜか色々動かしてしまう自分がいる。
もうそれこそ、ノートをおっことしそうになるくらい。HDDの人はソコソコに

サンプルは、以下においておきます。
http://bit.ly/6Wmgfl