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

Question

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

为此，我希望沿着长卷轴有多个画布。我还希望当用户在滚动的正确位置时，这些交互式体验才会开始。我可以为我的问题想出多种解决方案，但我不确定如何实现它们，也不确定哪一个是最好的。

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

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

有什么简单的解决方案吗？提前谢谢。

Answer 1

听起来像是你在找instance mode。

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

您还可以使用parent()函数将画布放在特定的div中。无耻的自我推销：here是一个教程，其中包括在特定的div中放置画布。

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

祝好运!