Home
#
FormulaGraph

I'm excited to introduce FormulaGraph, a graphing calculator for general formulas (not just functions of x)!

Whereas many graphing calculators require an equation like y = sqrt(1 - x^2), FormulaGraph can handle formulas like y^2 + x^2 = 1. You don't have to solve for y to use FormulaGraph.

Here's what else it can do:

- Polar formulas in terms of r and theta, such as r = 2*sin(2*theta)

- Animate based on time t: y = x^(t % 4)

- Inequalities: x^100 + y^100 <= 2

- Handle panning and zooming using mouse and touch/pinch

- Share links

While FormulaGraph lacks features other graphing calculators have (such as precisely calculating y- and x-intercepts), it has some unique benefits:

(I introduced this list of calculators previously)

- TI-83 Plus

- Features only in FormulaGraph: interactive graphs, animate with time, available in any web browser, graph formulas (not just functions)

- WolframAlpha

- Features only in FormulaGraph: interactive graphs, animate with time

- WolframAlpha won't graph some formulas, e.g. y^2+x^x=1 and x^y=x^x^x^x^x^x

- Meta-Calculator

- Features only in FormulaGraph: interactive graphs, animate with time, graph formulas (not just functions), modulo operator

- FooPlot

- Features only in FormulaGraph: animate with time, graph formulas (not just functions), graph inequalities

- GeoGebra Graphing Calculator

- Features only in FormulaGraph: available in any web browser, graph polar formulas, modulo operator

- GeoGebra Graphing Calculator won't graph some formulas, e.g. x*y*(x-y)*(x+y) < 1

- Desmos

- Desmos is really great. It's the best graphing calculator in this list. It can handle formulas, animations, polar formulas, and more!

- One thing FormulaGraph handles better: Desmos doesn't support polar equations which aren't linear in r. Example: r^2 = cos(theta)

- Desmos has another quirky inconvenience: it's not possible to copy/paste formulas or easily edit their text. FormulaGraph's formula input boxes are super convenient in comparison. This feature is a must-have to make complex shapes like the Batman Curve.

- NumWorks Graphing Calculator

- Features only in FormulaGraph: interactive graphs, convenient UI, animate with time, available in any web browser, graph formulas (not just functions), graph polar formulas, graph inequalities

- Relplot

- Features only in FormulaGraph: interactive graphs, animate with time

- Relplot has some graphing correctness bugs. Examples: y = x mod 2, y = x^x, y^y = x^x, r = 2*sin(4*theta), r = theta covers a small range of theta values

- I'm reporting these bugs and I hope they get fixed!

- Graphtoy

- Features only in FormulaGraph: graph formulas (not just functions), graph polar formulas, graph inequalities

- Graphtoy has visual glitches (missing segments) when drawing circles and other similar shapes (e.g. y = sqrt(1-x^2) and y = -sqrt(1-x^2))

- Bonus: FormulaGraph has tons of test coverage, including checks that graphs render accurately. You can run the tests here. Beware: they take ~1 minute to run!

FormulaGraph's origins:

This is a hobby project I made by combining code and ideas from other peoples' cool projects.

It all started with Relplot, a project by Cornell's Andrew Myers. In Professor Myers' functional programming class, we implemented formula plotters using interval arithmetic.

Over a decade later, I stumbled upon Inigo Quilez's Graphtoy. I had fun making shapes and I thought it'd be even more fun to bring Relplot's general formula capabilities to Graphtoy's interactive UI.

So that's what I did: I ported Relplot's implementation of interval arithmetic from SML to JavaScript and spliced it into Graphtoy. I really appreciate all the work Professor Myers and Inigo did, especially publishing the source code for these projects.

There was one remaining difficulty: While Graphtoy uses JavaScript's built-in parser for inputted expressions, I needed to completely replace the implementations of operators like +, -, *, /, %. JavaScript doesn't have operator overloading so I needed my own expression parser.

That's where Lawrence Kesteloot's awesome web implementation of Turbo Pascal (my backup) comes in (see his interesting writeup about the project). I simply copied and reused his expression parser. Thank you Lawrence for building and sharing that passion project! I particularly like that this project has very few dependencies. And I was able to remove the few 3rd party dependencies it had in the portion of code I reused.

Key integration points where these projects are glued together:

- relplot.js - look for "MAIntervalMath" for a reimplementation of Relplot's interval arithmetic

