Hacker News new | past | comments | ask | show | jobs | submit login
Desmos Graphing Calculator – HTML5 with LaTeX editor (desmos.com)
114 points by TXV on Mar 27, 2016 | hide | past | web | favorite | 29 comments

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/

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.

OP here, you guys did an amazing job. That is by far the best plotting tool I've ever seen. As a user, I especially love the point 1 you mentioned above. For all people who, like me, find these things fascinating, here's a link to a collection of functions with interesting graphs and explanations. Pair it with Desmos and the fun is guaranteed. https://elepa.files.wordpress.com/2013/11/fifty-famous-curve...

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.

> 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:


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.

It's possible to compile the calculation code to work in batches -- for example, 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

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

I'm pleasantly surprised that the equation editing is closer to Word than to LaTeX (which can be cumbersome at times, especially with braces and some constructs like fractions).

We aim to be better than Word—have you noticed anything that's better in Word than in MathQuill?

A few convenience auto-corrects, like typing +- to get ±, or -> to get → (and => to get ⇒). While \pm isn't too hard to type or memorize, the arrows in LaTeX are horribly painful (IMHO). \rightarrow for the normal one, okay. But the double? \Rightarrow? \rightArrow? \rightdoublearrow? Argh!

You seem to be doing that for a few other things already, e.g. >= changes into ≥.

I actually like Word's way of getting upright text (and thus without the math spacing/kerning) by using double quotes around something better than using \mathrm. That may well be subjective, though (but it is shorter).

On the note of double-quotes: I am using US International, which has quite a few dead keys: ', ", ^, ~. Usually (on Windows, at least), you get the bare character (without combining it with anything) by typing "+space, which doesn't work in MathQuill, it simply swallows it. The same issue may well happen for a subset of those characters in other European keyboard layouts. Especially ' (used for primes) is a common dead key.

In any case, MathQuill seems amazing and a good step forward in my eyes. I know my way around LaTeX, but managed to take notes in math lectures with Word faster and with fewer errors, simply due to the fact that (a) the language is much nicer to type (especially with non-US keyboard layouts due to needing far fewer braces and backslashes), and (b) you immediately see what you get. Both things I find handled considerably better in Word than in LaTeX (Lyx might be an option for (b), granted). So thank you for creating MathQuill and making it awesome (instead of just delegating to MathJax on every keystroke ;-))

Generally, Word's math markup is described in UTN #28: http://unicode.org/notes/tn28/ so it's for the most part openly documented, along with reasons why certain defaults or behaviours were chosen.

I use Desmos all the time, both for my own work and as a tutor, so thanks for the great resource! Is there any plan to make a version for bivariate functions? It would also be awesome if you could just paste a function written in LaTeX into des is to get a plot.

You can already plot bivariate equations as implicit plots; e.g. things like "x^2 + y^2 < 9" or `sin(x) + sin(y) = 0.2` already work.

Are you asking about numerically solving systems of equations? Or 3D plotting? We might do one or both of those at some point, but they aren't on the near term road map.

I meant functions of the form z=f(x,y) (So 3D plots).

Not natively (yet), but here's a 3D graph someone made: https://www.desmos.com/calculator/6uhmnazdo0

[disclaimer: I work at desmos]

Cool, thanks!

Wow. All I can say is thanks. This really helped me in my calculus classes, especially the more advanced topics, like parametric equations. It even works well across most devices too.

What are you guys planning on doing next?

> What are you guys planning on doing next?

One of the big things that we've been working on is building interactive lessons that a whole classroom can do together:


Some of these use the calculator as a tool, and they all generally keep with the spirit of trying to make it cheap to try out an idea and see what it implies.

Wow, thanks for an amazing tool that's always been free to use :)

How do you guys pay the bills with no premium features like all the other calculators on the app store?

> How do you guys pay the bills with no premium features like all the other calculators on the app store?

We license our calculator API to people who want to use it to make math content, or integrate it as a tool for students into their books, exercises, assessments, etc.


Considering all the stuff that makes it on to the HN front page I am indeed surprised Desmos isn't a regular given the presumed makeup of the HN audience. Love Demos, I am the developer of Jasymchat.com and consider you guys my EdTech cousins :)

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

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

What on earth possesses people to insert extra spaces between all the operators? It's so ugly and unnecessary.

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

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

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!

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?

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 !

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.

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

iPhone app:

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

Applications are open for YC Winter 2020

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact