背景をカラフルにするヤツつくった

IT

とりあえずiPhoneのsafariでは動作を確認した．傾きで色が変わる．

傾けると色が変わる

ソースコードはこちら

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>傾</title>
  </head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
      window.addEventListener("deviceorientation", function(evt){
      var beta = evt.beta;
      var gamma = evt.gamma;
      var alpha = evt.alpha;
      var txt = "x = " + beta + "<br />y = " + gamma + "<br />z = " + alpha;
      document.getElementById("param").innerHTML = txt;

      var red = parseInt((beta)*(255/90));
      var green = parseInt((gamma)*(255/90));
      var blue = parseInt((alpha)*(255/90));

      $("body").css("background", "rgb("
      + red + ","
      + green + ","
      + blue + ")");
      }, true);

    </script>
  <body>
    <div id="param"></div>
  </body>
</html>

ほんとは全部JavaScriptでやろうと思ったのだけれど，getElementBy~とか打つのが苦痛になって途中からjQueryに頼った感じなので，非常に汚い．

角度とかもそのまんま値使っていて，負から正に値の変わるポイントで急激に色が変化したりして綺麗じゃない感じなので，そのあたりもなんとかしたい，

あとJSの知識がそもそも無いのでクソっぽい．だれかJS教えて下さい．