SVG HTML

Bezier Curve Interpolation

This SVG example demonstrates how Bezier curves of various degrees are interpolated via recursive interpolation. A Bezier curve is a smooth polynomial curve that is defined by a set of control points and recursive linear interpolations of the the points. In m-dimensional space with n+1 controls points, P0,…,Pn, the explicit formula for the Bezier polynomial is defined as B(t)= ∑ i = 0 n ( n i ) (1-t)n-i tiPi

BezierInterpolation.html

<!DOCTYPE html>
<html>
  <head>
    <title>Organization - Personal Tasks</title>
    <link rel="stylesheet" type="text/css" href="../../menu.css" />
  </head>
  <body>
  	<ul>
      <li>Recursively, Bezier curves can be defined by repeated linear interpolations for n points
      		(<math><msub><mi>P</mi><mn>0</mn></msub><mo>,</mo><mi>&hellip;</mi><mo>,</mo><msub><mi>P</mi><mi>n</mi></msub></math>) as follows:</li>
      	<span>Initially,</span><br />
      	&nbsp;&nbsp;&nbsp;
      	<math>
      		<msub><mi style="font-weight: bold;">B</mi>
      			<mrow><msub><mi>P</mi><mn>0</mn></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext>
      		<mo>=</mo><msub><mi>P</mi><mn>0</mn></msub><mo>,</mo></math><br />&nbsp;&nbsp;&nbsp;&nbsp;<math>
      			<msub><mi style="font-weight: bold;">B</mi><mrow><msub><mi>P</mi><mn>1</mn></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext>
      			<mo>=</mo><msub><mi>P</mi><mn>1</mn></msub><mo>,</mo></math><br />&nbsp;&nbsp;&nbsp;&nbsp;
      		<span>&hellip;</span><br />&nbsp;&nbsp;&nbsp;&nbsp;<math>
						<msub><mi style="font-weight: bold;">B</mi><mrow><msub><mi>P</mi><mi>n</mi></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext>
      			<mo>=</mo><msub><mi>P</mi><mi>n</mi></msub>
      	</math><br /><span>Subsequently, for adjacent indicies,</span><br />&nbsp;&nbsp;&nbsp;&nbsp;<math>
      		<msub><mi style="font-weight: bold;">B</mi>
      			<mrow><msub><mi>P</mi><mn>0</mn></msub><msub><mi>P</mi><mn>1</mn></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext>
      			<mo>=</mo>
      			<mtext>(</mtext><mn>1</mn><mo>-</mo><mi>t</mi><mtext>)</mtext> 
      				<msub><mi style="font-weight: bold;">B</mi><mrow><msub><mi>P</mi><mn>0</mn></msub></mrow></msub><mtext>(</mtext><mi>t</mi><mtext>)</mtext>
      			<mo>+</mo>
      				<mi>t</mi><msub><mi style="font-weight: bold;">B</mi>
      			<mrow><msub><mi>P</mi><mn>1</mn></msub></mrow></msub><mtext>(</mtext><mi>t</mi><mtext>)</mtext></mrow></math><br />
      		&nbsp;&nbsp;&nbsp;&nbsp;<span>&hellip;</span>
      	<br /><span>Generally, for any <i>i</i> < <i>j</i></span><br />&nbsp;&nbsp;&nbsp;&nbsp;<math>
      		<mrow><msub><mi style="font-weight: bold;">B</mi>
      			<mrow><msub><mi>P</mi><mi>i</mi></msub><msub><mi>P</mi><mi>i</mi><mo>+</mo><mn>1</mn></msub><mi>&hellip;</mi><msub><mi>P</mi><mi>j</mi></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext>
      			<mo>=</mo>
      			<mtext>(</mtext><mn>1</mn><mo>-</mo><mi>t</mi><mtext>)</mtext><msub><mi style="font-weight: bold;">B</mi>
      			<mrow><msub><mi>P</mi><mi>i</mi></msub><mi>&hellip;</mi><msub><mi>P</mi><mi>j</mi><mo>-</mo><mn>1</mn></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext>
      			<mo>+</mo>
      			<mi>t</mi><msub><mi style="font-weight: bold;">B</mi>
      			<mrow><msub><mi>P</mi><mi>i</mi><mo>+</mo><mn>1</mn></msub><mi>&hellip;</mi><msub><mi>P</mi><mi>j</mi></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext></mrow>
      	</math><br /><span>Finally,</span><br />&nbsp;&nbsp;&nbsp;&nbsp;<math>
      		<mrow><msub><mi style="font-weight: bold;">B</mi>
      			<mrow><msub><mi>P</mi><mn>0</mn></msub><mi>&hellip;</mi><msub><mi>P</mi><mi>n</mi></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext>
      			<mo>=</mo>
      			<mtext>(</mtext><mn>1</mn><mo>-</mo><mi>t</mi><mtext>)</mtext><msub><mi style="font-weight: bold;">B</mi>
      			<mrow><msub><mi>P</mi><mn>0</mn></msub><mi>&hellip;</mi><msub><mi>P</mi><mi>n</mi><mo>-</mo><mn>1</mn></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext>
      			<mo>+</mo>
      			<mi>t</mi><msub><mi style="font-weight: bold;">B</mi>
      			<mrow><msub><mi>P</mi><mn>1</mn></msub><mi>&hellip;</mi><msub><mi>P</mi><mi>n</mi></msub></mrow></msub>
      			<mtext>(</mtext><mi>t</mi><mtext>)</mtext></mrow>
      	</math>
      <li>Interpolated SVG Curves<ul>
      		<li>4 Points <span style="background-color:#444444;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      		<li>3 Linear Curves <span style="background-color:lightgray;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      		<li>2 Quadratic Bezier Curves <span style="background-color:gray;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      		<li>1 Cubic Bezier Curve <span style="background-color:black;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      		<li>Interpolation points at <math><mi>t</mi><mo>=</mo><mn>.5</mn></math><ul>
      			<li>Linear Interpolants <span style="background-color:DarkKhaki;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      			<li>Quadratic Interpolants <span style="background-color:Khaki;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      			<li>Cubic Interpolant <span style="background-color:gold;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
      		</ul></li>
      	</ul></li>
      	<div style="margin:10px;padding:20px;background-color:#F4F4F4;border:1px solid gray;float:left;">
      	<svg width="420px" height="320px" xmlns="http://www.w3.org/2000/svg">
      		<g transform="translate(10,10)">
      			<path d="M0,300 C50,0 400,100 200,300" fill="none" stroke="black" stroke-width="1"/>
      			<path d="M0,300 Q50,0 400,100" fill="none" stroke="gray" stroke-width="1"/>
      			<path d="M50,0 Q400,100 200,300" fill="none" stroke="gray" stroke-width="1"/>
      			<path d="M0,300 L50,0 L400,100 L200,300" fill="none" stroke="lightgray" stroke-width="1"/>
      				
      			<path d="M25,150 L225,50 L300,200" fill="none" stroke="DarkKhaki" stroke-width="1"/>
      			<path d="M125,100 L262.5,125" fill="none" stroke="Khaki" stroke-width="1"/>
						<g fill="DarkKhaki" >
      				<circle cx="25" cy="150" r="4"/>
      				<circle cx="225" cy="50" r="4"/>
      				<circle cx="300" cy="200" r="4"/>
      			</g>
						<g fill="Khaki" >
      				<circle cx="125" cy="100" r="4"/>
      				<circle cx="262.5" cy="125" r="4"/>
      			</g>
      			<g fill="gold" >
      				<circle cx="193.75" cy="112.5" r="4"/>
      			</g>
      			<!-- Control Points -->
      			<g fill="#444444" >
      				<circle cx="0" cy="300" r="4"/>
      				<circle cx="50" cy="0" r="4"/>
      				<circle cx="400" cy="100" r="4"/>
      				<circle cx="200" cy="300" r="4"/>
      			</g>
      			<text x="10" y="300" font-size="20" fill="black">P&#x2080;</text>
      			<text x="25" y="10" font-size="20" fill="black">P&#x2081;</text>
      			<text x="390" y="90" font-size="20" fill="black">P&#x2082;</text>
      			<text x="180" y="290" font-size="20" fill="black">P&#x2083;</text>
      		</g>
      	</svg></div><br style="clear:both;" />
    </ul>
  </body>
</html>
 

Output

Organization - Personal Tasks
  • Recursively, Bezier curves can be defined by repeated linear interpolations for n points (P0,…,Pn) as follows:
    • Initially,
        B P0 (t) =P0,
         BP1 (t) =P1,
         …
         BPn (t) =Pn
    Subsequently, for adjacent indicies,
         B P0P1 (t) = (1-t) BP0(t) + tB P1(t)
        …
    Generally, for any i < j
         B PiPi+1…Pj (t) = (1-t)B Pi…Pj-1 (t) + tB Pi+1…Pj (t)
    Finally,
         B P0…Pn (t) = (1-t)B P0…Pn-1 (t) + tB P1…Pn (t)
  • Interpolated SVG Curves
    • 4 Points     
    • 3 Linear Curves     
    • 2 Quadratic Bezier Curves     
    • 1 Cubic Bezier Curve     
    • Interpolation points at t=.5
      • Linear Interpolants     
      • Quadratic Interpolants     
      • Cubic Interpolant     
    • P₀ P₁ P₂ P₃

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.