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

如何解决p5.j​​s 草图在移动设备上非常慢

我正在通过使用双摆在 p5.js 中构建一个创造性的模拟。这是代码精简版的链接（我不确定它是否可以变小）： https://github.com/amzon-ex/amzon-ex.github.io/tree/master/dp-sketch-stripped

您可以在这里看到动画：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 是构建动画的关键文件。它获取一张图像，构建一个填充了图像亮度值的数组（数组 lumamap，在 setup() 中）。然后我为我的钟摆绘制轨迹，其中任何像素的轨迹亮度对应于 lumamap 中的亮度值。
2. dp-sketch.html 是 p5 草图的 HTML 容器。
3. libs/classydp.js 包含描述双摆对象的 DoublePendulum 类。

解决方法

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

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