﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Keith Hair &#187; Interpolation</title>
	<atom:link href="http://keith-hair.net/blog/tag/interpolation/feed/" rel="self" type="application/rss+xml" />
	<link>http://keith-hair.net/blog</link>
	<description>Scripting is fun like any other hobby</description>
	<lastBuildDate>Mon, 17 May 2010 16:02:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Interpolation of a Point on Quadratic Curve</title>
		<link>http://keith-hair.net/blog/2008/05/30/interpolation-of-a-point-on-quadratic-curve/</link>
		<comments>http://keith-hair.net/blog/2008/05/30/interpolation-of-a-point-on-quadratic-curve/#comments</comments>
		<pubDate>Fri, 30 May 2008 17:49:07 +0000</pubDate>
		<dc:creator>Keith H</dc:creator>
				<category><![CDATA[ActionScript 3]]></category>
		<category><![CDATA[Curves]]></category>
		<category><![CDATA[Drawing API]]></category>
		<category><![CDATA[Interpolation]]></category>
		<category><![CDATA[Quadratic]]></category>

		<guid isPermaLink="false">http://keith-hair.com/blog/?p=4</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>You ever wanted an Object to move along the path of a curve?...a curve drawn with the ActionScript drawing API.</p>
<p>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.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="550" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="/blog/examples/curves/curve_test.swf" /><embed type="application/x-shockwave-flash" width="550" height="550" src="/blog/examples/curves/curve_test.swf"></embed></object></p>
<pre class="actionscript"><span style="color: #000000; font-weight: bold;">var</span> x:<span style="color: #0066CC;">Number</span>=<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">pow</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1</span>-<span style="color: #0066CC;">time</span>,<span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>*startvalueX<span style="color: #cc66cc;">+2</span>*<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1</span>-<span style="color: #0066CC;">time</span><span style="color: #66cc66;">&#41;</span>*<span style="color: #0066CC;">time</span>*controlX+<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">pow</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">time</span>,<span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>*endvalueX;
<span style="color: #000000; font-weight: bold;">var</span> y:<span style="color: #0066CC;">Number</span>=<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">pow</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1</span>-<span style="color: #0066CC;">time</span>,<span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>*startvalueY<span style="color: #cc66cc;">+2</span>*<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1</span>-<span style="color: #0066CC;">time</span><span style="color: #66cc66;">&#41;</span>*<span style="color: #0066CC;">time</span>*controlY+<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">pow</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">time</span>,<span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>*endvalueY;</pre>
<p><a href="/blog/examples/curves/curve_test.swf"><br />
</a></p>
<p><span id="more-4"></span></p>
<pre class="actionscript"><span style="color: #808080; font-style: italic;">/*-----------------------------------------------------------------
			===========================================
			Interpolation of a Point on Quadratic Curve
			===========================================
&nbsp;
-Add drag-n-drop ability to &quot;control_mc&quot;,&quot;start_mc&quot;, and &quot;end_mc&quot;.
-Use ENTER_FRAME event to run &quot;onFrame&quot; function.
&quot;placeOnCurve&quot; will called continuously to place &quot;plotter_mc&quot; on curve
depending on where &quot;control_mc&quot;, &quot;start_mc&quot; and &quot;end_mc&quot; are located.
&nbsp;
								Have Fun,
								Keith H
------------------------------------------------------------------*/</span>
addDragBehavior<span style="color: #66cc66;">&#40;</span>control_mc<span style="color: #66cc66;">&#41;</span>;
addDragBehavior<span style="color: #66cc66;">&#40;</span>start_mc<span style="color: #66cc66;">&#41;</span>;
addDragBehavior<span style="color: #66cc66;">&#40;</span>end_mc<span style="color: #66cc66;">&#41;</span>;
plotter_mc.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">ENTER_FRAME</span>,onFrame<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">//----------------------------------------------------------------------</span>
<span style="color: #808080; font-style: italic;">//Returns value between &quot;startvalue&quot; and &quot;endvalue&quot; at the given &quot;time&quot;.</span>
<span style="color: #808080; font-style: italic;">//&quot;time&quot; must be a value between 0-1.</span>
<span style="color: #808080; font-style: italic;">//&quot;control_mc&quot; creates quadratic easing effect depending how</span>
<span style="color: #808080; font-style: italic;">//close this value is to startvalue or endvalue.</span>
<span style="color: #808080; font-style: italic;">//----------------------------------------------------------------------</span>
<span style="color: #808080; font-style: italic;">/////////////////////////////////////////////////////////////////////////</span>
<span style="color: #000000; font-weight: bold;">function</span> curve<span style="color: #66cc66;">&#40;</span>startvalue,<span style="color: #0066CC;">control</span>,endvalue,<span style="color: #0066CC;">time</span>:<span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Number</span>
<span style="color: #66cc66;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">var</span> v:<span style="color: #0066CC;">Number</span>=<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">pow</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1</span>-<span style="color: #0066CC;">time</span>,<span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>*startvalue<span style="color: #cc66cc;">+2</span>*<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">1</span>-<span style="color: #0066CC;">time</span><span style="color: #66cc66;">&#41;</span>*<span style="color: #0066CC;">time</span>*<span style="color: #0066CC;">control</span>+<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">pow</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">time</span>,<span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>*endvalue;
    <span style="color: #b1b100;">return</span> v;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">//-------------------------------------------------------------------------------</span>
