Javascript 墙纸引擎,定制音频可视化工具的洞察';s渲染
自从我上一篇文章发表以来,我在墙纸方面取得了一些进展——修复了很多以前的问题 今天,如果有人有,我想知道一些方向: 我正在研究的最后一个小部件是音频可视化工具。然而,我对独特性的追求并不是没有问题的(…没有这个属性,你真的能成为一名程序员吗?)。以下是我正在建模的参考资料,这是我几周前在After Effects中制作的可视化工具 在Javascript和墙纸引擎的“限制”中,我是否可以在输出中复制这些锐角、弯曲和曲线?我起初认为使用arcTo()方法的变量在这里会有所帮助。。但我不清楚切线的坐标是什么。什么样的公式有助于解释受影响的数据 这是目前的代码。感谢您编写了这样一个可访问的代码。我从阅读中学到了很多关于算法的知识,甚至通过自己的测试学到了更多。我会继续努力想办法解决这个问题,但任何帮助都会得到无尽的感谢Javascript 墙纸引擎,定制音频可视化工具的洞察';s渲染,javascript,audio,wallpaper,Javascript,Audio,Wallpaper,自从我上一篇文章发表以来,我在墙纸方面取得了一些进展——修复了很多以前的问题 今天,如果有人有,我想知道一些方向: 我正在研究的最后一个小部件是音频可视化工具。然而,我对独特性的追求并不是没有问题的(…没有这个属性,你真的能成为一名程序员吗?)。以下是我正在建模的参考资料,这是我几周前在After Effects中制作的可视化工具 在Javascript和墙纸引擎的“限制”中,我是否可以在输出中复制这些锐角、弯曲和曲线?我起初认为使用arcTo()方法的变量在这里会有所帮助。。但我不清楚切线的坐
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();
}
设i,x=0,y=center+scale*data[0]*0.33;
ctx.beginPath();
ctx.moveTo(x,y);
对于(i=0;i<63;i++){
x+=宽度;
y=中心+刻度*数据[i];
ctx.lineTo(x,y);
}
x+=宽度;
y=中心+刻度*(数据[63]+数据[127])*0.5;
ctx.lineTo(x,y);
x+=宽度;
y=中心+刻度*数据[126];
ctx.lineTo(x,y);
x=128*宽度,y=中心+刻度*数据[64]*0.33;
ctx.moveTo(x,y);
对于(i=64;i<127;i++){
x-=宽度;
y=中心+刻度*数据[i];
ctx.lineTo(x,y);
}
}
函数渲染线(ctx,彩色){
ctx.lineWidth=1;
ctx.strokeStyle=颜色;
如果(全球开花){
ctx.shadowBlur=全局半径;
ctx.shadowColor=颜色;
}
ctx.stroke();
}
在您的AE示例中,我看不到曲线,但看到一条连接样式设置为圆形的长多段线(因此角度得到圆角)
我不知道壁纸引擎的具体情况,但看起来
链接MDN页面中的示例在解释连接样式方面比我以前做得更好。我在AE示例中看不到曲线,但看到连接样式设置为圆形的长多段线(因此角度得到圆角) 我不知道壁纸引擎的具体情况,但看起来
链接MDN页面中的示例在解释连接样式方面比我以前做得更好。非常感谢您的回复!“曲线”和“急弯”恰好是我用来描述所描绘的不规则三角形风格的速记。我来看看我能带着这个去哪里!现在主要的障碍仍然是协调性。你的AE示例看起来像是在正Y震级和负Y震级之间交替出现频率箱。那可能会帮到你。再次谢谢你!有趣的是,我只是在寻找这种东西。我们将尝试找到让浏览器能够理解这一点的方法。你的措辞形式使我想到了可能性。。谢谢你!别担心。这里有一个小的代码沙盒,可能会有所帮助!我几乎可以肯定这是我必须做的!天哪,你是个救生员!如果我没有误解的话,这里的代码试图找到频率箱/音频阵列中的每个奇数,对吗?你早些时候的帮助把我推向了那个方向。。我想我现在只是想办法把它翻译成当前的代码!我相信这会有助于我作为推荐人。再次非常感谢您的回复!“曲线”和“急弯”恰好是我用来描述所描绘的不规则三角形风格的速记。我来看看我能带着这个去哪里!现在主要的障碍仍然是协调性。你的AE示例看起来像是在正Y震级和负Y震级之间交替出现频率箱。那可能会帮到你。再次谢谢你!有趣的是,我只是在寻找这种东西。我们将尝试找到让浏览器能够理解这一点的方法。你的措辞形式使我想到了可能性。。谢谢你!别担心。这里有一个小的代码沙盒,可能会有所帮助!我几乎可以肯定这是我必须做的!天哪,你是个救生员!如果我没有误解的话,这里的代码试图找到频率箱/音频阵列中的每个奇数,对吗?你早些时候的帮助把我推向了那个方向。。我想我现在只是想办法把它翻译成当前的代码!我相信这会有助于我作为推荐人。再次非常感谢你
ctx.lineJoin = "round";