参数方程的画布贝塞尔曲线

Question

我正在尝试使用画布来模拟参数均衡器，它使用频率，共振和增益来响应类似于均衡器的下图。

沿线有8个点。每个点都可以有各种曲线（低通，钟形，缺口，高通等）

我想知道如何在画布上模仿这个？

网上有很多发电机，像这样 - https://canvature.appspot.com/  但他们真的没有告诉你如何沿着一条线做多条曲线。 另外，例如我见过的大多数工具都不能做出很高的共振 - 我是否需要为这些工具增加一点？

我可以使用canvas bezierCurveTo和moveTo函数，我会将每个点的XY移动输入到这些中。

关于如何计算这些响应的任何指示都会很棒

干杯

ķ

修改

我相信下面的用户是正确的，我需要B样条在画布中实现这一点。到目前为止，我尝试了一种简单的低通曲线，从右向左移动（没有任何共振）。我正在努力增加共振，这恰好模拟了低通曲线的共振（即在开始时有峰值，而不是在整个路径上）。例如http://www.audiomulch.com/images/blog/southpole-expedition-part-1-low-pass-filter-basics-resonant-low-pass-frequency-response.png

我也在努力，我需要沿着直线有8个点，一个点可以通过另一个点（从而影响B样条）。我猜我需要使用isPointInPath()函数，但在我的用例中如何实现它。

我猜这很难，因为之前在Canvas中没有尝试过，而且网上关于这个的信息非常少（我可以在C中找到很多例子）

以下是使用B样条进行少量共振的低通曲线的示例（但共振不够远，峰值应该更加减少）

对于奇怪的编码风格感到抱歉，这不是javascript，而是集成了所有canvas功能的基本脚本语言：

canvas_beginPath(c);
decl x0 = x[0] * 1000;
decl y0 = y[0] * 200;
decl x1 = x[1] * 200;
decl y1 = y[1] * 20;

canvas_lineTo(c,0, 10); 
canvas_moveTo(c,x0+10, 98);             
canvas_arcTo(c,x0+103, 200-y0, x0+173, 96, 73); 
canvas_lineTo(c,1000, 96);             
canvas_stroke(c);
canvas_fill(0);

canvas_beginPath(d);
canvas_moveTo(d,165, 98);            
canvas_arcTo(d,203, 95, 281, 96, 73); 
canvas_lineTo(d,1000, 96);             
canvas_stroke(d);
canvas_fill(0);

Answer 1

我不是很了解它，而是从我在另一种情况下所做的事情（我有固定点并需要提供人类识别曲线）。

这是我从你的问题中得到的：

您在一系列频率上有一定的幅度。由于频率是一个有序集（从数字空间继承自然顺序），实际上你有一个样本集，需要在它们之间进行插值以形成一个函数。

这种插​​值可以是e行：

* ****** * * *** ** * * *** * ** * 所以最后这看起来不太好。

水平线有另一种方式

`**** *********
                   ******

 *****               ******`

数字放大器使用它来可视化它。

你寻求的是更圆的东西： ** **** **** ** ** ** ** * ** * *** * 好的，你只需要使用带有四个点的bspline + ***x ** * ** x*** + 两个x点是该样条曲线经过的点的第一个和第四个点。这两点是您表示值的要点。

+点是第2点和第3点，实际控制第一点的圆度（第2点执行此操作）和第四点第四点（第三点）执行此操作。如果将这些点放在相同的y-achse值上，则可以使用x访问控制圆度。

如果第2点与第4点具有相同的x（记住2控制圆的一个），则样条将经过中间点，只要3具有与第1点相同的x值。可以通过轻松改变2和3的x值来移动这个中间点。玩它。

我使用100％和100％得到了非常好的结果，但最后让人们调整曲线的那些。 （我使用0到1之间的值。）

您可以使用插图画家或徒手画自己看到效果并使用bspline工具（路径编辑）并使用圆度点（您在路径的每个点拖出并移动的那些）并仅更改x值。 / p>

这正是您所寻找的。

如果您需要帮助或需要真实照片（我知道ascii艺术不够好），请问我会更新帖子。

Answer 2

参数均衡器过滤信号。您尝试使用曲线进行可视化的是滤波器的频率响应。

这样做的一种简单方法是计算多个不同频率的响应（例如，在可视化中的每个像素列一次），以在可视化中获得一堆点。然后，只需通过连续点绘制线段，以显示滤波器的频率响应。

重点是，使用实际频率响应函数沿曲线插值点进行渲染，而不是内置支持贝塞尔曲线的画布。