<span style="color: #808080; font-style: italic;">//Returns a Point in 2D along a Quadratic curve between Point &quot;a&quot; and Point &quot;b&quot;.</span>
<span style="color: #808080; font-style: italic;">//The curve function is used both &quot;x and y&quot; plot a point at &quot;time&quot;.</span>
<span style="color: #808080; font-style: italic;">//&quot;time&quot; is value between 0 and 1.</span>
<span style="color: #808080; font-style: italic;">//-------------------------------------------------------------------------------</span>
<span style="color: #808080; font-style: italic;">//////////////////////////////////////////////////////////////////////////////////</span>
<span style="color: #000000; font-weight: bold;">function</span> placeOnCurve<span style="color: #66cc66;">&#40;</span>a:Point,b:Point,con:Point,<span style="color: #0066CC;">time</span>:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>:Point
<span style="color: #66cc66;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">var</span> p:Point=<span style="color: #000000; font-weight: bold;">new</span> Point<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
    p.<span style="color: #006600;">x</span>=curve<span style="color: #66cc66;">&#40;</span>a.<span style="color: #006600;">x</span>,con.<span style="color: #006600;">x</span>,b.<span style="color: #006600;">x</span>,<span style="color: #0066CC;">time</span><span style="color: #66cc66;">&#41;</span>;
    p.<span style="color: #006600;">y</span>=curve<span style="color: #66cc66;">&#40;</span>a.<span style="color: #006600;">y</span>,con.<span style="color: #006600;">y</span>,b.<span style="color: #006600;">y</span>,<span style="color: #0066CC;">time</span><span style="color: #66cc66;">&#41;</span>;
    <span style="color: #b1b100;">return</span> p;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">//--------------------------------------------------------</span>
<span style="color: #808080; font-style: italic;">//Adds drag-n-drop behavior to a Sprite.</span>
<span style="color: #808080; font-style: italic;">//--------------------------------------------------------</span>
<span style="color: #808080; font-style: italic;">///////////////////////////////////////////////////////////</span>
<span style="color: #000000; font-weight: bold;">function</span> addDragBehavior<span style="color: #66cc66;">&#40;</span>display:Sprite<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">onPress</span>:<span style="color: #000000; font-weight: bold;">Function</span>=<span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>evt:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
	<span style="color: #66cc66;">&#123;</span>
	    display.<span style="color: #0066CC;">startDrag</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>;
	<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">onRelease</span>:<span style="color: #000000; font-weight: bold;">Function</span>=<span style="color: #000000; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span>evt:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
	<span style="color: #66cc66;">&#123;</span>
	    display.<span style="color: #0066CC;">stopDrag</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>;
	display.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>MouseEvent.<span style="color: #006600;">MOUSE_DOWN</span>,<span style="color: #0066CC;">onPress</span><span style="color: #66cc66;">&#41;</span>;
	display.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>MouseEvent.<span style="color: #006600;">MOUSE_UP</span>,<span style="color: #0066CC;">onRelease</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">//------------------------------------------------------------------------</span>
