07 | 如何用向量和参数方程描述曲线？

月影



该思维导图由 AI 生成，仅供参考

你好，我是月影。
曲线是图形系统的基本元素之一，它可以构成几何图形的边，也可以描述点和几何体的运动轨迹，还可以控制像素属性的变化。不论我们用什么图形系统绘图，图形的呈现都离不开曲线。因此，对于可视化而言，掌握如何描述曲线是非常重要的。
今天，我们就来学习两种常见的描述曲线的方法，也就是用向量和参数方程来描述曲线。
如何用向量描述曲线？我们先来说第一种方法，用向量来描述曲线。
我们知道，曲线是可以用折线来模拟的。因此，我们第 5 节课中用向量来绘制折线的方法，同样可以应用于曲线。具体怎么做呢？下面，我就详细来说说。
首先，我们用向量绘制折线的方法来绘制正多边形，我们定义一个函数 regularShape，代码如下：
function regularShape(edges = 3, x, y, step) {
  const ret = [];
  const delta = Math.PI * (1 - (edges - 2) / edges);
  let p = new Vector2D(x, y);
  const dir = new Vector2D(step, 0);
  ret.push(p);
  for(let i = 0; i < edges; i++) {
    p = p.copy().add(dir.rotate(delta));
    ret.push(p);
  }
  return ret;
}
我们在 regularShape 函数中，给定边数 edges、起点 x, y、一条边的长度 step，就可以绘制一个正多边形了。绘制的思路和我们上一节课的思路类似，也就是通过 rotate 旋转向量，然后通过向量加法来计算顶点位置。
具体来说就是，我们定义初始点为 new Vector2D(x, y)，初始方向为 x 轴方向 new Vector2D(step, 0)。然后循环计算正多边形的顶点位置，也就是从初始点开始，每次将方向向量旋转 delta 角度，delta 角度是根据正多边形内角公式计算出来的。最后，我们将当前点和方向向量相加，就得到下一个顶点坐标了。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文介绍了如何用向量和参数方程描述曲线的方法，以及它们的优缺点和适用范围。通过向量描述曲线可以绘制各种多边形，但在描述其他曲线如椭圆、抛物线等时存在局限性。作者还介绍了用参数方程描述曲线的方法，以圆、椭圆和抛物线为例，给出了相应的参数方程和绘制函数的代码示例。通过参数方程，不仅可以描述常见的曲线，还能描述更一般性的曲线，如贝塞尔曲线和Catmull–Rom曲线。文章通过代码示例和图形展示，生动地展示了向量和参数方程描述曲线的方法。此外，还介绍了如何利用函数式的编程思想封装一个简单的JavaScript参数方程绘图模块，以绘制出不同的曲线。最后，详细讲解了二阶和三阶贝塞尔曲线的参数方程和绘制方法，强调了贝塞尔曲线在可视化和计算机图形学中的重要性。整体而言，本文通过丰富的代码示例和图形展示，使读者能够快速了解如何用向量和参数方程描述曲线，以及它们的优缺点和适用范围。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(17)

最新
精选

Geek_13e8db
这篇教程写得很好，感谢月影老师！这里提一个小建议：附件的snippet中，参数的定义对于初学者而言，需要花较长时间才能理解。老师能否在fn parametric()里面加上更多的comment，或者起一些更具体的变量名。多谢。当然，当前这么写，让我不得不花很多时间来理解每行代码，客观上加强了学习效果。
作者回复: 嗯嗯，parametric这块实现用了过程抽象思想，它是函数式编程的基础，我会用一篇加餐来专门介绍这种编程思想
2020-07-06
5
8
不见飞刀
老师能不能解释一下const t = start * (1 - p) + end * p; 这段代码里的t的意义是什么，为什么要这么算
作者回复: 这是线性插值，t是当前时间的值
2020-08-24
3
2
I keep my ideals💤
const segments = Math.round(TAU_SEGMENTS * ang / TAU)不太理解这一步的含义希望老师能够帮我解除一下疑惑
作者回复: 就是整圆的线段数乘以弧度与2pi的比值得到圆弧的线段数
2020-10-10
2
1
量子蔷薇
请问老师，圆和椭圆的参数方程使用弧度值作为参数，所以即使只看方程也能想象出曲线的样子，但是其他曲线比如圆锥曲线的 start 和 end 不能理解起到了什么作用，只能凭感觉画出来后再改参数慢慢微调，如何选择 start 和 end 的值，这里面有什么技巧吗？
作者回复: 这个需要慢慢练习就有感觉了
2020-08-04

1
廖熊猫
感谢月影老师的讲解。贝塞尔曲线接触的时间也挺长了，但是总是感觉不得要领，曲线的公式都是死记硬背出来的，也很难想象出来对应控制点绘制出来的曲线的大概样子，其实对于很多类似贝塞尔曲线的参数绘制曲线都是这样子，希望可以了解下对于这些曲线，老师平时都是怎么记忆还有想象大概的绘制形状的？
作者回复: 其实理解贝塞尔曲线的原理就大致能知道贝塞尔曲线的样子。不过如果需要精确的控制，还是应该用一些画贝塞尔曲线的工具，这类工具不少，你可以在github上搜一下，输入简单的参数就可以将图形画出来。
2020-07-06

1
Ray
老师，我想问一下，抛物线里const t = min * (1 - s) + max * s;是怎么理解的，t不应该是正弦的倒数x/y吗？
作者回复: 参数方程啊，抛物线是二次曲线。
2021-09-02


秋谷
老师，那个正多边形的里面的const delta = Math.PI * (1 - (edges - 2) / edges)，这个是求每个角的大小的吗，是内角和 / edges的意思吗，没有看懂
作者回复: 内角大小公式
2020-11-19
6

I keep my ideals💤
// 抛物线参数方程 const para = parametric( t => 25 * t, t => 25 * t ** 2, ); // 绘制抛物线 para(-5.5, 5.5).draw(ctx); 想请教老师这里调用抛物线方程 para函数里面的-5.5 和5.5的值代表什么呢好像并不是点的坐标
作者回复: 代表绘制的坐标范围
2020-10-15


不见飞刀
抛物线方程里的t是什么意思
作者回复: 参数方程里的参数
2020-08-24


不见飞刀
抛物线函数那些参数是什么意思
作者回复: 抛物线的参数方程是x轴线性方程，y轴二次方程，根据物理意义就可以知道，水平方向匀速，垂直方向匀加速就是抛物线
2020-08-24



收起评论