javascript - Wallpaper Engine，关于自定义 Audio Visualizer 渲染的见解

Question

自从我上一篇文章以来，我在壁纸方面取得了一些进展 - 解决了我之前的很多问题

今天，如果有人有的话，我想要一些指导:

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

在 Javascript 和 Wallpaper Engine 的“限制”中，我是否可以在输出中复制这些急弯和曲线？我起初相信使用 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 示例中没有看到曲线，而是一条连接样式设置为圆形的长折线(因此 Angular 会变成圆 Angular )。

我不太了解 Wallpaper Engine，但这看起来像 regular Canvas stuff, in which you can do

ctx.lineJoin = "round";

链接的 MDN 页面中的示例比我以前能更好地解释连接样式。