P5 -处理。无法同时运行和呈现多个草图

Question

我有困难放置和绘制多个草图在一页。我在开加工公司工作。因为我不能编辑页面--它是html，所以我要通过创建一个节点和appendChild来添加代码。

期望

我有一个链接到下面的项目。但首先，我将描述我期望它做的事情：

• 一页有3张剪报
• 每个素描都有自己的大小和背景颜色。
• 草图1填充身体大小，并有一个红色的背景。
• 草图2是400x400 px，有一个绿色的背景。
• 草图3是200 x 200 px，有一个蓝色的背景。
• 导致看到三个堆叠的彩色形状。

当前结果

• 它只呈现最后一个草图，所以草图3

密码

链接到OpenPocessing草图

Answer 1

因为你的iframe太小了。当您使用iframe滚动条时，您可以看到3种颜色。提高你的iframe的宽度和高度，它们都会出现。

在此之前，要提高iframe的大小，请注意我所指出的iframe滚动条。

​

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

​

Answer 2

正如乔纳森·加涅指出的那样，圆顶就在那里。但没有显示出来。因此，这意味着呈现的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);

现在它起作用了，就像在这次测试中看到的那样。