二阶贝塞尔曲线：描绘爱情的柔美弧线

2024-01-17 13:10:25

二阶贝塞尔曲线：解锁浪漫之爱的秘密

在图形设计的浩瀚海洋中，贝塞尔曲线无疑是点缀在像素之上的闪耀之星。它赋予了设计师和艺术家塑造平滑优雅曲线的魔力，在动画、插画和用户界面设计中掀起了一场视觉革命。在这趟探索之旅中，我们将聚焦于二阶贝塞尔曲线，它将指引我们绘制浪漫的心形，让数字世界也洋溢着爱的气息。

贝塞尔曲线的数学根基

二阶贝塞尔曲线由三个至关重要的控制点构成：起始点、结束点和一个关键的控制点。这三个点共同决定了曲线的形状和走向，就像三个舵手引领着船只驶向预定的航线。

深入贝塞尔曲线的数学方程，我们会发现一个巧妙的公式：

B(t) = (1 - t)²P₀ + 2t(1 - t)P₁ + t²P₂

在这个方程中，B(t) 代表曲线上的一个点，t 是介于 0 和 1 之间的参数。P₀、P₁和 P₂ 分别是起始点、控制点和结束点。

用二阶贝塞尔曲线绘制爱心

现在，让我们把理论付诸实践，用二阶贝塞尔曲线绘制一颗饱含爱意的爱心。

起始点：(0, 0) - 爱情的萌芽之地
控制点：(1, 0.5) - 爱情的枢纽
结束点：(0, 1) - 爱情的高潮

将这些控制点代入方程，我们得到了一条曲线：

B(t) = (2t - 2t², 2t)

代码实现

使用 JavaScript，我们可以将这个曲线方程变成现实：

const startPoint = [0, 0];
const controlPoint = [1, 0.5];
const endPoint = [0, 1];

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

for (let t = 0; t <= 1; t += 0.01) {
  const point = [
    (2 * t - 2 * t * t) * startPoint[0] + (2 * t - t * t) * controlPoint[0] + (t * t) * endPoint[0],
    (2 * t - 2 * t * t) * startPoint[1] + (2 * t - t * t) * controlPoint[1] + (t * t) * endPoint[1]
  ];
  ctx.fillStyle = "red";
  ctx.fillRect(point[0], point[1], 2, 2);
}