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: