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