Andy Woodruff  · Cartographer | Blog

Hi…
Nice work…considering your ‘limited understanding of the math involved’ … Q: Am I blind? Is that i don’t see where you finally use the z factor (third argument of the curveThroughPoints method)… Thanks

alvaro obyrne
20 June 2008 @ 2:37pm

Yikes, thanks for noticing that! Looks like I hard coded a number in when I was messing around with it and forgot to change it back.

Line 146 of CubicBezier.as, which says:
var controlDist = Math.min(a,b)*.5
Should be:
var controlDist = Math.min(a,b)*z

I’ve loaded the corrected file to the links given in the post.

Andy Woodruff
20 June 2008 @ 2:55pm

thanks

alvaro obyrne
20 June 2008 @ 3:07pm

Sorry if you don’t consider this is not the place to post this but have you seen the java demo at http://www.sunsite.ubc.ca/LivingMathematics/V001N01/UBCExamples/Bezier/bezier.html the athor of that applet doesn’t use 100 points in each segment of the curve. He uses a variable number of steps according to the curvature (the straighter the less number of points he uses). If I may say: that should be your next step (I should even farther say : this should be our next step).

alvaro obyrne
20 June 2008 @ 3:19pm

Thanks for the link; I hadn’t seen that. Yeah, it’d be good to draw the curves like that. I don’t know that I’ll get around to thinking about that very soon, but if you feel like trying it out I’d definitely love to see what you come up with!

Andy Woodruff
20 June 2008 @ 6:55pm

On line 150
var theta = Math.atan(ry / rx);

if ry and rx is 0, theata gets NaN, because it cant be 0/0

if (isNaN(theta)){
theta = 0;
}

Is it right? =)

//Dennis Öhman =)

Dennis Öhman
4 August 2008 @ 4:53am

Sorry, it’s not right solution =D

Dennis Öhman
4 August 2008 @ 9:41am

Hi there! Your class is awesome! I did however notice that it messes up if the line between two points is exactly straight. I made a fix by adding a Boolean variable called isStraight that tracks whether it is a straight line or not, and then at the end drawing a straight line instead of curves in that instance.

Add the below line of code right after the a,b,c distance calculations:
isStraight = ((a+b)(c-1)) ? true : false;

and add similar to:
if (!isStraight) {
g.curveTo(controlPts[1][0].x,controlPts[1][0].y,p[1].x,p[1].y);
} else {
g.lineTo(p[1].x,p[1].y);
}

in the three sections at the bottom. Feel free to email me for the code itself if this is not clear. Thanks again for the great work!

John Currie
5 September 2008 @ 5:31pm

oops, the first line of code there should be:
isStraight = ((a+b)<(c+1)&&(a+b)6>(c-1)) ? true : false;

John Currie
5 September 2008 @ 5:32pm

minus the ‘6’ there sorry!

John Currie
5 September 2008 @ 5:32pm

Thanks! I sort of recall noticing that problem a while ago but either never got around to trying to fix it or never got around to uploading a new version. (Same goes for comment number 8.) When I get a chance I’ll be sure to update the posted file with that fix.

Andy Woodruff
6 September 2008 @ 9:13pm

I added a moveto:Boolean parameter with default of false, and then added a conditional to the moveTo in the curveThroughPoints method. This allows you to join up several curveThroughPoints into a single fillable object that has cusps as well as vertices if I am using the terminology correctly.

slaingod
12 September 2008 @ 12:24pm

Try send these values to the class

(x=0, y=0)
(x=70, y=1)
(x=141, y=3)
(x=211, y=4)
(x=282, y=6)
(x=352, y=2)
(x=423, y=2)
(x=493, y=2)
(x=564, y=18)
(x=634, y=60)

If there is 3 equal values, like Y=2 Y=2 Y=2.
The last one of the equal numbers becomes x=0 y=0 (Or something?).

I don’t know how?

Dennis Öhman
12 November 2008 @ 3:55am

For example:
If you line upp the dots in you example, this happens

http://devarea.webbhotell.tv/fb/temp/crap.png

Dennis Öhman
12 November 2008 @ 4:01am

It’s med again hehe
Why do you do this?:

// Loop through duplicates array and remove points from the points array
for (i=duplicates.length-1; i>=0; i–){
p.splice(duplicates[i],1);
}

Dennis Öhman
12 November 2008 @ 4:09am

Sorry, I should read in the class before I post a question =D

17. I know what i t does.

Dennis Öhman
12 November 2008 @ 4:18am

