小编amz*_*-ex的帖子

我希望在画布上画出宽度从开始到结束逐渐变化的线条。也就是说，假设该线从 开始（相当于(0, 0)），结束于，并且必须（线性）从开始到结束增加。width = 1strokeWeight(50, 50)width = 3width13

关于如何实现这一目标有什么想法吗？无法将其从网络中删除。

我正在 p5.js 中使用双摆构建创意模拟。这是代码精简版本的链接（我不确定它是否可以变小）： https: //github.com/amzon-ex/amzon-ex.github.io/tree/master/ dp 草图剥离

您可以在这里看到动画：https://amzon-ex.github.io/dp-sketch-stripped/dp-sketch.html

当我在笔记本电脑（Windows 10、MS Edge 88）上运行此程序时，我得到了大约 55-60 fps，这正是我想要的。然而，当我在移动设备（Android、Chrome 88）上运行相同的草图时，性能非常差，几乎无法达到 5-6 fps。我不明白我的代码有什么复杂之处导致了如此糟糕的性能。我之前在移动设备上运行过其他类型的 p5.js 草图，它们运行良好。

任何见解都值得赞赏。

由于我提供的项目链接中有一些文件，因此这里有一个快速指南（绝对不需要阅读所有内容）：

1. sketch.js是构建动画的关键文件。它获取一个图像，构建一个填充图像亮度值的数组（array lumamap，in setup()）。然后我为我的摆锤绘制轨迹，其中任何像素处轨迹的亮度对应于 中的亮度值lumamap。
2. dp-sketch.html是 p5 sketch 的 HTML 容器。
3. libs/classydp.js包含DoublePendulum描述双摆对象的类。