P5-处理中。无法一次运行并渲染多个草图

Question

我在一页中放置和渲染多个草图时遇到麻烦。我正在从事开放处理。由于无法编辑页面的html，因此我通过创建节点并将appendChild添加到正文来添加代码。

期望

我有一个指向下面项目的链接。但首先，我将描述我希望它做什么：

• 一页上有3个色块
• 每个草图都有自己的大小和背景颜色。
• 草图1填充了身体的大小，并具有红色背景。
• 草图2为400x400像素，背景为绿色。
• 草图3为200x200像素，背景为蓝色。
• 看到3种堆叠的彩色形状。

当前结果

• 它仅渲染最后一个草图，所以草图3

代码

Link to the OpenPocessing Sketch

Answer 1

因为iframe的尺寸太小。使用iframe滚动条播放时，您可以看到3种颜色。增大iframe的宽度和高度，它们都会显示出来。

在这里要增加iframe的大小，请注意我指出的iframe滚动条。

我在这里将style="width: 200px; height: 200px;"更改为style="width: 1000px; height: 1000px;"

Answer 2

正如乔纳森·加涅（Jonathan Gagne）指出的那样，同意书存在于此。但未显示。因此，这意味着渲染的conect占据了最后一个草图的大小。我通过在脚本末尾添加一个空的虚拟草图来修复它，该草图具有文档主体的大小：

var iframeFix = function(p) {
    p.setup = function() {
        p.createCanvas($(document).width(), $(document).height());
    };
};

let node_iframeFix = document.createElement('div');
var sketch_iframFix = new p5(iframeFix, node_iframeFix);
parentNode.appendChild(node_iframeFix);

now it works, as seen in this test