壁纸引擎，有关自定义音频可视化工具渲染的见解

Question

自从上一篇文章以来，我在壁纸方面取得了一些进展——修复了许多以前的问题

不过今天我想要一些方向，如果有人有：

我正在做的最后一个小部件是音频可视化工具。然而，我追求独特性并非没有问题(……你真的能成为一名没有这种特质的程序员吗？(。这是我正在建模的参考，是我几周前在After Effects中制作的可视化工具。https://youtu.be/cHweVjmBmP4

在Javascript和壁纸引擎的"局限性"中，我是否可以在输出中复制这些尖锐的弯曲和曲线？起初，我认为使用arcTo((方法的变量会对这里有所帮助。。但我不清楚切线的坐标是多少。什么公式可以帮助解释受影响的数据。

这是目前的代码。感谢Michael Fedora编写了这样一个可访问的代码。我从阅读中学到了很多关于算法的知识，甚至通过自己的测试学到了更多。我会一直努力解决这个问题，但任何帮助都将不胜感激！

    let i, x = 0, y = center + scale*data[0]*0.33;   
    ctx.beginPath();
    ctx.moveTo(x, y);
    for(i = 0; i < 63; i++) {
        x += width;
        y = center + scale * data[i];
        ctx.lineTo(x, y);
    }
    x += width;
    y = center + scale * (data[63] + data[127]) * 0.5;
    ctx.lineTo(x, y);
    x += width;
    y = center + scale * data[126];
    ctx.lineTo(x, y);
    x = 128*width, y = center + scale*data[64]*0.33;
    ctx.moveTo(x, y);
    for(i = 64;i < 127; i++) {
        x -= width;
        y = center + scale * data[i];
        ctx.lineTo(x, y);


    }
}
function renderLine(ctx, color) {
    ctx.lineWidth = 1;
    ctx.strokeStyle = color;
    if(glob.bloom) {
        ctx.shadowBlur = glob.bloomRadius;
        ctx.shadowColor = color;
    }
    ctx.stroke();
}

Answer 1

我在AE示例中看不到曲线，而是一条连接样式设置为圆形的长多段线(因此角度变为圆角(。

我不知道壁纸引擎的具体情况，但它看起来像普通的画布，你可以在其中进行

ctx.lineJoin = "round";

链接的MDN页面中的示例在解释联接样式方面比我以前做得更好。