mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-09-01 20:33:34 +02:00
31 lines
2.9 KiB
Markdown
31 lines
2.9 KiB
Markdown
# 贝塞尔区间[0,1]
|
||
|
||
既然我们知道了贝塞尔曲线背后的数学原理，你可能会注意到一件奇怪的事：它们都是从`t=0`到`t=1`。为什么是这个特殊区间？
|
||
|
||
这一切都与我们如何从曲线的“起点”变化到曲线“终点”有关。如果有一个值是另外两个值的混合，一般方程如下：
|
||
|
||
\[
|
||
\textit{mixture} = a \cdot \textit{value}_1 + b \cdot \textit{value}_2
|
||
\]
|
||
|
||
很显然，起始值需要`a=1, b=0`，混合值就为100%的value 1和0%的value 2。终点值需要`a=0, b=1`，则混合值是0%的value 1和100%的value 2。另外，我们不想让“a”和“b”是互相独立的:如果它们是互相独立的话，我们可以任意选出自己喜欢的值，并得到混合值，比如说100%的value1和100%的value2。原则上这是可以的，但是对于贝塞尔曲线来说，我们通常想要的是起始值和终点值*之间*的混合值，所以要确保我们不会设置一些“a”和"b"而导致混合值超过100%。这很简单：
|
||
|
||
\[
|
||
m = a \cdot \textit{value}_1 + (1 - a) \cdot \textit{value}_2
|
||
\]
|
||
|
||
用这个式子我们可以保证相加的值永远不会超过100%。通过将`a`限制在区间[0，1],我们将会一直处于这两个值之间（包括这两个端点），并且相加为100%。
|
||
|
||
但是...如果我们没有假定只使用0到1之间的数，而是用一些区间外的值呢，事情会变得很糟糕吗？好吧...不全是，我们接下来看看。
|
||
|
||
对于贝塞尔曲线的例子，扩展区间只会使我们的曲线“保持延伸”。贝塞尔曲线是多项式曲线上简单的片段，如果我们选一个更大的区间，会看到曲线更多部分。它们看起来是什么样的呢？
|
||
|
||
下面两个图形给你展示了以“普通方式”来渲染的贝塞尔曲线，以及如果我们扩大`t`值时它们所“位于”的曲线。如你所见，曲线的剩余部分隐藏了很多“形状”，我们可以通过移动曲线的点来建模这部分。
|
||
|
||
<div class="figure">
|
||
<graphics-element title="二次无限区间贝塞尔曲线" src="./extended.js" data-type="quadratic"></graphics-element>
|
||
<graphics-element title="三次无限区间贝塞尔曲线" src="./extended.js" data-type="cubic"></graphics-element>
|
||
</div>
|
||
|
||
实际上，图形设计和计算机建模中还用了一些和贝塞尔曲线相反的曲线，这些曲线没有固定区间和自由的坐标，相反，它们固定座标但给你自由的区间。["Spiro"曲线](https://levien.com/phd/phd.html)就是一个很好的例子，它的构造是基于[羊角螺线,也就是欧拉螺线](https://zh.wikipedia.org/wiki/%E7%BE%8A%E8%A7%92%E8%9E%BA%E7%BA%BF)的一部分。这是在美学上很令人满意的曲线，你可以在一些图形包中看到它，比如[FontForge](https://fontforge.org/en-US/)和[Inkscape](https://inkscape.org)，它也被用在一些字体设计中（比如Inconsolata字体）。
|