index.html

<html>
<head>
   <title>Function Painter</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
   <script src="purl.js" /></script>
   <script src="modernizer.js" />
      if(Modernizr.canvas && Modernizr.webworkers)
         // Your good
      else
         alert("Your browser won't work with this")
   </script>
   <script src="painter.js" /></script>
   <style type="text/css">
      canvas
      {
         background-color: white;
         width: 400;
         height: 400;
         margin: auto;
      }
      h1
      {
         margin: auto;
      }
      #functions, #options, #buttons
      {
         margin: 15px 0;
      }
      .link {
         margin-bottom: 5px;
      }
   </style>
</head>
<body>
   <a href="https://github.com/DivisibleZero/functionPainter"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

   <h1>Function Painter</h1>

   <canvas id="painter" width="200" height="200"></canvas>

   <h2>Input functions as f(x,y,t):</h2>

   <div id="functions">
      <label for="redFunction">Red Function:</label> <input type="text" size='100' id="redFunction" /><br />
      <label for="greenFunction">Green Function:</label> <input type="text" size='100'id="greenFunction" /><br />
      <label for="blueFunction">Blue Function:</label> <input type="text" size='100'id="blueFunction" /><br />
   </div>

   <div id="options">
      <input type='checkbox' id='tVariable' checked='true'>Use variable t for time</input><br />
      <label for="tInterval">Interval in miliseconds:</label> <input type='number' value='0' step="100" min="0" id='tInterval' /><br />
   </div>

   <div id="buttons">
      <button id="start" type="button" value="Draw it." onclick="javascript:draw();" >Draw It.</button>
      <button id="stop" type="button" value="Stop it."  onclick="javascript:stopDraw();" >Stop It.</button>
   </div>
   
   <label for="url">ShareURL:</label><input type="text" id="url"/>

   <h2>Things to try</h2>
   <ul id="examples">
      <li class="link multiple"> <strong> XOR is strange</strong>
         <ul>
            <li class="red">(21*sin(x+y)*t/50+(x-y))^(3*t+50)</li>
            <li class="green">(5*sin(x-y)*t/50+(x+y))^t</li>
            <li class="blue">23+123*sin(t/20)*sin(t/320*sqrt((123-x)*(123-x) + (45-y)*(45-y)))</li>
         </ul>
      </li>
      <li class="link single" >8/(2*2*(x^2-y^2))*cos((x - y)/2*t)*sin((x+y)/2)*t</li>
      <li class ="link single">255*sin(sqrt(pow(x, 2) + pow(y, 2)))</li>
      <li class ="link single">(x^x + y^y)^t</li>
      <li class ="link single">255/sin(sqrt(x*x + y*y) - t*t*atan2(y, x))</li>
      <li class ="link multiple"><strong>WARNING: May induce seizures</strong>
         <ul>
            <li class="red">255*(t%2)</li>
            <li class="green">255*(t%3)</li>
            <li class="blue">255*(t%4)</li>
         </ul>
      </li>
      <li class="link single">128*sin(x^t*t*atan(x, y) + y^t*t*atan(x, y))</li>
      <li class="link single">x^t+ y^t</li>
   </ul>
</body>
</html>