p5.js 在移动设备上绘制非常慢

Question

我正在 p5.js 中使用双摆构建一个创意模拟。这是精简版代码的 link（我不确定它是否可以做得更小）： 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 草图，它们运行良好。

如有任何见解，我们将不胜感激。

由于我在项目link中提供了一些文件，这里有一个快速指南（完全没有必要阅读所有内容）：

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

Answer 1

正如我在一些帮助下发现的那样，这个问题与不同设备上不同的像素密度有关。由于与 desktops/laptops 相比，移动设备具有更高的像素密度，因此我的 500x500 canvas 在这些显示器上变得更大，因此需要渲染更多的像素。加上移动处理器与台式机处理器相比较弱这一事实，lag/low 帧速率是预期的。

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