- graphtoy.js - look for "Draw Relplot graphs" to see where Relplot was added to Graphtoy

- utilities.js - look for "_convertFormulaToFnSyntax" to see where the parser comes into play

Here are some miscellaneous things I've learned during this project:

- Some equations have solutions that are not clearly visible on most graphing calculators. For example, y = x^x has valid solutions for negative values of x which are single points (e.g. (-1, -1)).

- New shapes:

- Square

- Heart

- Crazy lotus

- Modulo

- Create concentric shapes using modulo

- Create repeating animations using modulo

- There are different definitions of modulo for negative numbers

- Many programming languages implement modulo as "truncated division"

- Desmos, Relplot, and Graphtoy use "floored division" so I use that in FormulaPlot too

- How to convert Cartesian coordinates to polar

- Based on Relplot's implementation, I thought I just had to replace "r" with "sqrt(x^2+y^2)" and "theta" with "atan2(y, x)".

- This turned out to be much harder than I expected in part because Relplot's polar coodinate support is incomplete (noted above in my comparison of FormulaGraph and Relplot).

- After what I thought would be a 20 minute feature consumed several weekends, I'm reminded of the tongue-in-cheek Programmers' Credo: "We do these things not because they are easy, but because we thought they were going to be easy"

- I solved this with 3 techniques: graph positive r and negative r (with theta shifted by pi), translate atan2's result range to [0, 2pi] (instead of [-pi, pi]), and iteratively render with theta += 2pi.

- Debugging an incorrect graph is similar to general debugging. Try to find the simplest case that reproduces the issue. I was relieved when a glitch in y = (mod(floor(x),2))*(x-floor(x))+(1-mod(floor(x),2))*(-x-floor(-x))+(1-mod(floor(x),2))*(1-ceil(x-floor(x))) reproduced in the far simpler y = ceil(x-floor(x)).

- When using interval arithmetic to graph formulas, it's ok to return wide intervals when the input is wide as long as the result intervals converge as the inputs get smaller. I use this technique to avoid the incorrect vertical line segments some graphing calculators (including Relplot and Graphtoy) show for y = floor(x).

To conclude, here's an improved version of the bouncing ball animation (original here).

Happy graphing :)

Whereas many graphing calculators require an equation like y = sqrt(1 - x^2), FormulaGraph can handle formulas like y^2 + x^2 = 1. You don't have to solve for y to use FormulaGraph.

Here's what else it can do:

- Polar formulas in terms of r and theta, such as r = 2*sin(2*theta)

- Animate based on time t: y = x^(t % 4)

- Inequalities: x^100 + y^100 <= 2

- Handle panning and zooming using mouse and touch/pinch

- Share links

While FormulaGraph lacks features other graphing calculators have (such as precisely calculating y- and x-intercepts), it has some unique benefits:

(I introduced this list of calculators previously)

- TI-83 Plus

- Features only in FormulaGraph: interactive graphs, animate with time, available in any web browser, graph formulas (not just functions)

- WolframAlpha

- Features only in FormulaGraph: interactive graphs, animate with time

- WolframAlpha won't graph some formulas, e.g. y^2+x^x=1 and x^y=x^x^x^x^x^x

- Meta-Calculator

- Features only in FormulaGraph: interactive graphs, animate with time, graph formulas (not just functions), modulo operator

- FooPlot

- Features only in FormulaGraph: animate with time, graph formulas (not just functions), graph inequalities

- GeoGebra Graphing Calculator

- Features only in FormulaGraph: available in any web browser, graph polar formulas, modulo operator

- GeoGebra Graphing Calculator won't graph some formulas, e.g. x*y*(x-y)*(x+y) < 1

- Desmos

- Desmos is really great. It's the best graphing calculator in this list. It can handle formulas, animations, polar formulas, and more!

- One thing FormulaGraph handles better: Desmos doesn't support polar equations which aren't linear in r. Example: r^2 = cos(theta)

- Desmos has another quirky inconvenience: it's not possible to copy/paste formulas or easily edit their text. FormulaGraph's formula input boxes are super convenient in comparison. This feature is a must-have to make complex shapes like the Batman Curve.

- NumWorks Graphing Calculator

- Features only in FormulaGraph: interactive graphs, convenient UI, animate with time, available in any web browser, graph formulas (not just functions), graph polar formulas, graph inequalities

- Relplot

- Features only in FormulaGraph: interactive graphs, animate with time

- Relplot has some graphing correctness bugs. Examples: y = x mod 2, y = x^x, y^y = x^x, r = 2*sin(4*theta), r = theta covers a small range of theta values

- I'm reporting these bugs and I hope they get fixed!

- Graphtoy

- Features only in FormulaGraph: graph formulas (not just functions), graph polar formulas, graph inequalities

- Graphtoy has visual glitches (missing segments) when drawing circles and other similar shapes (e.g. y = sqrt(1-x^2) and y = -sqrt(1-x^2))

- Bonus: FormulaGraph has tons of test coverage, including checks that graphs render accurately. You can run the tests here. Beware: they take ~1 minute to run!

FormulaGraph's origins:

This is a hobby project I made by combining code and ideas from other peoples' cool projects.

It all started with Relplot, a project by Cornell's Andrew Myers. In Professor Myers' functional programming class, we implemented formula plotters using interval arithmetic.

Over a decade later, I stumbled upon Inigo Quilez's Graphtoy. I had fun making shapes and I thought it'd be even more fun to bring Relplot's general formula capabilities to Graphtoy's interactive UI.

So that's what I did: I ported Relplot's implementation of interval arithmetic from SML to JavaScript and spliced it into Graphtoy. I really appreciate all the work Professor Myers and Inigo did, especially publishing the source code for these projects.

There was one remaining difficulty: While Graphtoy uses JavaScript's built-in parser for inputted expressions, I needed to completely replace the implementations of operators like +, -, *, /, %. JavaScript doesn't have operator overloading so I needed my own expression parser.

That's where Lawrence Kesteloot's awesome web implementation of Turbo Pascal (my backup) comes in (see his interesting writeup about the project). I simply copied and reused his expression parser. Thank you Lawrence for building and sharing that passion project! I particularly like that this project has very few dependencies. And I was able to remove the few 3rd party dependencies it had in the portion of code I reused.

Key integration points where these projects are glued together:

- relplot.js - look for "MAIntervalMath" for a reimplementation of Relplot's interval arithmetic

- graphtoy.js - look for "Draw Relplot graphs" to see where Relplot was added to Graphtoy

- utilities.js - look for "_convertFormulaToFnSyntax" to see where the parser comes into play

Here are some miscellaneous things I've learned during this project:

- Some equations have solutions that are not clearly visible on most graphing calculators. For example, y = x^x has valid solutions for negative values of x which are single points (e.g. (-1, -1)).

- New shapes:

- Square

- Heart

- Crazy lotus

- Modulo

- Create concentric shapes using modulo

- Create repeating animations using modulo

- There are different definitions of modulo for negative numbers

- Many programming languages implement modulo as "truncated division"

- Desmos, Relplot, and Graphtoy use "floored division" so I use that in FormulaPlot too

- How to convert Cartesian coordinates to polar

- Based on Relplot's implementation, I thought I just had to replace "r" with "sqrt(x^2+y^2)" and "theta" with "atan2(y, x)".

- This turned out to be much harder than I expected in part because Relplot's polar coodinate support is incomplete (noted above in my comparison of FormulaGraph and Relplot).

- After what I thought would be a 20 minute feature consumed several weekends, I'm reminded of the tongue-in-cheek Programmers' Credo: "We do these things not because they are easy, but because we thought they were going to be easy"

- I solved this with 3 techniques: graph positive r and negative r (with theta shifted by pi), translate atan2's result range to [0, 2pi] (instead of [-pi, pi]), and iteratively render with theta += 2pi.

- Debugging an incorrect graph is similar to general debugging. Try to find the simplest case that reproduces the issue. I was relieved when a glitch in y = (mod(floor(x),2))*(x-floor(x))+(1-mod(floor(x),2))*(-x-floor(-x))+(1-mod(floor(x),2))*(1-ceil(x-floor(x))) reproduced in the far simpler y = ceil(x-floor(x)).

- When using interval arithmetic to graph formulas, it's ok to return wide intervals when the input is wide as long as the result intervals converge as the inputs get smaller. I use this technique to avoid the incorrect vertical line segments some graphing calculators (including Relplot and Graphtoy) show for y = floor(x).

To conclude, here's an improved version of the bouncing ball animation (original here).

Happy graphing :)