desmos3/index.html

<script src="https://www.desmos.com/api/v1.3/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
<html lang='en'>
   <head>
      <title>Desmos | Graphing Calculator</title>
      <link rel='icon' href='calc_thumb.png'>
   </head>
   <div id="calculator" style="width: 100%; height: 100%;"></div>
   <script>
       var elt = document.getElementById('calculator');
       var calculator = Desmos.GraphingCalculator(elt);
       calculator.setExpression({ id: 'top', latex: 'y=0 \\{0<x<480\\}', color: '#2464b4' });
       calculator.setExpression({ id: 'bottom', latex: 'y=360 \\{0<x<480\\}', color: '#2464b4' });
       calculator.setExpression({ id: 'left', latex: 'x=0 \\{0<y<360\\}', color: '#2464b4' });
       calculator.setExpression({ id: 'right', latex: 'x=480 \\{0<y<360\\}', color: '#2464b4' });
       calculator.setExpression({ id: 'frame', latex: 'frame=0' });
   
       function changeGraph(key, latex, frame) {
           calculator.removeExpression({ id: 'frame' });
           calculator.setExpression({ id: 'frame', latex: `frame=${frame}` });

           while (key > 0) {
               calculator.removeExpression({ id: 'expr-' + key });
               key--;
           }
           for (var expr of latex) {
               console.log(expr);
               key++;
               calculator.setExpression({ id: 'expr-' + key, latex: expr, color: '#2464b4' });
           }
           return key;
       }
   
       function go() {
           var key = 0;
           var frame = 0;
   
           setInterval(function() {
               if (frame < latexFrames.length) {
                   key = changeGraph(key, latexFrames[frame], frame);
                   frame++;
               }
           }, 1000/24)
       }

       function test() {
           xhr = new XMLHttpRequest();
           xhr.open("GET", "http://127.0.0.1:5000/");
           xhr.send();
   
           xhr.onload = function() {
               latexFrames = JSON.parse(xhr.response);
                changeGraph(0, latexFrames[100], 100);
           }
       }
   
       function init() {
           xhr = new XMLHttpRequest();
           xhr.open("GET", "http://127.0.0.1:5000/");
           xhr.send();
   
           xhr.onload = function() {
               latexFrames = JSON.parse(xhr.response);
               go();
           }
       }
   
   </script>
</html>