Javascript 同一页面中有多个p5.js画布

虽然我有一些处理方面的经验，但我对p5.js还是新手。对于学术作品，我想创建一个具有多种互动体验的网站。我希望这个网站是一个单一的页面，没有链接没有什么，只有一个单一的滚动

为此，我想沿着长卷画多幅画布。我还希望，当用户处于正确的滚动位置时，这些交互体验才开始。我可以为我的问题想出多种解决方案，但我不知道如何实施，也不知道什么是最好的

用一页纸就可以做到这一点吗？是否可以将画布放入div中，然后使用css按顺序显示

我想到的另一个解决方案是创建多个页面，但这只是一个使用某种动画来模拟滚动的解决方案，这个解决方案可以保证用户总是全屏查看画布，但我不确定他是否可以使用正常的滚动条来控制它

---

有什么简单的解决办法吗？提前谢谢。

听起来你在找

“实例”模式允许您精确地执行所描述的操作：您可以创建多个草图并将它们全部添加到页面中

您还可以使用

parent（）

函数将画布放在特定的分区中。无耻的自我提升：是一个包括将画布放在特定分区中的教程

在你担心卷轴之前，我会先把这些作品做好。但一旦准备好了，我会考虑在JavaScript中设置一个滚动监听器，并以特定的值触发实例模式草图

---

祝你好运

多谢各位！这对我会有很大帮助！