Web design: y=sinx from jsDraw2DX

The tutor shows how to produce a graph of sinx on a web page using jsDraw2DX.

I’ve mentioned jsDraw2DX in a couple of posts (here and here).

For producing a graph of sinx, the basic construct is

var singraph = new jxFunctionGraph(‘Asin(b(x-c)) + d’, x_start, x_end, thePen);

Above, A,b,c,and d are numbers to customize the sin graph. x_start and x_end are the start and end x-coordinates of the graph. thePen is an instance of jxPen, used to draw curves and outlines. graphics_div is the <div> element in which the graphics will be displayed.

Since webpage coordinates often start from the upper corner, then go across and down (rather than up), you may find you need the parameter A to be negative for the graph to look as expected. For instance, y=-sinx might be needed to produce a graph that looks like y=sinx should.

Here’s an example:

The actual function to produce the graph above in jsDraw2DX:




Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Tagged with: ,

Leave a Reply