Experiment: Javascript Graphing Calculator

Rules(X)

This is a list rules that the calculator uses to convert more readable functions into Javascript. Scroll down to learn why that makes sense, but this is basically just a list of things you can do. Write what is in the left column and it will be converted automatically. You can also type in Javascript if you like.

Search Replacement Explanation

It can be a little bit broken sometimes, so type stuff out with explicit arithmetic operators (+ - * /) if something goes wrong.

Leave any option blank to use its default.

f(X) =
Window:
Name:
Description:
Permalink graph

Explanation

If you already know a thing or two about web design, you can skip around a bit. Otherwise I hope my phrasing is easy to understand.

This graphing calculator started as a way to display different functions from the Interpolation experiment. I thought it was pretty cool so I made it more modular and put it into its own experiment, making it editable with a somewhat intutive user interface. I mostly made it just for fun, but it was also to prove to myself that even someone less than a year out of high school could program a competent graphing calculator.

To start with I looked into HTML5 Canvases. They seemed pretty fun to work with so I chose them as the "engine" to display the graph. All I had to do was draw a line from one pixel to the next with the output value from the function as Y, right? Not quite that easy. Displaying the graph in the first place was going to be a challenge. The function itself was another issue. Being able to use Javascript in a graph is super powerful, but if I was going to make it user-friendly, I can't expect everyone to know the language.

It took a lot more math to display even a basic graph than I previously expected. I can't just map X and Y pixel values to whatever function is used since not only is (0,0) at the very top left of the rendered graph, but also the direction of positive Y is down, which isn't too helpful for a graph. Also, pixels are really small, so it would be hard to see small graphs. Long story short, I did some math to convert pixels to units using any given window and X/Y resolution.

With the display problem now solved, how can I make it easy to use? The answer is pretty simple: replace short, readable versions of normal math operations with the Javascript equivalents. That's what the "Rules of X" table is telling you. The graph goes through your function replacing every "Search" with its corresponding "Replace." It automatically populates the table with every rule and an explanation for each so you have something to go off of. A list of things you can type and how to format them.

An idea that worked out better than I originally planned was to load the graph in an iframe. An iframe is a piece of a web page that can display another page inside of it. Mind-blowing, I know. I could use this to my advantage, making my life easier by actually forming the graph remotely. That is, putting all the function and window junk into a single iframe URL that spits the graph out on the page. Embedding a page that draws a canvas based on a line of Javascript, if you're a nerd. I made it resizable with the ability to change the pixel resolution, and all I have to do is put some info into the URL so the iframe displays the graph in an invisible box. It looks like it's right on the page, and you can even save or copy the image.

Examples

This one is a parabola!

X power!

Separate different lines with a semicolon

Is this even useful?

Smooth sin() interpolation