Wallpaper Engine,关于自定义 Audio Visualizer 渲染的见解
Wallpaper Engine, insight on customizing Audio Visualizer's rendering
自上次 post 以来,我在墙纸方面取得了一些进展 -- 解决了我之前的很多问题
今天我想要一些方向,如果有人有的话:
我正在处理的最后一个小部件是 Audio Visualizer。然而,我对独特性的追求并非没有问题(......如果没有这个属性,你真的能成为一名程序员吗?)。这是我正在建模的参考,这是我几周前在 After Effects 中制作的可视化工具。 https://youtu.be/cHweVjmBmP4
在 Javascript 和 Wallpaper Engine 的 "limitations" 中,我是否可以在输出中复制这些尖锐的弯曲和曲线?起初我认为使用 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();
}
我在您的 AE 示例中没有看到曲线,而是连接样式设置为圆形的长多段线(因此角度变成圆角)。
我不太了解 Wallpaper Engine,但看起来像 regular Canvas stuff, in which you can do
ctx.lineJoin = "round";
链接的 MDN 页面中的示例在解释连接样式方面做得比我以往任何时候都好。
自上次 post 以来,我在墙纸方面取得了一些进展 -- 解决了我之前的很多问题
今天我想要一些方向,如果有人有的话:
我正在处理的最后一个小部件是 Audio Visualizer。然而,我对独特性的追求并非没有问题(......如果没有这个属性,你真的能成为一名程序员吗?)。这是我正在建模的参考,这是我几周前在 After Effects 中制作的可视化工具。 https://youtu.be/cHweVjmBmP4
在 Javascript 和 Wallpaper Engine 的 "limitations" 中,我是否可以在输出中复制这些尖锐的弯曲和曲线?起初我认为使用 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();
}
我在您的 AE 示例中没有看到曲线,而是连接样式设置为圆形的长多段线(因此角度变成圆角)。
我不太了解 Wallpaper Engine,但看起来像 regular Canvas stuff, in which you can do
ctx.lineJoin = "round";
链接的 MDN 页面中的示例在解释连接样式方面做得比我以往任何时候都好。