Width:
Height:

This page allows you to easily graph functions using Javascript. Simply enter your
code in the box and click run. The centre of the canvas is the origin (0, 0), and the
canvas goes from *-width* to *width* and *-height* to *height*.
These values are entred above.

The functions below require colour values. There are two functions used to specify colour.
Both of them have an *alpha* parameter - this is an optional parameter which set the
transparency of the colour between 0 (transparent) and 1 (opaque).

Creates a colour using values of *red*, *green* and *blue* all in the range [0-1].

Creates a colour with a hue in radians, and *lightness* and *saturation* in the range [0-1].

These are the main functions for this tool. There are currently three:

Clears the canvas to white.

fillCanvas executes your function for every x and y coordinate. Your function should return a colour. Here is a basic example:

fillCanvas(function(x, y) { var r, g, b; r = x; //red increases as x increases g = abs(y); //green increases as |y| increases b = 0; //blue is 0 return RGBA(r, g, b, 1); });

Clear(); fillCanvas( function(x, y) { return HSLA(2*PI*sin((x*y)/10), 0.8 , abs(sin(x/2)*sin(y/2))); });

It is also possible to use this function to fill the canvas with one colour. This is a good point to note that the contents of the previous render are not automatically cleared when you click run. After trying the previous example, running this example will add a magenta tint.

fillCanvas(RGBA(1, 0, 1, 0.5));

The Plot function executes your function for every value of t between *from* and *to*,
increasing by *step*. Your function should return either a number (a y coordinate) or an array,
of [x, y]. The plotted colour is either black (default), a colour you specify, or a function returning a colour.

The first example below uses the global constants **width**
and **height**, which are equal to the numbers supplied by you in the width/height boxes. The
second example demonstrates returning [x,y] coordinates, and also using a function to return a HSLA colour.

Clear(); Plot(-width, width, width/600, function(t) { return (height/2)*sin(t); }, RGBA(1, 0, 0));

Clear(); Plot(0, PI*80, 0.005, function(t) { return [(t/60)*sin(t), (t/50)*cos(t)]; }, function(t) { return HSLA(t, 0.5 , 0.5); });

PlotY essentially lets you write y = f(x). For every value of x between -**width** and
**width**, y is plotted at f(x) with a colour you specify (or a function(x) returning a colour).

The function is essentially a shortcut for

Plot(-width, width, width/600, f(t), col)

Clear(); PlotY(function(x) { var k = (height/20); x = x; return k * (2*x*x*x - 4*x*x - x + 2); }, RGBA(1, 0, 0));

All of the javascript math functions are available. Documentation for them is available
here. For convenience, there
is no need to use the Math object. For example instead of Math.*sin(t)* as you would
normally do, instead simply write *sin(t)*. Here is the list of maths functions and
constants which have been made available outside of the Math object:

- abs(x)
- acos(x)
- asin(x)
- atan(x)
- atan2(y,x)
- ceil(x)
- round(x)
- floor(x)
- sin(x)
- cos(x)
- tan(x)
- log(x)
- exp(x)
- pow(x, y)
*i.e. x ^ y* - sqrt(x)
- min(x, y, z ..n)
- max(x, y, z, ..n)
- random()
- e
- PI