Hm. I can’t seem to figure out how to get around the straight-line problem. John’s fix isn’t working for me. Where exactly are you definining the isStraight bool? It would be great to get this into the class itself. Otherwise excellent work! Very useful code!

George Berstrand
14 November 2008 @ 3:40am

Use atan2() instead. I’ve tried it and it works 🙂
And for the acos() in the source code, I transformed the cosine expression in to a tangent expression and then used atan2(), correctness also verified.

CJ Cat
15 November 2008 @ 9:35am

This is an awesome class!

However, has anyone implemented an AS2 version? Would be greatly appreciated…

Cheers
Matt Stuehler

Matt
15 November 2008 @ 1:38pm

Andy,

Have you had any time to look at the straight line problem? I’ve tried the other suggestions in the comments here with no success. CJ – the atan2 method seems to produce an s-curve instead of a straight line. Aside from that little glitch this is exactly what I was looking for.

Thanks!
Sam

Sam
7 December 2008 @ 5:36pm

Sam: Unfortunately I haven’t had a chance to look at much of anything on this class lately. Apologies to those encountering problems (but I’m glad for the interest)! It’ll be a week or so until I have time, but I’ll do my best to study it then and see if I can think of anything.

Andy

Andy Woodruff
8 December 2008 @ 10:05am

TypeError: Error #1010: at curveTest_fla::MainTimeline/moveDot()

SmivaL
20 June 2009 @ 12:47pm

Really nice!
Question though; what if I did wanted to use quadratic bezier curves instead, so that the first curve would be variable and the other curves would be created from that first curve (as each curve is build from the values from the previous curve). Have you found any classes / methods for that? Your solutions is perfect, don’t get me wrong, but what if I wanted to have one variable that changes the complete curve instead of multiply points.

Frederik
6 July 2009 @ 10:23am

Awesome, thanks for posting this work

Fire Crow
26 July 2009 @ 7:22pm

A rad piece of work. I just tested it in Air for iOS as an iPad app, connecting through several multi-touch points and the performance was fine. I modified the line to cacheAsBitmap. Thanks dude very clever bit of coding.

Stesmi99
12 October 2011 @ 8:32pm

Hello,

can we add anchor points in this curve , like the tool that used in jib jab website ??? any1 help

faisal
5 January 2012 @ 1:57am

Thanks a lot. It makes curve to be drawn very easy. It saved my time.

Manish
29 March 2012 @ 12:56pm

where do I get the fl.motion.* classes?
Can I use them only with FlashDevelop and Flex 4.6 SDK?
Thanks.

Davide

Davide
30 March 2012 @ 7:03am

Hey Davide,

You can download .swc package library file from below URL:
http://apdevblog.com/update-using-flvideo-package-w-eclipse-and-fdt3/

Manish
20 April 2012 @ 9:21am

Excellent! Saves me a headache trying to reinvent the wheel.

David
24 April 2012 @ 6:44am

Great work man!
saved me a lot of work!
thank you!

dudi rubin
20 September 2012 @ 10:05am

z = prev_z;//for addressing the curveture at the starting of for loopwith points array after this for (i = firstPt; i < lastPt; i++) {

and inside for loop
if (isNaN(theta)){
theta = -1;
z = .05;//for drawing straightline
}
if (p[i].y == p[i+1].y) {
theta = -1;
z = .05;//for drawing straightline
}
if (p[i-1].y == p[i].y) {
theta = -1;
z = .05;//for drawing straightline
}

chandresh
27 September 2012 @ 8:19am

prev_z is the value of z which you are using on calling the function

chandresh
27 September 2012 @ 8:21am

this is for straight line etc and solve all probs thanks man i love this class

chandresh
27 September 2012 @ 8:22am

Your points on the demo curve wont change the curve…

function moveDot(e:MouseEvent){
//Fixed bug – green points on the demo curves wasn’t working
if(selectedDot == dotA)
{
p1.x = selectedDot.x = curveDemo.mouseX;
p1.y = selectedDot.y = curveDemo.mouseY;
drawCurveDemo();
return;
}
if(selectedDot == dotB)
{
p4.x = selectedDot.x = curveDemo.mouseX;
p4.y = selectedDot.y = curveDemo.mouseY;
drawCurveDemo();
return;
}
//End fix
var index = d.indexOf(selectedDot);
p[index].x = selectedDot.x = curves.mouseX;
p[index].y = selectedDot.y = curves.mouseY;
drawCurves();
}

Vlad
28 September 2012 @ 11:44pm