I am a Swedish computer science & media technology student who loves to work with exciting projects that involve Visualization, Software Development, Human Computer Interaction and Education. View full presentation

This blog contains random thoughs and some notes from the development of Continuous — a modern WebGL based math visualization tool to help students learn algebra and calculus. Show archive

emil axelsson

July 23 2013

Client-Server Communication in Continuous

The last few days, I have been working on what I call the SimpleParser, which has as its responsibility to read math expressions as they are entered by the user and create the expression trees that I mentioned in my last post.

For the prototype/demo of Continuous I have previously implemented a relatively simple shunting yard algorithm, which could handle the basic precedence rules of mathematical operators. The implementation was very compact - expressed in only two or three JavaScript functions - and was pretty much a translation of this pseudocode to JavaScript. My lexer (the preprocessing step that separates all the symbols, operators and numbers in the text) consisted of the longest regex string I have ever written. It was a quick hack and it worked as a proof of concept but it was completely unmaintainable.

So I decided to rewrite the whole thing and add support for parsing vectors and matrices. The parser I wrote is based on the design by Vaughan Pratt, who wrote a paper on "Top down operator precedence" back in 1973. Using this technique, I succeeded in writing a much more readable and modular design than the previous one. I will not describe further right now how it works, but I recommend this excellent article if you are interested in doing something similar.

Now, I want to talk about today's breakthrough!

First round-trip to the Sage Server

With an almost fully-functional parser and a formatter ready, I had all the ingredients I needed to start building on the communication between the the Continuous browser application and a node.js-server, that in turn communicates with Sage. I made this UML-inspired illustration of the program flow when the client is asking the server to simplify an expression, for example sin(x)^2+cos(x)^2 (which always simplifies to 1).

Oh, gosh, that is a lot of modules, you might say. Let me justify some of my design decisions.

Promising results

I managed to put the above structure together today, and successfully sent my first requests from the Continuous web app to the node.js server. I put together a tiny application where you can edit a mathematical expression and see Sage simplify it live on every keystroke. I was stunned when I saw the results. The possibilities that this brings to dynamic 3D visualization of math are incredible, and I can hardly wait to add a graphics engine on top of all this...