How can I use javascript (or whatever) to create a mesh with dragged points that will change the curve in real time?
I want to make a field on the page that contains a graph with a curve on it, then the user can drag multiple points around the curve change. Preferably javascript or something I can easily exchange variables with the DOM and ASP.NET. I want to get a certain amount of points. Creating new points and removing them will be great too. This way I could have a movable curve, and also the ability to choose the number of coordinates they can store in the database.
Oh yes, the curve is the log (n) base, whatever I think is the default 10?
source to share
If you want to do this in javascript, I would advise you not to worry about the asp part, but focus on the functionality you want first.
You need to look at the HTML5 element <canvas>
, and for IE you want excanvas.js, http://excanvas.sourceforge.net/ .
For a canvas tutorial, you can start here: https://developer.mozilla.org/en/Canvas_tutorial
This will allow you to have a drawable surface on which you can capture mouse and mouse movement events as well as other javascript events so that you can have the functionality you want.
source to share
If you just want the user to draw a curve, I think you will want to look into using splines. This will allow you to compute the 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 log base.
source to share
I've created a jQuery plugin that allows you to place elements along a curve. On the homepage, I've implemented what you are talking about to help generate curves.
It uses a combination of jQuery, jQuery UI and jCurvy for this . I'd recommend looking at the source on the homepage, but here's the code that handles most of them:
$('.draggable').draggable({
start: function () {
},
drag: function () {
$('.dot').remove();
var curId = $(this).attr('id');
var pos = $(this).position();
var param;
switch (curId) {
case 'x1y1':
x1 = pos.left;
y1 = pos.top;
break;
case 'x2y2':
x2 = pos.left;
y2 = pos.top;
break;
case 'start':
x0 = pos.left;
y0 = pos.top;
break;
case 'finish':
x3 = pos.left;
y3 = pos.top;
break;
}
param = {
"x0": x0,
"y0": y0,
"x1": x1,
"y1": y1,
"x2": x2,
"y2": y2,
"x3": x3,
"y3": y3
};
$('.curve').curve(param);
$('#sampleCode').text('$(".mySelector").curve(' + JSON.stringify(param) + ')');
$('#demoLink').attr('href', 'demo.html?p=' + JSON.stringify(param));
},
stop: function () {
}
});
source to share