API tools faq
paste
Advertisement
nzisaacnz

String thing

nzisaacnz
Jun 7th, 2014
279
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.45 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.   <head>
  3.     <style>
  4.       #left,#right
  5.       {
  6.         position:absolute;
  7.         top:10px;
  8.         height:400px;
  9.         width:25px;
  10.         -webkit-appearance:slider-vertical;
  11.       }
  12.       #left
  13.       {
  14.         left:0%;
  15.       }
  16.       #right
  17.       {
  18.         right:0%;
  19.       }
  20.       #cvs
  21.       {
  22.         position:absolute;
  23.         left:0;
  24.         top:0px;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body onclick="addKeyPoint(event)" onmousemove="cvsMouse(event)" onkeypress="randomPos()">
  29.     <script>
  30.       var Template = {};
  31.       var requestAnimationFrame =
  32.           window.requestAnimationFrame||
  33.           window.webkitRequestAnimationFrame||
  34.           window.mozRequestAnimationFrame||
  35.           window.oRequestAnimationFrame||
  36.           window.msRequestAnimationFrame;
  37.      
  38.       var cancelAnimationFrame =
  39.           window.cancelAnimationFrame||
  40.           window.webkitCancelRequestAnimationFrame||
  41.           window.webkitCancelAnimationFrame||
  42.           window.mozCancelRequestAnimationFrame||
  43.           window.mozCancelAnimationFrame||
  44.           window.oCancelRequestAnimationFrame||
  45.           window.oCancelAnimationFrame||
  46.           window.msCancelRequestAnimationFrame||
  47.           window.msCancelAnimationFrame;
  48.      
  49.       Template.newTime = Date.now();
  50.       Template.time = 0;
  51.       Template.animation = function()
  52.       {
  53.         if(!Template.stopped)
  54.         {
  55.           Template.oldTime = Template.newTime;
  56.           Template.newTime = Date.now();
  57.           Template.time=Template.newTime-Template.oldTime;
  58.           if(!Template.paused)
  59.           {
  60.             Template.calculate(Template.time);
  61.           }
  62.           Template.draw(Template.graphics);
  63.           Template.animationFrame = requestAnimationFrame(Template.animation);
  64.         }
  65.       }
  66.       Template.start = function(d,c,g)
  67.       {
  68.         Template.draw = d;
  69.         Template.calculate = c;
  70.         Template.paused = false;
  71.         Template.graphics = g;
  72.         Template.animationFrame = requestAnimationFrame(Template.animation);
  73.       }
  74.       Template.stop = function()
  75.       {
  76.         cancelAnimationFrame(Template.animationFrame);
  77.       }
  78.       Template.random = function(a,b)
  79.       {
  80.         return Math.random()*(b-a)+a;
  81.       }
  82.       function Transition(start,end,period,loops,func)
  83.       {
  84.         this.start = start;
  85.         this.end = end;
  86.         this.period = period;
  87.         if(!func)this.func = function(a){return a;};
  88.         else this.func = func;
  89.         this.pos = 0;
  90.         this.reversed;
  91.         this.loop = loops;
  92.         this.res = 0;
  93.         this.calc=function()
  94.         {
  95.           if(this.reversed) this.pos -= Template.time/this.period;
  96.           else this.pos += Template.time/this.period;
  97.           if(this.loop===0)
  98.           {
  99.             this.pos = (this.pos+1)%1;
  100.           }
  101.           else
  102.           {
  103.             this.pos = Math.min(this.loop,Math.max(this.pos,0));
  104.           }
  105.           this.res = this.func(this.pos)*(end-start)+start;
  106.         }
  107.         this.get = function()
  108.         {
  109.           return this.res;
  110.         }
  111.         this.reverse = function()
  112.         {
  113.           this.reversed = !this.reversed;
  114.         }
  115.       }
  116.     </script>
  117.     <!--Game code-->
  118.     <script>
  119.       function distance(a,b)
  120.       {
  121.         return Math.sqrt(Math.pow(a.x-b.x,2)+Math.pow(a.y-b.y,2));
  122.       }
  123.      
  124.      
  125.       var string,oldString;
  126.       var width,height;
  127.       var keyPoints = new Array();
  128.       var strLength =100,center={x:0,y:0},corner;
  129.       function Draw(canvas)
  130.       {
  131.        
  132.         //canvas.clearRect(0,0,width,height);
  133.         canvas.lineWidth=1;
  134.         for(var a=0; a<strLength; a++)
  135.        {
  136.          canvas.beginPath();
  137.          canvas.lineTo(string[a].x,string[a].y);
  138.          canvas.lineTo(string[(a+1)%strLength].x,string[(a+1)%strLength].y);
  139.          canvas.lineTo(oldString[(a+1)%strLength].x,oldString[(a+1)%strLength].y);
  140.          canvas.lineTo(oldString[a].x,oldString[a].y);
  141.          var h = distance(string[a],oldString[a]);
  142.          canvas.fillStyle=canvas.strokeStyle="hsla("+h*50+",100%,"+Math.abs(h*3)+"%,0.50)";
  143.          canvas.fill();canvas.stroke();
  144.        }
  145.        /*canvas.beginPath()
  146.        canvas.moveTo(center.x+5,center.y);
  147.        canvas.arc(center.x,center.y,5,0,2*Math.PI);
  148.        canvas.stroke();
  149.        canvas.beginPath();
  150.        canvas.moveTo(corner.TL.x,corner.TL.y);
  151.        canvas.lineTo(corner.TR.x,corner.TR.y);
  152.        canvas.lineTo(corner.BR.x,corner.BR.y);
  153.        canvas.lineTo(corner.BL.x,corner.BL.y);
  154.        canvas.closePath();
  155.        canvas.stroke();*/
  156.      }
  157.      function Calc(time)
  158.      {
  159.        center={x:0,y:0}
  160.        for(var a=0; a<strLength; a++)
  161.        {
  162.          if(!(oldString[a].x==string[a].x&&oldString[a].y==string[a].y))
  163.          {
  164.            oldString[a] = {x:string[a].x,y:string[a].y};
  165.          }
  166.          center.x+=string[a].x;
  167.          center.y+=string[a].y;
  168.        }
  169.        center.x/=strLength;
  170.        center.y/=strLength;
  171.        corner={TL:{x:center.x,y:center.y},TR:{x:center.x,y:center.y},BL:{x:center.x,y:center.y},BR:{x:center.x,y:center.y}};
  172.        for(var a=0; a<strLength; a++)
  173.        {
  174.          corner.TL = {x:Math.min(string[a].x,corner.TL.x),y:Math.min(string[a].y,corner.TL.y)};
  175.          corner.TR = {x:Math.max(string[a].x,corner.TR.x),y:Math.min(string[a].y,corner.TR.y)};
  176.          corner.BR = {x:Math.max(string[a].x,corner.BR.x),y:Math.max(string[a].y,corner.BR.y)};
  177.          corner.BL = {x:Math.min(string[a].x,corner.BL.x),y:Math.max(string[a].y,corner.BL.y)};
  178.        }
  179.        for(var b=0; b<time/10&&b<1000; b++)
  180.        {
  181.          for(var a=0; a<10; a++)
  182.          {
  183.            var index = parseInt(a*(strLength)/10)+1;
  184.            string[index].x =(keyPoints[a].x+string[index].x*5)/6;
  185.            string[index].y = (keyPoints[a].y+string[index].y*5)/6;
  186.          }
  187.          for(var c=0; c<1; c++)
  188.            for(var a=0; a<strLength; a++)
  189.            {
  190.              var beforeIndex = ((a-1)%strLength+strLength)%strLength;
  191.              var afterIndex = (a+1)%strLength;
  192.              string[(a)%strLength].x = (string[beforeIndex].x+string[afterIndex].x)/2;
  193.              string[(a)%strLength].y = (string[beforeIndex].y+string[afterIndex].y)/2;
  194.            }
  195.        }
  196.      }
  197.      function Init()
  198.      {
  199.        Template.start(Draw,Calc,cvs.getContext("2d"));
  200.        width = cvs.width = window.innerWidth;
  201.        height = cvs.height = window.innerHeight;
  202.        for(var a=0; a<10; a++)
  203.        {
  204.          keyPoints[a] = {x:width/2*(Math.sin(a/5*Math.PI)+1),y:height/2*(Math.cos(a/5*Math.PI)+1)};
  205.        }
  206.        string = new Array(strLength);
  207.        oldString = new Array(strLength);
  208.        for(var a=0; a<strLength; a++)
  209.        {
  210.          string[a] ={x:width/2,y:height/2};
  211.          oldString[a] = {x:width/2,y:height/2};
  212.        }
  213.      }
  214.      function cvsMouse(event)
  215.      {
  216.        //addKeyPoint(event)
  217.      }
  218.      function addKeyPoint(event)
  219.      {
  220.        keyPoints.push({x:event.offsetX,y:event.offsetY});
  221.        if(keyPoints.length>11)keyPoints.splice(0,1);
  222.       }
  223.       function randomPos()
  224.       {
  225.         keyPoints.push({x:parseInt(Math.random()*cvs.width),y:parseInt(Math.random()*cvs.height)});
  226.         if(keyPoints.length>11)keyPoints.splice(0,1);
  227.       }
  228.     </script>
  229.     <canvas id="cvs" width="700" height="600"></canvas>
  230.     <script>
  231.       Init();
  232.     </script>
  233.   </body>
  234. </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!