You are invited to Log in or Register a free Frihost Account!

# Bezier curves-Maths expert required

chasbeen
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.
Indi
i don't know if i count as a math expert, but here goes.

i am guessing that you have a path set up using Bézier curves, and you want to either:
1. Animate something along that path at constant speed.
2. Put something along that path at regular intervals.
Correct?

Unfortunately, i don't think there is a trivial formula to calculate the length of a Bézier path segment in whole or in part. i think you'll have to use an iterative method. i think the easiest thing to do is a linear approximation. Iterate from t=0 to 1 using whatever step size you want (smaller will give you more accuracy, at cost of time and memory), and for each point, measure the linear distance between that point and the previous point, accumulate it, and put it in a lookup table next to the t value. In other words, generate a table like this:

 Code: Distance    t --------------   0.000     0   0.004    0.1   0.006    0.2   0.009    0.3 ...   0.032     1

Then when you get a percentage value, like 22%, use the total length (0.032 in this case) to find the desired length (22% of 0.032 is 0.00704). Then look up the desired length in the table (t is between 0.2 and 0.3 in this case), and use the slope to approximate t (in this case, slope = (0.3 - 0.2) / (0.009 - 0.006) = 33.333, so t = (33.333 * (0.00704 - 0.006)) + 0.2 = 0.235... then just plug t = 0.235 into your Bézier equation to find the coordinates).
chasbeen
Indi

 Quote: Unfortunately, i don't think there is a trivial formula to calculate the length of a Bézier path segment in whole or in part. i think you'll have to use an iterative method. i think the easiest thing to do is a linear approximation. Iterate from t=0 to 1 using whatever step size you want (smaller will give you more accuracy, at cost of time and memory),

You pretty much grasp the situation here and (unless anyone else has any better ideas) you have suggested an iterative method which is pretty much what I have implemented.

To get sufficient accuracy I used increments of 0.001 (1000 X to check the returned coordinates)
What really intensifies CPU usage is the actual drawing which is done only once, but that figure 1000 X is only a maximum potential number just to get one point. Typically it will need to check several before it "finds" the right one. 0.0025 (400 X) was not accurate enough.

I'm thinking it's a nice to have rather than essential but it maybe a holy grail..

http://www.irunmywebsite.com/raphael/animo_fonts.html
infinisa
Hi chasbeen

As a mathematician and computer programmer, I am intrigued by what you're trying to do. I guess you're creating web animations using javascript, right?

This is something I'd like to be able to do, so would be grateful if you could give some pointers - e.g. tutorials and sample code, bearing in mind that unfortunately I don't know javascript (though I know a bunch of other programming languages about a mile long..).

Apologise not to be able to help on this one, but would be grateful for advice from you

P.S.: I followed your link, http://www.irunmywebsite.com/raphael/animo_fonts.html, then to the Main Raphael site, and tried and some of the demos, which are rather fun (though not in the same league as a maths animation). However, I get lost programming-wise as I don't know javascript.
chasbeen
infinisa
Sure, let's take it off line though.
The website is there for everyone to use. You need a bit of javascript before you start.
chasbeen
infinisa
I replied but it's sitting in my frihost outbox at the moment.

If anyone else is interested in implementing this technology, please feel free to contact me.
Theres no catch, just a mutual learning experience.

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP