edds · April 19, 2012 21:04
diff --git a/index.html b/index.html
 <!doctype html>

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
  div {
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
    position: absolute;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><circle cx='50' cy='50' r='50' style='fill:#000000'/></svg>");
  }
 </style>

 <div></div>

 <script type="text/javascript">
  function Ball(el){
    this.x = 1;
    this.y = 1;

    this.velocityX = 0;
    this.velocityY = 0;

    this.width = el.offsetWidth;
    this.height = el.offsetHeight;

    this.updateMax();
    window.addEventListener('resize', this.updateMax.bind(this), false);

    this.el = el;
    window.addEventListener('devicemotion', this.updateAcceleration.bind(this), false);

  }
  Ball.prototype = {
    updateAcceleration: function(e){
      var acc = e.accelerationIncludingGravity, tmpX;

      // fix the x,y depending on device orientation
      if(window.orientation === 0){
        acc.y = -acc.y;
        acc.x = acc.x;
      } else if(window.orientation === 90){
        tmpX = acc.x;
        acc.x = -acc.y;
        acc.y = -tmpX;
      } else if(window.orientation === 180){
        acc.x = -acc.x;
        acc.y = acc.y;
      } else if(window.orientation === -90){
        tmpX = acc.x;
        acc.x = acc.y;
        acc.y = tmpX;
      }

      this.velocityX = this.velocityX * 0.98 + acc.x * 0.7;
      this.velocityY = this.velocityY * 0.98 + acc.y * 0.7;

      this.x = Math.round(this.x + this.velocityX);
      this.y = Math.round(this.y + this.velocityY);

      // edge detection, flip velocity and don't allow ball to overflow
      if(this.x < 0){
        this.x = 0;
        this.velocityX = -1 * this.velocityX;
      }
      if(this.y < 0){
        this.y = 0;
        this.velocityY = -1 * this.velocityY;
      }
      if(this.x > this.maxX){
        this.x = this.maxX;
        this.velocityX = -1 * this.velocityX;
      }
      if(this.y > this.maxY){
        this.y = this.maxY;
        this.velocityY = -1 * this.velocityY;
      }
      this.update();
    },
    update: function(){
      this.el.setAttribute('style', 'top:'+ this.y +'px;left:'+ this.x +'px;');
    },
    updateMax: function(){
      this.maxX = window.innerWidth - this.width;
      this.maxY = window.innerHeight - this.height;
    }
  };
  window.addEventListener('DOMContentLoaded', function(){
    var s = new Ball(document.getElementsByTagName('div')[0]);
  }, false);

  // Borrowed from MDN bind docs.
  // https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
  if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {
      if (typeof this !== "function") {
        // closest thing possible to the ECMAScript 5 internal IsCallable function
        throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
      }

      var aArgs = Array.prototype.slice.call(arguments, 1), 
          fToBind = this, 
          fNOP = function () {},
          fBound = function () {
            return fToBind.apply(this instanceof fNOP ? this : oThis || window,
                                 aArgs.concat(Array.prototype.slice.call(arguments)));
          };

      fNOP.prototype = this.prototype;
      fBound.prototype = new fNOP();

      return fBound;
    };
  }
 </script>
	<!doctype html>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	div {
	width: 100px;
	height: 100px;
	background: #000;
	color: #fff;
	position: absolute;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><circle cx='50' cy='50' r='50' style='fill:#000000'/></svg>");
	}
	</style>

	<div></div>

	<script type="text/javascript">
	function Ball(el){
	this.x = 1;
	this.y = 1;

	this.velocityX = 0;
	this.velocityY = 0;

	this.width = el.offsetWidth;
	this.height = el.offsetHeight;

	this.updateMax();
	window.addEventListener('resize', this.updateMax.bind(this), false);

	this.el = el;
	window.addEventListener('devicemotion', this.updateAcceleration.bind(this), false);

	}
	Ball.prototype = {
	updateAcceleration: function(e){
	var acc = e.accelerationIncludingGravity, tmpX;

	// fix the x,y depending on device orientation
	if(window.orientation === 0){
	acc.y = -acc.y;
	acc.x = acc.x;
	} else if(window.orientation === 90){
	tmpX = acc.x;
	acc.x = -acc.y;
	acc.y = -tmpX;
	} else if(window.orientation === 180){
	acc.x = -acc.x;
	acc.y = acc.y;
	} else if(window.orientation === -90){
	tmpX = acc.x;
	acc.x = acc.y;
	acc.y = tmpX;
	}

	this.velocityX = this.velocityX * 0.98 + acc.x * 0.7;
	this.velocityY = this.velocityY * 0.98 + acc.y * 0.7;

	this.x = Math.round(this.x + this.velocityX);
	this.y = Math.round(this.y + this.velocityY);

	// edge detection, flip velocity and don't allow ball to overflow
	if(this.x < 0){
	this.x = 0;
	this.velocityX = -1 * this.velocityX;
	}
	if(this.y < 0){
	this.y = 0;
	this.velocityY = -1 * this.velocityY;
	}
	if(this.x > this.maxX){
	this.x = this.maxX;
	this.velocityX = -1 * this.velocityX;
	}
	if(this.y > this.maxY){
	this.y = this.maxY;
	this.velocityY = -1 * this.velocityY;
	}
	this.update();
	},
	update: function(){
	this.el.setAttribute('style', 'top:'+ this.y +'px;left:'+ this.x +'px;');
	},
	updateMax: function(){
	this.maxX = window.innerWidth - this.width;
	this.maxY = window.innerHeight - this.height;
	}
	};
	window.addEventListener('DOMContentLoaded', function(){
	var s = new Ball(document.getElementsByTagName('div')[0]);
	}, false);

	// Borrowed from MDN bind docs.
	// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
	if (!Function.prototype.bind) {
	Function.prototype.bind = function (oThis) {
	if (typeof this !== "function") {
	// closest thing possible to the ECMAScript 5 internal IsCallable function
	throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
	}

	var aArgs = Array.prototype.slice.call(arguments, 1),
	fToBind = this,
	fNOP = function () {},
	fBound = function () {
	return fToBind.apply(this instanceof fNOP ? this : oThis \|\| window,
	aArgs.concat(Array.prototype.slice.call(arguments)));
	};

	fNOP.prototype = this.prototype;
	fBound.prototype = new fNOP();

	return fBound;
	};
	}
	</script>