I'm sorry that this is a bit specialised but I recently wrote some software that uses Bezier curves.
It works brilliantly in that the control points alter the curve perfectly.
The other side (Where items are placed along the Bezier) also works fine but I want to make it more efficient.
The 4 control points are controlled by the following formulas
var B1 = function(t) { return (t*t*t); };
var B2 = function(t) { return (3*t*t*(1-t)); } ;
var B3 = function(t) { return (3*t*(1-t)*(1-t)); };
var B4 = function(t) { return ((1-t)*(1-t)*(1-t)); }
The total function call looks like this:
this.getBezier=function(percent) {
var B1 = function(t) { return (t*t*t); };
var B2 = function(t) { return (3*t*t*(1-t)); } ;
var B3 = function(t) { return (3*t*(1-t)*(1-t)); };
var B4 = function(t) { return ((1-t)*(1-t)*(1-t)); }
var pos = this.bezierPoint();
pos.x = this.guideBezier[0].attr("cx") * B1(percent) + this.guideBezier[1].attr("cx") * B2(percent) + this.guideBezier[2].attr("cx") * B3(percent) + this.guideBezier[3].attr("cx") * B4(percent);
pos.y = this.guideBezier[0].attr("cy") * B1(percent) + this.guideBezier[1].attr("cy") * B2(percent) + this.guideBezier[2].attr("cy") * B3(percent) + this.guideBezier[3].attr("cy") * B4(percent);
return pos;
}
As you can see the return "pos" object contains the 2 coordinates for the next point on the curve.
Note that the single input for the function "getBezier" is the percentage variable which is a linearly incremented value.
The problem is that the function delivers non-linearly positions along the Bezier curve.
I'm looking for a function that you have an input of the percentage position along the bezier curve (eg 1%.2%3%etc) and it returns the coordinates of that position.
It's kind of backwards compared to the function included.
I'm not trying to be clever I just want to see if anyone out there can work it out.
I will give you a link to the application which is online when you give me the answer and I have incorporated it.
It works brilliantly in that the control points alter the curve perfectly.
The other side (Where items are placed along the Bezier) also works fine but I want to make it more efficient.
The 4 control points are controlled by the following formulas
var B1 = function(t) { return (t*t*t); };
var B2 = function(t) { return (3*t*t*(1-t)); } ;
var B3 = function(t) { return (3*t*(1-t)*(1-t)); };
var B4 = function(t) { return ((1-t)*(1-t)*(1-t)); }
The total function call looks like this:
this.getBezier=function(percent) {
var B1 = function(t) { return (t*t*t); };
var B2 = function(t) { return (3*t*t*(1-t)); } ;
var B3 = function(t) { return (3*t*(1-t)*(1-t)); };
var B4 = function(t) { return ((1-t)*(1-t)*(1-t)); }
var pos = this.bezierPoint();
pos.x = this.guideBezier[0].attr("cx") * B1(percent) + this.guideBezier[1].attr("cx") * B2(percent) + this.guideBezier[2].attr("cx") * B3(percent) + this.guideBezier[3].attr("cx") * B4(percent);
pos.y = this.guideBezier[0].attr("cy") * B1(percent) + this.guideBezier[1].attr("cy") * B2(percent) + this.guideBezier[2].attr("cy") * B3(percent) + this.guideBezier[3].attr("cy") * B4(percent);
return pos;
}
As you can see the return "pos" object contains the 2 coordinates for the next point on the curve.
Note that the single input for the function "getBezier" is the percentage variable which is a linearly incremented value.
The problem is that the function delivers non-linearly positions along the Bezier curve.
I'm looking for a function that you have an input of the percentage position along the bezier curve (eg 1%.2%3%etc) and it returns the coordinates of that position.
It's kind of backwards compared to the function included.
I'm not trying to be clever I just want to see if anyone out there can work it out.
I will give you a link to the application which is online when you give me the answer and I have incorporated it.
