How to use javascript (or something) to make a grid with dragable points that will modify a curve in realtime?

Question

I want to make a box on the page that contains a graph with a curve on it, then user can drag a few points around modifying the curve. Preferably javascript or something I can easy share variables with DOM and ASP.NET. I want to get out a certain number of the points. Creating new points and deleting them would be great too. This way I could have a movable curve as well as an ability to select the number of coords they can save to database.

Oh yeah the curve is log(n) base, whatever I guess 10 default?

Answer 1

If you want to do this in javascript then I would suggest you not worry about the asp part, but just focus on the functionality you want, first.

You will want to look at the HTML5 element, <canvas>, and for IE you will want to get excanvas.js, http://excanvas.sourceforge.net/.

For a tutorial on canvas you can start here: https://developer.mozilla.org/en/Canvas_tutorial

This will enable you to have a drawable surface where you can capture mouse click and mouse move events, as well as other javascript events, so you can have the functionality you want.

Answer 2

If you just want to let the user draw a curve, I think you will want to look into using splines. This will let you compute a curve by defining points in 2D space. See, for example:

http://www.math.ucla.edu/~baker/java/hoefer/Spline.htm

I am not sure about the logarithmic base, though.