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

Question

我无法在一页中放置和渲染多个草图。我在开放式处理工作。由于我无法编辑页面 html，我通过创建节点和 appendChild 添加代码到正文。

预期

我对下面的项目有一个 link。但首先我会描述我希望它做什么：

• 一页有 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 指出的那样，内容就在那里。但没有显示。所以这意味着渲染的连接采用最后一个草图的大小。我通过在具有文档正文大小的脚本末尾添加一个空的虚拟草图来修复它：

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