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

Question

我正在 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 sketch 的 HTML 容器。
3. libs/classydp.js 包含描述双摆对象的 DoublePendulum 类。

Answer 1

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

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