
Desmos Graphing Calculator – HTML5 with LaTeX editor - TXV
https://www.desmos.com/calculator
======
jwmerrill
Lead calculator engineer here. I'm happy and a little surprised to see our
work on the HN front page this morning. We've been at it since 2011.

Our biggest goal with the calculator has been to make it easy to immediately
see the consequences of changing part of an expression, or changing a
parameter in an expression. When you remove the friction, this feels like
exploring.

Happy to answer any questions.

Edit: For the tech crowd, I'll play the "what happens when you type a key on
google.com?" game, only for Desmos:

1\. Your keystroke is interpreted and typeset by the awesome, open source math
typesetting library MathQuill: [http://mathquill.com/](http://mathquill.com/)

2\. Mathquill notifies us that an expression has changed, and gives us a new
LaTeX representation of it.

3\. We send this new expression to a webworker, where we do all of our math
processing. This lets us avoid blocking the UI thread, even if the user asks
us to do something like a sum from one to a billion.

4\. In the webworker, the expression LaTeX is parsed and analyzed for
dependencies, variable assignments, and function definitions. We mark any
other expressions that depend on symbols it exports as dirty, so that we can
also reanalyze and replot them.

5\. We compile the parsed expression (and any other expressions that need to
be updated) to javascript by calling "new Function()" on a string
representation. Since we need to evaluate these functions at thousands of
points for plotting, we've found this to be much more efficient than an
interpreter.

6\. We plot all plottable functions (explicit functions of one variable,
implicit functions of two variables, parametric equations, polar equations,
inequalities, etc.), and analyze them for discontinuities and points of
interest like minima, maxima, and zeros.

7\. We send a representation of the plotted curves back from the webworker to
the frontend, and they are plotted on the graph paper using the HTML5 canvas
API.

~~~
akovaski
This is really cool. Two things, though:

1\. Is there a way to do integrals? Are there plans to add that support?

2\. Though the UI doesn't block up when you do a large calculation, the
calculations do. e.g. I try to sum from 0 to 10^20, then realize I just wanted
to sum 0 to 20. If I change the equation, it seems like it has to complete the
first calculation to get to the new calculation.

~~~
jwmerrill
> 1\. Is there a way to do integrals? Are there plans to add that support?

We don't do integrals right now, but I hope we'll be able to add them at some
point. It can be pretty tricky to do integrals accurately for non-smooth or
highly oscillatory functions. Here's a graph I made recently exploring an
interesting numerical integration technique called tanh-sinh quadrature:

[https://www.desmos.com/calculator/jg4wamuwde](https://www.desmos.com/calculator/jg4wamuwde)

2\. ... If I change the equation, it seems like it has to complete the first
calculation to get to the new calculation.

Right, we currently wait for existing calculations to finish before starting
new ones. We've experimented with strategies for killing calculations that
look like they're hung, but we don't do anything like that right now. Killing
and respawning webworkers is expensive and has been crashy in various browsers
at various times, and short of that, it's hard to stop calculations midway
through.

~~~
abecedarius
It's possible to compile the calculation code to work in batches -- for
example, [http://wry.me/hacking/Turing-
Drawings/](http://wry.me/hacking/Turing-Drawings/) which compiles a 2d Turing
machine into an asm.js function parameterized by how many steps to take in an
uninterruptible batch. Another example of batching for responsiveness:
[http://wry.me/hacking/powersp.html](http://wry.me/hacking/powersp.html)

It's also easy for me to suggest more work for you!

------
pliny
Hope this doesn't get you banned in Germany:

\sin \left(x^2+y^2\right)\cdot \left(y^{32}\ -\ x^{32}\ -x\cdot y\right)\ \ =\
0

EDIT: also

\sin \left(x^2\ \ +y^2\right)\left(y^{32}\ -\ x^{32}\ -x\cdot y\right)\cdot
\left(\frac{\left(x-y\right)}{\left(x-y\right)^2}\cdot
\frac{\left(y+x\right)}{\left(y+x\right)^2}\ \right)\ =\ 0

~~~
fgandiya
You have a lot of spare time pliny. Desmos renders it well, although zoomed
out, it looks like bacteria under a microscope.

------
nerdy
See the staff-selected art (created with the Desmos Graphing Calculator) for
some examples of what robust input looks like:
[https://www.desmos.com/art](https://www.desmos.com/art)

------
dcgoss
I'm actually amazed that this is news to the HN crowd. Desmos is in the
standard vocabulary of many students.

------
sqren
This looks great. I've been using fooplot.com but Desmos is much more
polished, so will consider switching.

Initial things I like:

\- Latex representation

\- Ability to save expressions

\- Pretty UI

Initial issues:

\- Keyboard shortcuts. I cannot jump to start/end of line.

\- Copy/paste. I get something like this when copying an expression:
"\sqrt{\left(x\right)}"

All in all: great job!

~~~
laughinghan
Augh yeah I'm annoyed every time I try Ctrl-E to jump to the end of the line
and it doesn't work.

\sqrt{\left(x\right)} is LaTeX. What would you prefer it to copy-paste as?

------
mguijarr
Really awesome. I wonder which JS library is used for the plotting itself ? Is
it made by you guys ? Is it open source ? Thanks and keep on with the good
work !

~~~
jwmerrill
We just use canvas for drawing. SVG is tempting because it would help with
things like figuring out which curve a user clicked on, but we've been
disappointed by SVG performance and cross browser differences every time we've
tried it.

------
dguest
Awesome. I created a HN account just to upvote this.

------
0942v8653
iPhone app:

Desmos Graphing Calculator by Desmos
[https://appsto.re/us/Kl-8M.i](https://appsto.re/us/Kl-8M.i)

