How to graph e^x, sin(x), and x^3

[Mayank Pandey]

Hello!

I want to be able to graph the following functions: e^x, sin(x), and x^3. How can I go about doing so?

Thank you for your time!

[cmalley]

PhET does not currently have a mature library for graphs.  A prototype called "bamboo" does exist, at https://github.com/phetsims/bamboo. But beware that this repository is in it's very early stages, and is likely to change.

If you decide to give bamboo a try, look at the examples in bamboo/js/demo/, especially DemoLinePlot.js.  You'll need to compute points for your functions (there is no specific support for the functions that you mentioned), and those points will be an array of dot/js/Vector2 (2-D vectors).  Pass that array to bamboo/js/LinePlot, which will handle rendering of the points. And you'll need to set some other things up before LinePlot can do the rendering -- again, look at the examples.

If you decide not to use bamboo, then you can use scenery/js/nodes/Path to render a kite/js/Shape.  The API for Shape allows you to describe any 2-D shape. Again, you'll have to compute the points that describe the Shape.

I hope this helps,

Chris Malley

PixelZoom, Inc.

[Mayank Pandey]

Which method would you personally prefer if you had to go about this and why?

Thank you for your time!

[cmalley]

I would (and have!) personally use bamboo. But that's because I'm involved in its development, so I'm one of the people deciding when to break things :)  You're welcome to try it, but beware that the API may change.

Chris Malley

PixelZoom, Inc.

[Mayank Pandey]

Hello!

Thank you so much for suggesting bamboo, I was able to do what I wanted. I just had one question, so I know that I can draw lines using 2 or more points given using Vector2 but what if I want to plot an equation of the form y = mx + b. I am trying to plot the derivative of a function and so I know the slope is the derivative (dy/dx) and the one point I need is the value of the function at that x (y = f(x)). One way around this I can think of is to find the some points from the equation and create a data set to plot the line, I was wondering if there's a way to do this directly with the equation of the line. I know linear square regression uses an equation of line to plot it but it doesn't use bamboo. 

Thank you so much for the time!

[cmalley]

Take a look at bamboo.StraightLinePlot, for plotting y = mx + b.  I just created it, and added it to the bamboo demo, so you'll have to do a git pull.

This example shows the power of the bamboo framework. You can create additional components quickly (in this case, a Plot type).   I basically took bamboo.LinePlot and modified it to draw a straight line.  If you have additional Plot types that you need, have a try at creating a new Plot type.

I hope this helps.

Chris Malley

PixelZoom, Inc.

[cmalley]

By the way... It would also be pretty easy to use LinePlot to plot y = mx + b.  Create a dataset that consists of 2 points: (xMin,f(xMin)), (xMax,f(xMax)).  Whenever m or b changes, recompute those 2 points, and call LinePlot setDataSet.

Chris Malley

PixelZoom, Inc.

[cmalley]

... and of course you'd have to handle the "infinite slope" (vertical line) case differently.  If m is infinite, then your dataset is [ (0,yMax), (0, yMin) ].

Chris Malley

PixelZoom, Inc.

[cmalley]

If you decided to use StraightLinePlot...  After consultation with the PhET development team, it has been renamed LinearEquationPlot.

Chris Malley

PixelZoom, Inc.

[Mayank Pandey]

Hello Chris,

Thank you for the help, I will be doing that! I really appreciate all your guidance!

Best,

Mayank