mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-09-01 20:33:34 +02:00
37 lines
1.6 KiB
Markdown
37 lines
1.6 KiB
Markdown
# Splitting curves
|
|
|
|
Using de Casteljau's algorithm, we can also find all the points we need to split up a Bézier curve into two, smaller curves, which taken together form the original curve. When we construct de Casteljau's skeleton for some value `t`, the procedure gives us all the points we need to split a curve at that `t` value: one curve is defined by all the inside skeleton points found prior to our on-curve point, with the other curve being defined by all the inside skeleton points after our on-curve point.
|
|
|
|
<graphics-element title="Splitting a curve" width="825" src="./splitting.js">
|
|
<input type="range" min="0" max="1" step="0.01" value="0.5" class="slide-control">
|
|
</graphics-element>
|
|
|
|
<div class="howtocode">
|
|
|
|
### implementing curve splitting
|
|
|
|
We can implement curve splitting by bolting some extra logging onto the de Casteljau function:
|
|
|
|
```
|
|
left=[]
|
|
right=[]
|
|
function drawCurvePoint(points[], t):
|
|
if(points.length==1):
|
|
left.add(points[0])
|
|
right.add(points[0])
|
|
draw(points[0])
|
|
else:
|
|
newpoints=array(points.size-1)
|
|
for(i=0; i<newpoints.length; i++):
|
|
if(i==0):
|
|
left.add(points[i])
|
|
if(i==newpoints.length-1):
|
|
right.add(points[i+1])
|
|
newpoints[i] = (1-t) * points[i] + t * points[i+1]
|
|
drawCurvePoint(newpoints, t)
|
|
```
|
|
|
|
After running this function for some value `t`, the `left` and `right` arrays will contain all the coordinates for two new curves - one to the "left" of our `t` value, the other on the "right". These new curves will have the same order as the original curve, and can be overlaid exactly on the original curve.
|
|
|
|
</div>
|