API tools faq
paste
Advertisement
nzisaacnz

Cos and sin are cool people, rev 2 (rough fiddling)

nzisaacnz
Sep 16th, 2013
138
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.12 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <script>
  4. var Template = {};
  5. var requestAnimationFrame =
  6. window.requestAnimationFrame||
  7. window.webkitRequestAnimationFrame||
  8. window.mozRequestAnimationFrame||
  9. window.oRequestAnimationFrame||
  10. window.msRequestAnimationFrame;
  11.  
  12. var cancelAnimationFrame =
  13. window.cancelAnimationFrame||
  14. window.webkitCancelRequestAnimationFrame||
  15. window.webkitCancelAnimationFrame||
  16. window.mozCancelRequestAnimationFrame||
  17. window.mozCancelAnimationFrame||
  18. window.oCancelRequestAnimationFrame||
  19. window.oCancelAnimationFrame||
  20. window.msCancelRequestAnimationFrame||
  21. window.msCancelAnimationFrame;
  22.  
  23. Template.newTime = Date.now();
  24. Template.time = 0;
  25. Template.animation = function()
  26. {
  27.  if(!Template.stopped)
  28.  {
  29.   Template.oldTime = Template.newTime;
  30.   if(!Template.paused)
  31.   {
  32.    Template.calculate();
  33.   }
  34.   Template.draw();
  35.   Template.newTime = Date.now();
  36.   Template.time=Template.newTime-Template.oldTime;
  37.   Template.animationFrame = requestAnimationFrame(Template.animation);
  38.  }
  39. }
  40. Template.start = function(d,c)
  41. {
  42.  Template.draw = d;
  43.  Template.calculate = c;
  44.  Template.paused = false;
  45.  Template.animationFrame = requestAnimationFrame(Template.animation);
  46. }
  47. Template.stop = function()
  48. {
  49.  cancelAnimationFrame(Template.animationFrame);
  50. }
  51. function Transition(start,end,period,loops,func)
  52. {
  53.  this.start = start;
  54.  this.end = end;
  55.  this.period = period;
  56.  if(!func)this.func = function(a){return a;};
  57.  else this.func = func;
  58.  this.pos = 0;
  59.  this.reversed;
  60.  this.loop = loops;
  61.  this.res = 0;
  62.  this.calc=function()
  63.  {
  64.   if(this.reversed) this.pos -= Template.time/this.period;
  65.   else this.pos += Template.time/this.period;
  66.   if(this.loop===0)
  67.   {
  68.    this.pos = (this.pos+1)%1;
  69.   }
  70.   else
  71.   {
  72.    this.pos = Math.min(this.loop,Math.max(this.pos,0));
  73.   }
  74.   this.res = this.func(this.pos)*(end-start)+start;
  75.  }
  76.  this.get = function()
  77.  {
  78.   return this.res;
  79.  }
  80.  this.reverse = function()
  81.  {
  82.   this.reversed = !this.reversed;
  83.  }
  84. }
  85. </script>
  86. <script>
  87.  
  88. function Point(x,y)
  89. {
  90.     this.x = x;
  91.     this.y = y;
  92.     this.draw = function(G)
  93.     {
  94.         G.beginPath();
  95.         G.moveTo(this.x+10,this.y);
  96.         G.arc(this.x,this.y,10,0,2*Math.PI);
  97.         G.stroke();
  98.     }
  99. }
  100. function Line(xs,ys,xe,ye)
  101. {
  102.     this.start = new Point(xs,ys);
  103.     this.end = new Point(xe,ye);
  104.     this.Intersects = function(line,x,y,x1,y1)
  105.     {
  106.         x = +x|0;
  107.         y = +y|0;
  108.         x1 = +x1|0;
  109.         y1 = +y1|0;
  110.         return get_line_intersection(this.start.x+x,this.start.y+y,
  111.                                      this.end.x+x,this.end.y+y,
  112.                                      line.start.x+x1,line.start.y+y1,
  113.                                      line.end.x+x1,line.end.y+y1);
  114.     }
  115. }
  116. function Mesh(x,y,strokeStyle,fillStyle)
  117. {
  118.     this.prevPoint = null;
  119.     this.lines = [];
  120.     this.x = x;
  121.     this.y = y;
  122.     this.strokeStyle = strokeStyle;
  123.     this.fillStyle = fillStyle;
  124.     this.add = function(point,index)
  125.     {
  126.         if(this.prevPoint)
  127.         {
  128.             index = +index|this.lines.length;
  129.             this.lines.splice(index,0,new Line(this.prevPoint.x,this.prevPoint.y,point.x,point.y));
  130.         }
  131.         this.prevPoint = new Point(point.x,point.y);
  132.     }
  133.     this.collides = function(thing)
  134.     {
  135.         var collisions = [];
  136.         if(thing.constructor == Mesh)
  137.         {
  138.             var mesh = thing;
  139.             for(var a=0,aa=this.lines.length; a<aa; a++)
  140.             {
  141.                 for(var b=0,bb=mesh.lines.length; b<bb; b++)
  142.                 {
  143.                     var collision = this.lines[a].Intersects(mesh.lines[b],this.x,this.y,mesh.x,mesh.y);
  144.                     if(collision)collisions[collisions.length] = collision;
  145.                 }
  146.             }
  147.         }
  148.         else if(thing.constructor == Line)
  149.         {
  150.             var line = thing;
  151.             for(var a=0,aa=this.lines.length; a<aa; a++)
  152.             {
  153.                 var collision = this.lines[a].Intersects(line,this.x,this.y);
  154.                 if(collision)collisions[collisions.length] = collision;
  155.             }
  156.         }
  157.         return collisions;
  158.     }
  159.     this.FinishMesh = function()
  160.     {
  161.         if(this.lines.length==0)return false;
  162.         this.add(new Point(this.lines[0].start.x,this.lines[0].start.y));
  163.         this.finished = true;
  164.         return true;
  165.     }
  166.     this.draw = function(G)
  167.     {
  168.         G.strokeStyle = this.strokeStyle;
  169.         G.fillStyle = this.fillStyle;
  170.         if(this.lines.length==0)return false;
  171.         G.beginPath();
  172.         G.moveTo(this.lines[0].start.x+this.x,this.lines[0].start.y+this.y);
  173.         for(var a=0; a<this.lines.length; a++)
  174.         {
  175.             G.lineTo(this.lines[a].end.x+this.x,this.lines[a].end.y+this.y);
  176.         }
  177.         if(this.finished)G.fill();
  178.         G.stroke();
  179.         return true;
  180.     }
  181. }
  182. function get_line_intersection(p0_x,p0_y,p1_x,p1_y,p2_x,p2_y,p3_x,p3_y)
  183. {
  184.     var s1_x, s1_y, s2_x, s2_y;
  185.     s1_x = p1_x - p0_x;     s1_y = p1_y - p0_y;
  186.     s2_x = p3_x - p2_x;     s2_y = p3_y - p2_y;
  187.  
  188.     var cache2=(-s2_x * s1_y + s1_x * s2_y);
  189.  
  190.     if(cache2===0) return false; // Parallel
  191.  
  192.     var s, t;
  193.     var cache0=(p0_y - p2_y);
  194.     var cache1=(p0_x - p2_x);
  195.  
  196.     s = (-s1_y * cache1 + s1_x * cache0) / cache2;
  197.     t = ( s2_x * cache0 - s2_y * cache1) / cache2;
  198.  
  199.     if (s >= 0 && s <= 1 && t >= 0 && t <= 1)
  200.     {
  201.         // Collision detected
  202.         return new Point(p0_x + (t * s1_x),p0_y + (t * s1_y));
  203.     }
  204.  
  205.     return false; // No collision
  206. }
  207.  
  208. </script>
  209. </head>
  210. <body>
  211. <canvas id="cvs" width="800" height="600" onclick="Template.paused = !Template.paused"></canvas>
  212. <script>
  213. var playerOne,transOne;
  214. var playerTwo,trans,collisions;
  215. var totalTime = 0;
  216. function init()
  217. {
  218.  playerOne = new Mesh(cvs.width/2,cvs.height/2,"#FF0000","#AAAA00");
  219.  playerTwo = new Mesh(cvs.width/2,cvs.height/2,"#FF0000","#AA55AA");
  220.  var M = 44;
  221.  for(var a=0; a<=M; a++)
  222.  {
  223.   playerOne.add(new Point(Math.cos(a*16*Math.PI/M)*a*100/M,Math.sin(a*16*Math.PI/M)*a*100/M));
  224.  }
  225.  M = 100;
  226.  for(var a=0; a<=M; a++)
  227.  {
  228.   playerTwo.add(new Point(Math.sin(a*3*Math.PI/M)*a*100/M,Math.cos(a*2*Math.PI/M)*a*100/M));
  229.  }
  230.  //playerOne.FinishMesh();
  231.  playerTwo.FinishMesh();
  232.  transOne = new Transition(cvs.width/2-100,cvs.width/2+10,3000,0,function(d){return Math.sin(d*2*Math.PI)*0.5+0.5;});
  233.  transTwo = new Transition(cvs.width/2-200,cvs.width/2+10,2000,0,function(d){return Math.sin(d*2*Math.PI)*0.5+0.5;});
  234.  Template.start(draw,calc);
  235. }
  236. function draw()
  237. {
  238.  var G = cvs.getContext("2d");
  239.  G.clearRect(0,0,cvs.width,cvs.height);
  240.  playerOne.draw(G);
  241.  //playerTwo.draw(G);
  242.  for(var a=0; a<collisions.length; a++)
  243.  {
  244.   //collisions[a].draw(G);
  245.  }
  246. }
  247.  
  248. function calc()
  249. {
  250.  totalTime += Template.time;
  251.  if(playerOne.lines.length!=parseInt(totalTime/10))
  252.  {
  253.   var M = parseInt(totalTime/10);
  254.   playerOne.lines = [];
  255.   for(var a=0; a<=M; a++)
  256.   {
  257.    playerOne.add(new Point(Math.cos(a*128*Math.PI/M)*a*100/M,Math.sin(a*256*Math.PI/M)*a*100/M));
  258.   }
  259.  }
  260.  transOne.calc();
  261.  //playerOne.x = transOne.res;
  262.  /*transTwo.calc();
  263.  playerTwo.y = transTwo.res;*/
  264.  collisions = []//playerOne.collides(playerTwo)
  265. }
  266. init();
  267. </script>
  268. </body>
  269. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!