You ever wanted an Object to move along the path of a curve?...a curve drawn with the ActionScript drawing API.

The curves drawn using the API are quadratic. Using the following expressions, you can plot an "x" or "y" value on a curve at a time between 0 - 1. You could even plot a "z" value for 3D if you wanted.

var x:Number=Math.pow(1-time,2)*startvalueX+2*(1-time)*time*controlX+Math.pow(time,2)*endvalueX;
var y:Number=Math.pow(1-time,2)*startvalueY+2*(1-time)*time*controlY+Math.pow(time,2)*endvalueY;


/*-----------------------------------------------------------------
			===========================================
			Interpolation of a Point on Quadratic Curve
			===========================================
 
-Add drag-n-drop ability to "control_mc","start_mc", and "end_mc".
-Use ENTER_FRAME event to run "onFrame" function.
"placeOnCurve" will called continuously to place "plotter_mc" on curve
depending on where "control_mc", "start_mc" and "end_mc" are located.
 
								Have Fun,
								Keith H
------------------------------------------------------------------*/
addDragBehavior(control_mc);
addDragBehavior(start_mc);
addDragBehavior(end_mc);
plotter_mc.addEventListener(Event.ENTER_FRAME,onFrame);
 
//----------------------------------------------------------------------
//Returns value between "startvalue" and "endvalue" at the given "time".
//"time" must be a value between 0-1.
//"control_mc" creates quadratic easing effect depending how
//close this value is to startvalue or endvalue.
//----------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////
function curve(startvalue,control,endvalue,time:Number):Number
{
    var v:Number=Math.pow(1-time,2)*startvalue+2*(1-time)*time*control+Math.pow(time,2)*endvalue;
    return v;
}
 
//-------------------------------------------------------------------------------
//Returns a Point in 2D along a Quadratic curve between Point "a" and Point "b".
//The curve function is used both "x and y" plot a point at "time".
//"time" is value between 0 and 1.
//-------------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////////
function placeOnCurve(a:Point,b:Point,con:Point,time:Number=0):Point
{
    var p:Point=new Point();
    p.x=curve(a.x,con.x,b.x,time);
    p.y=curve(a.y,con.y,b.y,time);
    return p;
}
 
//--------------------------------------------------------
//Adds drag-n-drop behavior to a Sprite.
//--------------------------------------------------------
///////////////////////////////////////////////////////////
function addDragBehavior(display:Sprite):void {
	var onPress:Function=function(evt:Event):void
	{
	    display.startDrag();
	};
	var onRelease:Function=function(evt:Event):void
	{
	    display.stopDrag();
	};
	display.addEventListener(MouseEvent.MOUSE_DOWN,onPress);
	display.addEventListener(MouseEvent.MOUSE_UP,onRelease);
}
 
//------------------------------------------------------------------------
//Draw the curve and lines each time "placeOnCurve" function is called.
//------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////
var t:Number=0;
var p:Point=new Point();
function onFrame(evt:Event):void {
	t+=0.02;
	if (t > 1) {
		t=0;
	}
	p=placeOnCurve(new Point(start_mc.x,start_mc.y),new Point(end_mc.x,end_mc.y),new Point(control_mc.x,control_mc.y),t);
	plotter_mc.x=p.x;
	plotter_mc.y=p.y;
	Sprite(plotter_mc.parent).graphics.clear();
	Sprite(plotter_mc.parent).graphics.lineStyle(0,0x999999);
	Sprite(plotter_mc.parent).graphics.moveTo(start_mc.x,start_mc.y);
	Sprite(plotter_mc.parent).graphics.lineTo(end_mc.x,end_mc.y);
	Sprite(plotter_mc.parent).graphics.moveTo(start_mc.x,start_mc.y);
 
	//-------------------------------------------------
	//Draw current quadratic curve with ActionScript.
	//-------------------------------------------------
	////////////////////////////////////////////////////
	Sprite(plotter_mc.parent).graphics.lineStyle(2,0x00FF00);
	Sprite(plotter_mc.parent).graphics.curveTo(control_mc.x,control_mc.y,end_mc.x,end_mc.y);
 
	//---------------------------------
	//Draw tangents to control_mc points.
	//---------------------------------
	////////////////////////////////////
	Sprite(plotter_mc.parent).graphics.lineStyle(0,0x999999);
	Sprite(plotter_mc.parent).graphics.moveTo(start_mc.x,start_mc.y);
	Sprite(plotter_mc.parent).graphics.lineTo(control_mc.x,control_mc.y);
 
	Sprite(plotter_mc.parent).graphics.moveTo(end_mc.x,end_mc.y);
	Sprite(plotter_mc.parent).graphics.lineTo(control_mc.x,control_mc.y);
 
}
Vote in HexoSearch
5 Responses to “Interpolation of a Point on Quadratic Curve”
  1. I have an application in which I plot a graph(arbitarary graph, not fixed).While plotting the graph, I have an object on the graph which will show the direction of plotting. But while rotating at some point I am facing problem. can anyone help me out?

  2. Hi dare2win,
    Have you tried “Math.atan2″ method to detect angle between the points?
    This returns in radians but you can multiply by “180 / Math.PI” for degree rotation.

    function angleOfPoints(a:Point, b:Point):Number
    {
    var dx:Number = a.x-b.x;
    var dy:Number = a.y-b.y;
    var rad:Number = Math.atan2(dy, dx);
    return rad;
    }

  3. kanu kukreja says:

    1084: Syntax error: expecting rightparen before semicolon.
    1084: Syntax error: expecting semicolon before rightparen.
    1084: Syntax error: expecting rightbrace before end of program.

    getting these many errors.
    Can you please share a sample file.
    Thanks,
    kanu

  4. Kanu,

    Watch out for the “&gt;” and “&lt;” characters. They are suppose to be “>” and “<“.
    The codehighlighter accidentally converts them to html entities.

  5. Hey, thanks for this, it’s exactly what I was looking for. I know this is super old, but one note of caution: casting to Sprite on every graphics line is very very slow “Sprite(plotter_mc.parent).graphics”. It’s much better to assign the graphics object to a var, ie:

    var g:Graphics = Sprite(plotter_mc.parent).graphics;

    and then the rest of your lines would just be:

    g.moveTo(0,0);
    g.lineTo(10,10);

    etc.

Leave a Comment

Thanks for visiting www.keith-hair.net