<HTML>
<HEAD>
<TITLE>DirectX Media SDK DirectAnimation Tutorial</TITLE>
<LINK REL=STYLESHEET HREF="../../../../../webcd/da/tutorial.css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso8859-1">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">
</HEAD>
<BODY BGCOLOR="WHITE" LINK=#0033CC TOPMARGIN=0 LEFTMARGIN=20>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->

<DIV CLASS="flush">
<TABLE WIDTH=100% BORDER=0 BGCOLOR=#000000>
<TR ALIGN=RIGHT><TD VALIGN=TOP><FONT CLASS=desc1 SIZE=2>
<A HREF="Section2.html" TARGET="_top">
<IMG SRC="../../../../../media/image/u_prev.gif"
 WIDTH=71 HEIGHT=16 BORDER=0 ALT="Previous Topic">
</A><A HREF="../../../../../webcd/da/tutorial_main.htm" TARGET="_top">
<IMG SRC="../../../../../media/image/d_home.gif" WIDTH=48 HEIGHT=16 BORDER=0 ALT="Tutorial Home Page"></A>
<A HREF="Section4.html" TARGET="_top">
<IMG SRC="../../../../../media/image/u_next.gif" WIDTH=48 HEIGHT=16 BORDER=0 ALT="Next Topic">
</A></FONT></TD><TD WIDTH=30></TD></TR></TABLE></DIV>
<FONT CLASS=title><CENTER>Travelling Car along the Spline</CENTER></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> build a URL to import images</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">URL imgBase = getImportBase();<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Create an image behavior of a car by importing a bitmap.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr car1Img = importImage(buildURL(imgBase, "car3.gif"));</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Car2 is the mirror image of car1 along Y;
 use this later to keep the sprite upright.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr car2Img = car1Img.transform(scale(1,-1));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Get an image moving back and forth along the spline,
 the spline is well defined between the third knot from the begining
 (= 0) and the third knot from the end since it is a cubic.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">NumberBvr limitNum = knotsNum[numPts - 1]; </FONT><FONT CLASS=desc2> third knot from end</FONT><FONT CLASS=code><BR>
</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Evaluator spans the parameter space of the spline and then
 returns to the beginning. It then repeats.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">NumberBvr evaluatorNum = NumberBvr.newUninitBvr();<BR>
evaluatorNum.init(until(mod(localTime, limitNum),<BR>
</DIV><DIV STYLE="margin-left: 1.75in">timer(limitNum),<BR>
</DIV><DIV STYLE="margin-left: 1.875in">until(sub(limitNum, mod(localTime, limitNum)),<BR>
</DIV><DIV STYLE="margin-left: 2.0in">timer(limitNum),<BR>
</DIV><DIV STYLE="margin-left: 2.125in">evaluatorNum)));<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Construct a point2 behavior that goes back and forth along the spline.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">Point2Bvr splPt2 =<BR>
</DIV><DIV STYLE="margin-left: 0.625in">bSpline(DEGREE, knotsNum, ptsPt2, null, evaluatorNum);<BR>
</DIV><DIV STYLE="margin-left: 0.0625in"></FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Speed is the speed of traversal of the spline;
 it switches among three values upon rightButtonDown.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">NumberBvr speedNum = NumberBvr.newUninitBvr();<BR>
speedNum.init ( until(toBvr(0.6),<BR>
</DIV><DIV STYLE="margin-left: 1.5625in">rightButtonDown,<BR>
until(toBvr(1.2),<BR>
</DIV><DIV STYLE="margin-left: 1.9375in">rightButtonDown,<BR>
until(toBvr(1.8),<BR>
</DIV><DIV STYLE="margin-left: 2.3125in">rightButtonDown,<BR>
speedNum))));<BR>
</DIV><DIV STYLE="margin-left: 0.25in"></FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Construct a new point2 behavior that goes back and forth at
 the rate of "speed" along the original spline.
 Integrate the speed and invoke substituteTime.
 The runOnce construct is necessary so that the integration does not get
 restarted everytime the rightButtonDown event occurs.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">splPt2 = (Point2Bvr)splPt2.substituteTime(integral((NumberBvr)speedNum.runOnce()));<BR>
</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Orient the car based on the spline.</TD></TR></FONT></TABLE>
<FONT CLASS=code></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> The tangent to the spline is its derivative.
 Notice that the derivative of a point behavior is a vector behavior.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">Vector2Bvr tangentVec2 = derivative(splPt2);</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Extract the angle between the tangent and the X axis;
 it is in [-PI, +PI] range.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">NumberBvr angleNum = tangentVec2.getPolarCoordAngle();</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> The quadrant in which the tangent lies is in [0, 1, -2, -1] CCW</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">NumberBvr quadrentNum = floor(div(angleNum, toBvr(Math.PI/2)));</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> carImg is always upright as the traversal of the spline takes place</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr carImg = (ImageBvr)cond(or(eq(quadrentNum, toBvr(0)),<BR>
</DIV><DIV STYLE="margin-left: 2.375in">eq(quadrentNum, toBvr(-1))),<BR>
</DIV><DIV STYLE="margin-left: 1.625in">car1Img,<BR>
car2Img);<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> construct a car that travels along the spline always upright</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">ImageBvr movingCarImg = carImg.transform(compose(translate(sub(splPt2, origin2)),<BR>
</DIV><DIV STYLE="margin-left: 3.3125in">rotate(angleNum)));<BR>
</DIV><DIV STYLE="margin-left: 0.25in"></DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Finally, combine all these parts into the final model.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">setImage(overlay(movingCarImg,<BR>
</DIV><DIV STYLE="margin-left: 0.9375in">overlay(cubicCurveImg,<BR>
</DIV><DIV STYLE="margin-left: 1.0625in">overlay(ptsImg,<BR>
</DIV><DIV STYLE="margin-left: 1.1875in">overlay(controlPolyImg, solidColorImage(blue))))));<BR>
</DIV><DIV STYLE="margin-left: 0.125in">}<BR></DIV>
<BR>
private static int DEGREE = 3;  </FONT><FONT CLASS=desc2> only cubic pathes are supported</FONT><FONT CLASS=code><BR>
private int _numPolys;          </FONT><FONT CLASS=desc2> number of polynomials in the spline</FONT><FONT CLASS=code><BR>
<BR>
<BR>
</FONT><FONT CLASS=link><A ID=cpslug HREF="../../../../../help/da/dalegal.htm" TARGET="_top">&#169; 1997 Microsoft Corporation. All rights reserved. Terms of Use.</A></FONT>

<BR>
<BR>
<DIV CLASS="flush">
<TABLE WIDTH=100% BORDER=0 BGCOLOR=#000000>
<TR ALIGN=RIGHT><TD VALIGN=TOP><FONT CLASS=desc1 SIZE=2>
<A HREF="Section2.html" TARGET="_top">
<IMG SRC="../../../../../media/image/u_prev.gif"
 WIDTH=71 HEIGHT=16 BORDER=0 ALT="Previous Topic">
</A><A HREF="../../../../../webcd/da/tutorial_main.htm" TARGET="_top">
<IMG SRC="../../../../../media/image/d_home.gif" WIDTH=48 HEIGHT=16 BORDER=0 ALT="Tutorial Home Page"></A>
<A HREF="Section4.html" TARGET="_top">
<IMG SRC="../../../../../media/image/u_next.gif" WIDTH=48 HEIGHT=16 BORDER=0 ALT="Next Topic">
</A></FONT></TD><TR><TD WIDTH=30></TD></TR></TABLE></DIV>

</BODY>
</HTML>
