Grid test
HTML
<script src="https://github.com/jannschu/raphael/raw/2.0/raphael.js"></script>
<div id="wrapper"></div>
CSS
html {
height: 100%;
}
body {
background: black;
height: 100%;
padding: 0;
margin: 0;
}
svg {
}
#wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
margin-left: -300px;
margin-top: -300px;
}
JavaScript
var Point = (function() {
var object = function(x, y) {
this.x = x == null ? 0 : x;
this.y = y == null ? 0 : y;
};
object.prototype.plus = function(that) {
return new object(this.x + that.x, this.y + that.y);
};
object.prototype.take = function(that) {
return new object(this.x - that.x, this.y - that.y);
};
object.prototype.toString = function() {
return "(" + this.x + ", " + this.y + ")";
};
return object;
})();
var Rectangle = (function() {
var fromPoints = function(p1, p2) {
this.left = Math.min(p1.x, p2.x);
this.top = Math.min(p1.y, p2.y);
this.right = Math.max(p1.x, p2.x);
this.bottom = Math.max(p1.y, p2.y);
};
var fromEdges = function(left, top, right, bottom) {
this.left = left;
this.top = top;
this.bottom = bottom;
this.right = right;
};
var object = function() {
if (arguments.length == 2) fromPoints.apply(this, arguments);
else if (arguments.length == 4) fromEdges.apply(this, arguments);
};
object.prototype.topRight = function() {
return new Point(this.right, this.top);
};
object.prototype.topLeft = function() {
return new Point(this.left, this.top);
};
object.prototype.bottomLeft = function() {
return new Point(this.left, this.bottom);
};
object.prototype.bottomRight = function() {
return new Point(this.right, this.bottom);
};
object.prototype.width = function() {
return this.right - this.left;
};
object.prototype.height = function() {
return this.bottom - this.top;
};
object.prototype.contains = function(that) {
if (that instanceof Point) {
return (this.left <= that.x && that.x < this.right) && (this.top <= that.y && that.y < this.bottom);
}
else if (that instanceof Rectangle) {
return this.left <= that.left && that.right <...