Moveable Polygons with collisions (rough)

<html>
<head>
<script>
var Template = {};
var requestAnimationFrame =
window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame;

var cancelAnimationFrame =
window.cancelAnimationFrame||
window.webkitCancelRequestAnimationFrame||
window.webkitCancelAnimationFrame||
window.mozCancelRequestAnimationFrame||
window.mozCancelAnimationFrame||
window.oCancelRequestAnimationFrame||
window.oCancelAnimationFrame||
window.msCancelRequestAnimationFrame||
window.msCancelAnimationFrame;

Template.newTime = Date.now();
Template.time = 0;
Template.animation = function()
{
 if(!Template.stopped)
 {
  Template.oldTime = Template.newTime;
  if(!Template.paused)
  {
   Template.calculate();
  }
  Template.draw();
  Template.newTime = Date.now();
  Template.time=Template.newTime-Template.oldTime;
  Template.animationFrame = requestAnimationFrame(Template.animation);
 }
}
Template.start = function(d,c)
{
 Template.draw = d;
 Template.calculate = c;
 Template.paused = false;
 Template.animationFrame = requestAnimationFrame(Template.animation);
}
Template.stop = function()
{
 cancelAnimationFrame(Template.animationFrame);
}
function Transition(start,end,period,loops,func)
{
 this.start = start;
 this.end = end;
 this.period = period;
 if(!func)this.func = function(a){return a;};
 else this.func = func;
 this.pos = 0;
 this.reversed;
 this.loop = loops;
 this.res = 0;
 this.calc=function()
 {
  if(this.reversed) this.pos -= Template.time/this.period;
  else this.pos += Template.time/this.period;
  if(this.loop===0)
  {
   this.pos = (this.pos+1)%1;
  }
  else
  {
   this.pos = Math.min(this.loop,Math.max(this.pos,0));
  }
  this.res = this.func(this.pos)*(end-start)+start;
 }
 this.get = function()
 {
  return this.res;
 }
 this.reverse = function()
 {
  this.reversed = !this.reversed;
 }
}
Template.random = function(a,b)
{
 return Math.random()*(b-a)+a;
}
</script>
<script>
function Point(x,y)
{
    this.x = x;
    this.y = y;
    this.draw = function(G)
    {
        G.beginPath();
        G.moveTo(this.x+10,this.y);
        G.arc(this.x,this.y,10,0,2*Math.PI);
        G.stroke();
    }
}
function Line(xs,ys,xe,ye)
{
    this.start = new Point(xs,ys);
    this.end = new Point(xe,ye);
    this.Intersects = function(line,x,y,x1,y1)
    {
        x = +x|0;
        y = +y|0;
        x1 = +x1|0;
        y1 = +y1|0;
        return get_line_intersection(this.start.x+x,this.start.y+y,
                                     this.end.x+x,this.end.y+y,
                                     line.start.x+x1,line.start.y+y1,
                                     line.end.x+x1,line.end.y+y1);
    }
}

