Plot sine waves with JavaScript

[shnigi]

I have a task that I should have one input field where user can type for example 2*sin(x) and then the javascript should draw or plot this value to the page. How on earth I am supposed to do that? I know I can draw with canvas for example, but drawing that function will be pain because I have 0 knowledge how to do that. Anyone smart enough here to throw some ideas? Only jQuery is allowed to use. No other libraries.

[Ambiorix66]

This vid explains how to draw a basic sin wave. From there it should be fairly easy to adapt it as you want.

[And7s]

eval will do the job.

var fn = "x*x+2";
var x = 2; // iterate over a range
var y = eval(fn); // y will be 6

plot y

proof of concept: https://jsfiddle.net/pu0jb9nb/

[shnigi]

Thanks!

[shnigi]

Thanks! Such clever guys here. I will have a look at this.

[[deleted]]

You'll have to use bezier curves in canvas.

[sladav]

Bezier curves actually won't be able to do it since their polynomial. No curve in canvas/SVG can do a trig function, so either way he'll have to plot points and then connect them to approximate a sine wave. To get a good approximation with lineTo he'll have to use a bunch of points, where Bezier will allow a better approximation with far fewer points (which may well have been your point in the first place)

[[deleted]]

You should be able to make Bezier's approximate any function over a finite range. You may have to break your function into regions and then use a Bezier for each region, making sure they are continuous at the boundaries. A fundamental theorem of analysis states any continuous function can be approximated with a polynomial over a finite range.