JavaScript Function Plotter

This is a basic function plotter written in JavaScript. It uses the "canvas" element from HTML 5, so it doesn't work in Internet Explorer. I've only tested it in Firefox, Opera, and Google Chrome so if you are using anything else, it may or may not work.

This is based on a command-line version I wrote for some experiments I was doing. I was using a canvas interface for the Rhino JavaScript engine, so it was easy to convert it to run in a browser. Since the interface is separate from the graphing library, I didn't need to change most of the code.

I wrote this over a few nights for fun, so it's not really full-featured yet, but it works for basic function plots. The interface also isn't that great since I haven't updated it for web browsers, but I plan to fix that eventually. Right now, it's almost exactly the same as the command-line version.

To get started, try entering commands like:

plot x*cos(x)
plot x = y^2
plot r = 4*cos(3*t)
let a = 5
let b = 2
let phi = PI/4
plot a*cos(t)*cos(phi) - b*sin(t)*sin(phi); b*sin(t)*cos(phi) + a*cos(t)*sin(phi)

Usage

This is based on a command-line version I wrote, so the interface isn't very obvious. The "Command Line" field is just like a "DOS" command line—just type a command (see below) and press "Enter".

You can also double click and use the mouse wheel to re-center the graph and zoom in/out.

Commands

plot {function}

Add a function be graphed.

Functions can have several formats:

{expression}
f(x) = {expression}
y = {expression}
f(y) = {expression}
x = {expression}
r = {expression}
x,y = {x-expression} ; {y-expression}
{x-expression} ; {y-expression}

The first three formats are normal functions from x to y, like y = 2*x + 3.

The "f(y)" and "x = " forms are functions from y to x.

The "r = " form is for polar functions from t (theta) to r (radius).

The "x,y = {x-expression} ; {y-expression}" and "x,y = {x-expression} ; {y-expression}" forms are parametric functions from t to (x, y).

{expression} is a JavaScript-like expression. The basic operators are available (+, -, *, /) plus ^ for exponentiation.
Functions from Math are available without the Math prefix.

{expression} can also be in the form, "d({function})" to get the derivative of a function.
It doesn't actually figure out the derivative, it just finds the slope between two close (x, x) pairs.

Derivatives can be nested, so you can get the second derivative like this: "d(d({function}))"

delete {number}

Remove the {number}th function (from zero). The other functions will move down in position to fill in the space.

let {constant} = {expression}

Assign a value to a "constant" for use in functions. If you change a constant's value, it will affect any function that depends on it. {constant} can be any string of letters except "x" or "y".

clear {constant}

Remove a constant. Any functions that used it will give errors when they are graphed.

set {option} {value}

Set display options.

axis {on\|off}	Turn on/off the x and y axis lines
grid {on\|off}	Turn on/off the grid
xgrid {size}	Set the x grid spacing
ygrid {size}	Set the y grid spacing
gridsize {size}	Set x and y grid spacing
tmin {expression}	Set the minimum angle (t) for polar functions (default 0)
tmax {expression}	Set the maximum angle (t) for polar functions (default 2*PI)
pmin {expression}	Set the minimum t for parametric functions (default 0)
pmax {expression}	Set the maximum t for parametric functions (default 2*PI)

view [{xmin} {xmax} {ymin} {ymax}]

Set the minimum/maximum x and y values for the graph. If there are not enough arguments, the missing values will not be changed. just typing "view" by itself resets the view to "-10 10 -10 10".

redraw

Redraw the graph. You shouldn't need to use this, since the graph will be redrawn any time something changes.