<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="Section1.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="Section3.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>Construct an Interactive Spline</CENTER></FONT>
<BR>

<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1><BR>
 Construct a cubic BSpline with initial control points that are
 colinear and equally spaced. The points are draggable for manipulating
 the shape of the spline.
 The spline is a uniform BSpline with standard end conditions,
 where end points are interpolated.
 The only parameter that is needed is the
 number of polynomial pieces that are desired in the spline.</TD></TR></FONT></TABLE>
<FONT CLASS=code></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> number of control points is related to the number of polynomials</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">int numPts = _numPolys + 3;      </FONT><FONT CLASS=desc2> number of control points &gt= 4</FONT><FONT CLASS=code><BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> vertically center initial control points</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">double initY = 0;<BR>
NumberBvr initX = mul(neg(_halfWidth),toBvr(0.7));    </FONT><FONT CLASS=desc2> 15% from left side</FONT><FONT CLASS=code><BR>
NumberBvr incX = div(mul(_halfWidth,toBvr(1.4)),toBvr((numPts - 1))); </FONT><FONT CLASS=desc2> use 70% of range</FONT><FONT CLASS=code><BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> for the control points of the spline</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">Point2Bvr[] ptsPt2 = new Point2Bvr[numPts];</FONT>
<BR>
</DIV><TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> 2 more knots than control points since a cubic</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">NumberBvr[] knotsNum = new NumberBvr[numPts + 2];<BR>
Point2Bvr initPt2;      </FONT><FONT CLASS=desc2> initial position of a draggable</FONT><FONT CLASS=code><BR>
DraggableButton draggable;    </FONT><FONT CLASS=desc2> holder of a draggable point</FONT><FONT CLASS=code><BR>
ImageBvr ptsImg = emptyImage;  </FONT><FONT CLASS=desc2> the accumulated image</FONT><FONT CLASS=code><BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> construct the control points and the knot vector</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">for (int i = 0; i &lt numPts; i++) {<BR>
</DIV><DIV STYLE="margin-left: 0.375in">initPt2 = point2(add(initX,mul(toBvr(i),incX)), toBvr(initY));<BR>
draggable = new DraggableButton(initPt2);<BR>
ptsPt2[i] = draggable.getPointBvr();<BR>
ptsImg = overlay(ptsImg, draggable.getImageBvr());<BR>
knotsNum[i] = toBvr(i-2);      </FONT><FONT CLASS=desc2> we want the first 3 knots to be 0, see next</FONT><FONT CLASS=code><BR>
</DIV><DIV STYLE="margin-left: 0.25in">}<BR>
</DIV></FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> Set first and last two knots to achieve multiplicity 3,
 this makes the spline pass through the first and last control points.</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">knotsNum[0] =  knotsNum[1] = toBvr(0);<BR>
knotsNum[numPts] =  knotsNum[numPts + 1] = knotsNum[numPts - 1];<BR>
</DIV><BR>
</FONT>
<BR>
<TABLE><TR><TD WIDTH=500><FONT CLASS=desc1> generate images of the spline and its control polygon</TD></TR></FONT></TABLE>
<FONT CLASS=code><DIV STYLE="margin-left: 0.25in">Path2Bvr cubicCurvePath = cubicBSplinePath(ptsPt2, knotsNum);<BR>
Path2Bvr controlPolyPath = polyline(ptsPt2);<BR>
LineStyleBvr lLnS = defaultLineStyle.width(toBvr(0.5*mm));<BR>
ImageBvr cubicCurveImg = cubicCurvePath.draw(lLnS.color(green));<BR>
ImageBvr controlPolyImg = controlPolyPath.draw(lLnS.color(white));<BR>
</DIV><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="Section1.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="Section3.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>
