在Flexbox中使用p5.js实例化无法正常工作

Question

我正在一个项目中，我在下拉选项卡的单个flexbox中显示多个p5.js项目。我已经到了要画2张画布并排成一排的阶段。我可以在设置中编辑画布的大小，更改颜色等。我的问题是使p.draw函数起作用。设置后我需要输入代码，但是当我尝试添加绘图功能时，画布消失了。谁能帮我解决这个问题？

这是我代码的当前迭代：

<div id="p5-2" class="flex-item">
<script>
            // script 2
            let sketch2 = function(p) {
                p.setup = function() {
                    p.createCanvas(100, 100);
                    p.background("orange");
                }

//The p.draw function should in theory be positioned here

            };
            let node2 = document.createElement('div');
            window.document.getElementById('p5-2').appendChild(node2);
            new p5(sketch2, node2);

            // script 3
        </script>
    </div> 
    <div id="p5-3" class="flex-item">
        <script>
            var sketch3 = function(p) {
                p.setup = function() {
                    p.createCanvas(100, 100);
                    p.background("green");
                }
//The p.draw function should in theory be positioned here

            };
            let node3 = document.createElement('div');
            window.document.getElementById('p5-3').appendChild(node3);
            new p5(sketch3, node3);
        </script>