function Mesh(x,y,strokeStyle,fillStyle)
{
    this.prevPoint = null;
    this.lines = [];
    this.x = x;
    this.y = y;
    this.strokeStyle = strokeStyle;
    this.fillStyle = fillStyle;
    this.maxX = 5;
    this.add = function(point,index)
    {
        if(this.prevPoint)
        {
            index = +index|this.lines.length;
            this.lines.splice(index,0,new Line(this.prevPoint.x,this.prevPoint.y,point.x,point.y));
        }
        this.prevPoint = new Point(point.x,point.y);
    }
    this.collisions = function(thing,breakOnIntersect)
    {
        var cols = [];
        if(thing.constructor == Mesh)
        {
            var mesh = thing;
            for(var a=0,aa=this.lines.length; a<aa; a++)
            {
                for(var b=0,bb=mesh.lines.length; b<bb; b++)
                {
                    var collision = this.lines[a].Intersects(mesh.lines[b],this.x,this.y,mesh.x,mesh.y);
                    if(breakOnIntersect && collision) return true;
                    if(collision)cols[cols.length] = collision;
                }
            }
        }
        else if(thing.constructor == Line)
        {
            var line = thing;
            for(var a=0,aa=this.lines.length; a<aa; a++)
            {
                var collision = this.lines[a].Intersects(line,this.x,this.y);
                if(breakOnIntersect && collision) return true;
                if(collision)cols[cols.length] = collision;
            }
        }
        return breakOnIntersect?false:cols;
    }
    this.IsPointInside = function(point)
    {
        return this.collisions(new Line(point.x,point.y,cvs.width*50,point.y),false).length%2==1;
    }
    this.FinishMesh = function()
    {
        if(this.lines.length==0)return false;
        this.add(new Point(this.lines[0].start.x,this.lines[0].start.y));
        this.finished = true;
        return true;
    }
    this.draw = function(G)
    {
        G.strokeStyle = this.strokeStyle;
        G.fillStyle = this.fillStyle;
        if(this.lines.length==0)return false;
        G.beginPath();
        G.moveTo(this.lines[0].start.x+this.x,this.lines[0].start.y+this.y);
        for(var a=0; a<this.lines.length; a++)
        {
            G.lineTo(this.lines[a].end.x+this.x,this.lines[a].end.y+this.y);
        }
        if(this.finished)G.fill();
        G.stroke();
        return true;
    }
}
function get_line_intersection(p0_x,p0_y,p1_x,p1_y,p2_x,p2_y,p3_x,p3_y)
{
    var s1_x, s1_y, s2_x, s2_y;
    s1_x = p1_x - p0_x;     s1_y = p1_y - p0_y;
    s2_x = p3_x - p2_x;     s2_y = p3_y - p2_y;

    var cache2=(-s2_x * s1_y + s1_x * s2_y);

    if(cache2===0) return false; // Parallel

    var s, t;
    var cache0=(p0_y - p2_y);
    var cache1=(p0_x - p2_x);

    s = (-s1_y * cache1 + s1_x * cache0) / cache2;
    t = ( s2_x * cache0 - s2_y * cache1) / cache2;

    if (s >= 0 && s <= 1 && t >= 0 && t <= 1)
    {
        // Collision detected
        return new Point(p0_x + (t * s1_x),p0_y + (t * s1_y));
    }

    return false; // No collision
}

</script>
</head>
<body>
<canvas id="cvs" width="800" height="600" onmousemove="mouseEvent(event)" onmousedown="mouseEvent(event)" onmouseup="mouseEvent(event)" ></canvas>
<script>
var mouse = new Point(null,null);
function mouseEvent(e)
{
 mouse.x = e.offsetX;
 mouse.y = e.offsetY;
 switch(e.type)
 {
  case "mousemove":
   if(mouse.down&&mouse.mesh)break;

  break;
  case "mousedown":
   for(var a=0; a<meshes.length; a++)
   {
    if(meshes[a].IsPointInside(mouse)&&!mouse.mesh)
    {
     mouse.mesh = meshes[a];
    }
   }
   if(mouse.mesh)mouse.diff = new Point(mouse.x-mouse.mesh.x,mouse.y-mouse.mesh.y);
   mouse.down = true;
  break;
  case "mouseup":
   mouse.down = false;
   mouse.mesh = null;
  break;
 }
}
var totalTime = 0;
var button;
var button2;
var res = "No";
var meshes = [];
var intersections = [];
function init()
{
 button = new Mesh(200,300,"#000","#FF5555");
 button2 = new Mesh(400,300,"#000","#FF5555");
 meshes[0] = button;
 meshes[1] = button2;
 var M = 20;
 for(var a=0; a<M; a++)
 {
  button.add(new Point(Template.random(40,70)*Math.sin(a/M*Math.PI*2)+50,Template.random(40,70)*Math.cos(a/M*Math.PI*2)+50));
  button2.add(new Point(Template.random(40,70)*Math.sin(a/M*Math.PI*2)+50,Template.random(40,70)*Math.cos(a/M*Math.PI*2)+50));
 }
 button.FinishMesh();
 button2.FinishMesh();
 Template.start(draw,calc);
}
function draw()
{
 var G = cvs.getContext("2d");
 G.clearRect(0,0,cvs.width,cvs.height);
 button2.draw(G);
 button.draw(G);
 G.strokeStyle="#000000";
 if(mouse.mesh)G.strokeText(res,mouse.mesh.x+30,mouse.mesh.y+53);
 if(intersections)
 {
  for(var a=0; a<intersections.length; a++)
  {
   intersections[a].draw(G);
  }
 }
}
function calc()
{
 intersections = button.collisions(button2);
 if(mouse.down && mouse.mesh)
 {
  mouse.mesh.x = mouse.x-mouse.diff.x;
  mouse.mesh.y = mouse.y-mouse.diff.y;
 }
 if(mouse.mesh)
 {
  mouse.mesh.fillStyle = "#55FF55";
  res = "Drag Me!";
 }
  for(var a=0; a<meshes.length; a++)if(mouse.mesh!=meshes[a])meshes[a].fillStyle = "#FF5555";
}
init();
</script>
</body>
</html>