
ζ(z)

z^7

z^3

sin(z)

mobile ζ(z)

mobile z^3

mobile ui
Inspiration
The Riemann zeta function is one of those objects in modern mathematics that many may have heard about but is extremely difficult to intuitively understand and grasp its concept. Most would have come across it from the 1million dollar millennium open problem hosted the Clay Math Institute, or the sum of the divergent sum 1+2+3+4... = 1/12, which seems nonsensical or just obviously incorrect.
Any casual Math enthusiast who starts to read into this topic will come across this ubiquitously referenced idea called "analytic continuation", which can be frustratingly opaque and unintuitive if one tries to visualize it in the way we visualize conventional functions with inputs on the xaxis and outputs on the yaxis. This obviously does not work for complexparametered functions as they bring one value on the complex plane to another output point on the same complex plane. Visualizing using the conventional Cartesian coordinate system will not bring out the true essence of a function's nature and will only confuse a freshman more than necessary.
Here is where Analytical Studio comes in, and also the source of our inspiration.
Analytical Studio analytically continues _ any _ function onto the complex plane (not just the zeta function), and animates a function by bringing its input point on the to its output point on the complex plane, done in a html canvas.
Such animations not only yields fresh insight on already existing functions and their behaviour on the complex plane, such as extending the quadratic function to have complex numbers as it input and output, but also clearly shows the nature of the function in a crystal clear manner to the user. If a function maps many values to zero, the animation will show the coordinate lines squeezing into the origin.
This new way of visualizing and representing functions can also potentially elucidate many concepts that might be foreign to many students, for instance such as the Euler identity (e^iπ = 1). By entering into our webapp (e^iz, z is the parameter), the animation will show concentric circles, which gives the viewer an intuitive understanding that the e^iz function rotates points according to the angle (z). Substituting π into z to get back to the Euler identity, one can easily see that a parameter π rotates 1 to 1, which is the same as rotating all points by π radian degrees, highlighted by the animation the functions which end in concentric circles.
Analytic studio is not limited to just academic or classroom purposes, it is also a way to appreciate mathematics as an art form. You will soon know what we are talking about once you take a look at the image gallery. ;)
What it does
It maps every point on the screen to its output point according to a user input complex function (ie. a function that takes in a complex number as its argument and outputs another complex number), and animates each point along a straight line path from input to output on every single point on the html canvas.
How we built it
Analytical Studio is built using PolymerJS, PaperJS, and TweenJS.
PolymerJS was used for overall layout and its builtin material design themes, mainly chosen due to it's ability to compose apps quickly with breathtaking UIs. PaperJS was used for the ease of use in managing the HTML Canvas API for the graph itself, while TweenJS was used for rendering precomputed animation paths based on the output values of the provided function. The webapp is a SinglePage, Static, Clientside based site, it does not need to cache any info or have any serverside processing.
Challenges we ran into
One of the challenges we ran into is writing algorithms for things like converting infix notation to reverse polish notation, as we are quite new to it. We have to do research and understand how the algorithm works and implement it into our program. Secondly, we are using dropbox to share our files, and intellij programs always autosave the projects. When we are editing on the same file, this causes conflict on the server and unnecessary production of the workspace.xml because intellij ides always save the projects automatically.
Last but not least, optimization is a really big problem to us, because to map a point to its output point, it requires a lot of calculations. We also tried many times to reduce render times, especially animation frame rendering times. We tried using the triedandtested method of using an offscreen canvas to prerender frames and then copy it, but calculating those frames took too long and the resulting canvas had miscalculations in it (centering issue).
Accomplishments that we're proud of
From this project, we managed to make the graph to animate by moving the initial point to its output point in a decently short amount of time. In particular, some of the functions give a very beautiful visualization, such as polynomial functions, trigonometric functions, hyperbolic functions, the Rieman Zeta function and so on.
What we learned
WebGL is definitely preferred for rendering, all other technologies don't event come close to the frames per second it gets. Secondly, jqmath worked better for us in rendering math equations as compared to the frequently used MathJax, as it is 5 times faster as it is ASCII based compared to SVG rendering done by MathJax.
What's next for Analytic Studio
Implement Polygamma functions to orders higher than 3, as well as improve the parsing of the math equations as our current parser is quite basic and does not parse things like integrals and differentials. We also intend to improve the animation of the graph itself, namely in terms of increasing the frames per second we can obtain.
Built With
 html5
 css3
 javascript
 tween.js
 paper.js
 polymer.js
Log in or sign up for Devpost to join the conversation.