p5.j​​s sketch 在移动设备上非常慢

Question

我正在 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描述双摆对象的类。

Answer 1

正如我在一些帮助下发现的那样，该问题与不同设备上不同的像素密度有关。由于移动设备与台式机/笔记本电脑相比具有更高的像素密度，因此我的500x500画布在这些显示器上变得更大，从而导致需要渲染更多的像素。再加上移动处理器比桌面处理器更弱，因此预计会出现延迟/低帧率。

pixelDensity(1)这可以通过设置来避免setup()；这避免了在密集像素设备上渲染更大的画布。