{"id":18748,"date":"2016-11-19T19:48:40","date_gmt":"2016-11-19T19:48:40","guid":{"rendered":"http:\/\/www.oracletutoring.ca\/blog\/?p=18748"},"modified":"2018-07-10T14:47:30","modified_gmt":"2018-07-10T14:47:30","slug":"web-design-ysinx-from-jsdraw2dx","status":"publish","type":"post","link":"https:\/\/www.oracletutoring.ca\/blog\/web-design-ysinx-from-jsdraw2dx\/","title":{"rendered":"Web design: y=sinx from jsDraw2DX"},"content":{"rendered":"

The tutor shows how to produce a graph of sinx on a web page using jsDraw2DX.<\/h1>\n

I’ve mentioned jsDraw2DX in a couple of posts (here<\/a> and here<\/a>).<\/p>\n

For producing a graph of sinx, the basic construct is<\/p>\n

\nvar singraph = new jxFunctionGraph(‘Asin(b(x-c)) + d’, x_start, x_end, thePen);
\nsingraph.draw(graphics_div);\n<\/div>\n

<\/p>\n

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.<\/p>\n

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.<\/p>\n

Here’s an example:<\/p>\n

\n
<\/div>\n<\/div>\n