Javascript 如何在同一html页面上显示两个p5js草图？

我希望为我的动画工作室建立一个网站，我希望在背景中设置一些p5草图来增加一些天赋。现在，我有两个基本的草图，只是为了确保一切正常。一个显示为，另一个显示为，它们被设计为在“我们是谁”这条线的上方和下方绘制。

我的问题是，我的html页面似乎能够加载我的一个脚本，但不能同时加载两个脚本。我可以注释掉粉红色的脚本，蓝色的脚本会显示出来，正确地作为我的div的父对象，反之亦然

有人知道如何使这两个草图显示在同一页上吗

谢谢

p、 我试过用，但还是没能用。我听说实例模式对此很有帮助，但我不知道如何从实例模式过渡到在同一页上有两个草图。如果有人有这方面的资源，我将不胜感激

函数设置（）{
const myBlueCanvas=createCanvas（400400）；
myBlueCanvas.parent（blueCanvas）；
}
函数绘图（）{
clearInterval（）；
背景（80100255）；
椭圆（mouseX，mouseY，20，20）
}

html，正文{
填充：20px；
差额：2000；
文本对齐：居中；
背景色：rgb（248253255）；
字体系列：'Gill Sans'，'Gill Sans MT'，Calibri'，Trebuchet MS'，无衬线；
}
帆布{
显示：块；
}
.头衔{
文本对齐：左对齐；
字体系列：Termina、Arial、Helvetica、无衬线字体；
字体大小：粗体；
字体大小：70px；
字体变体：小大写字母；
颜色：rgb（9,25,78）；
/*背景颜色：白肋木*/
}
.h1{
文本对齐：左对齐；
字体系列：Termina、Arial、Helvetica、无衬线字体；
字体大小：粗体；
字体大小：20px；
}
坎维斯特先生{
/*背景色：深蓝色*/
文本对齐：居中；
}

知更鸟蛋
罗宾的

鸡蛋

演播室

我们是谁
你好，世界，我的名字是罗宾斯蛋

这是我的第二段。

我在吃了些面条后把它修好了！我没有正确使用实例模式。我一直将每个草图作为一个单独的文件保存，并期望html分别加载每个草图

///顶部草图
变量=函数（p）{
p、 设置=函数（）{
const myPinkCanvas=p.createCanvas（400400）；
myPinkCanvas.母公司（“pinkCanvas”）；
}
p、 draw=函数（）{
p、 清除（）；
p、 背景（2551000）；
p、 椭圆（p.mouseX，p.mouseY，20,20）；
}
}
//二次草图
var sketchBlue=函数（p）{
p、 设置=函数（）{
constmybluecanvas=p.createCanvas（400400）；
myBlueCanvas.parent（“blueCanvas”）；
}
p、 draw=函数（）{
p、 清除（）；
p、 背景（100100255）；
p、 椭圆（p.mouseX，p.mouseY，20,20）；
}
}
var myp5蓝色=新的p5（蓝色）；
var myp5Pink=新的p5（粉色）

知更鸟蛋
草图#1
草图#2
@Rabbid76噢！当然有道理。我想我已经把原来的代码改回原处了，并在答案中贴出了我的编辑。