<span style="color: #808080; font-style: italic;">//Draw the curve and lines each time &quot;placeOnCurve&quot; function is called.</span>
<span style="color: #808080; font-style: italic;">//------------------------------------------------------------------------</span>
<span style="color: #808080; font-style: italic;">//////////////////////////////////////////////////////////////////////////</span>
<span style="color: #000000; font-weight: bold;">var</span> t:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0</span>;
<span style="color: #000000; font-weight: bold;">var</span> p:Point=<span style="color: #000000; font-weight: bold;">new</span> Point<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #000000; font-weight: bold;">function</span> onFrame<span style="color: #66cc66;">&#40;</span>evt:Event<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
	t+=<span style="color: #cc66cc;">0.02</span>;
	<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>t &amp;gt; <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
		t=<span style="color: #cc66cc;">0</span>;
	<span style="color: #66cc66;">&#125;</span>
	p=placeOnCurve<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> Point<span style="color: #66cc66;">&#40;</span>start_mc.<span style="color: #006600;">x</span>,start_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>,<span style="color: #000000; font-weight: bold;">new</span> Point<span style="color: #66cc66;">&#40;</span>end_mc.<span style="color: #006600;">x</span>,end_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>,<span style="color: #000000; font-weight: bold;">new</span> Point<span style="color: #66cc66;">&#40;</span>control_mc.<span style="color: #006600;">x</span>,control_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>,t<span style="color: #66cc66;">&#41;</span>;
	plotter_mc.<span style="color: #006600;">x</span>=p.<span style="color: #006600;">x</span>;
	plotter_mc.<span style="color: #006600;">y</span>=p.<span style="color: #006600;">y</span>;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">clear</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">lineStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>,0x999999<span style="color: #66cc66;">&#41;</span>;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">moveTo</span><span style="color: #66cc66;">&#40;</span>start_mc.<span style="color: #006600;">x</span>,start_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">lineTo</span><span style="color: #66cc66;">&#40;</span>end_mc.<span style="color: #006600;">x</span>,end_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">moveTo</span><span style="color: #66cc66;">&#40;</span>start_mc.<span style="color: #006600;">x</span>,start_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
	<span style="color: #808080; font-style: italic;">//-------------------------------------------------</span>
	<span style="color: #808080; font-style: italic;">//Draw current quadratic curve with ActionScript.</span>
	<span style="color: #808080; font-style: italic;">//-------------------------------------------------</span>
	<span style="color: #808080; font-style: italic;">////////////////////////////////////////////////////</span>
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">lineStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">2</span>,0x00FF00<span style="color: #66cc66;">&#41;</span>;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">curveTo</span><span style="color: #66cc66;">&#40;</span>control_mc.<span style="color: #006600;">x</span>,control_mc.<span style="color: #006600;">y</span>,end_mc.<span style="color: #006600;">x</span>,end_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
	<span style="color: #808080; font-style: italic;">//---------------------------------</span>
	<span style="color: #808080; font-style: italic;">//Draw tangents to control_mc points.</span>
	<span style="color: #808080; font-style: italic;">//---------------------------------</span>
	<span style="color: #808080; font-style: italic;">////////////////////////////////////</span>
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">lineStyle</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>,0x999999<span style="color: #66cc66;">&#41;</span>;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">moveTo</span><span style="color: #66cc66;">&#40;</span>start_mc.<span style="color: #006600;">x</span>,start_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">lineTo</span><span style="color: #66cc66;">&#40;</span>control_mc.<span style="color: #006600;">x</span>,control_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">moveTo</span><span style="color: #66cc66;">&#40;</span>end_mc.<span style="color: #006600;">x</span>,end_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>;
	Sprite<span style="color: #66cc66;">&#40;</span>plotter_mc.<span style="color: #006600;">parent</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">graphics</span>.<span style="color: #0066CC;">lineTo</span><span style="color: #66cc66;">&#40;</span>control_mc.<span style="color: #006600;">x</span>,control_mc.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #66cc66;">&#125;</span></pre>
<a href='http://www.hexosearch.com/se/submit.aspx?zlvz=&zqz=&zurlz=http://keith-hair.net/blog/2008/05/30/interpolation-of-a-point-on-quadratic-curve/&ztz=Interpolation of a Point on Quadratic Curve'><img src='http://keith-hair.net/blog/wp-content/plugins/hexosearch-button/logo16x16.png' width='16' height='16' border='0' style='vertical-align:middle' alt='Vote in HexoSearch' title='Vote in HexoSearch' /></a>]]></content:encoded>
			<wfw:commentRss>http://keith-hair.net/blog/2008/05/30/interpolation-of-a-point-on-quadratic-curve/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
