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

【问题标题】：How can I display two p5js sketches on the same html page?如何在同一个 html 页面上显示两个 p5js 草图？
【发布时间】：2021-04-27 14:31:14
【问题描述】：

我希望为我的动画工作室建立一个网站，并希望在后台设置一些 p5 草图以增加一些风格。目前，我设置了两个基本草图，以确保一切正常。一个显示为pink，一个显示为blue，它们被设计为绘制在“我们是谁”这一行的上方和下方。

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

有谁知道如何让这两个草图出现在同一页面上？

谢谢

附言我试过使用instance mode，但我仍然无法让它工作。我听说实例模式对此很有帮助，但我不知道如何从实例模式转到在同一页面上有两个草图。如果有人有这方面的资源，我将不胜感激！

    function setup(){
    const myBlueCanvas = createCanvas(400,400);
    myBlueCanvas.parent(blueCanvas);
}

function draw(){
    clearInterval();
    background(80,100,255);
    ellipse(mouseX, mouseY, 20, 20)
}

html, body {
    padding: 20px;
    margin: 2000;
    text-align: center;
    background-color: rgb(248, 253, 255);
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }

canvas {
    display: block;
}

.title {
    
    text-align: left;
    font-family: Termina, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 70px;
    font-variant: small-caps;
    color:rgb(9, 25, 78);
    /* background-color: burlywood; */
}

.h1{
    text-align: left;
    font-family: Termina, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 20px;
}

.canvasTest{
    /* background-color: darkslateblue; */
    text-align: center;
}

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Robins Egg</title>
  
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>

  </style>
    
  <script src="../p5.js"></script>
  <!-- <script src="../p5.dom.js"></script> -->
  
  <!-- <script src = "blueSketch.js"></script> -->
  <script src = "pinkSketch.js"></script>
  <!-- <script src="../addons/p5.sound.js"></script> -->
  
</head>

<body>
  
  <main>
    <div class = "title">

      Robin's <br>
      Egg <br>
      Studio <br>

    </div>
    <!-- branch fun -->
    <div class = "container">
      <div id = "pinkCanvas">
    </div>
    </div>

    <!-- Who We are -->
    <div class = h1>
      Who We Are
    </div>


    <!-- sketchTests-->
    <div class = "container">
      <div id = "blueCanvas">
    </div>
  </div>
      

    
    <div>
      hello world, my name is robins egg <br>
      this is my second paragraph.
    </div>

  </main>
</body>

</html>

【问题讨论】：

标签： javascript html html5-canvas p5.js

【解决方案1】：

经过一番琢磨，我修好了！我没有正确使用实例模式。我一直将每个草图保存为单独的文件，并希望 html 分别加载每个文件。

////top Sketch
var sketchPink = function(p) {
  p.setup = function() {
    const myPinkCanvas = p.createCanvas(400, 400);
    myPinkCanvas.parent("pinkCanvas");
  }

  p.draw = function() {
    p.clear();
    p.background(255, 100, 100);
    p.ellipse(p.mouseX, p.mouseY, 20, 20);
  }
}

//secondary sketch
var sketchBlue = function(p) {
  p.setup = function() {
    const myBlueCanvas = p.createCanvas(400, 400);
    myBlueCanvas.parent("blueCanvas");
  }

  p.draw = function() {
    p.clear();
    p.background(100, 100, 255);
    p.ellipse(p.mouseX, p.mouseY, 20, 20);
  }
}

var myp5Blue = new p5(sketchBlue);
var myp5Pink = new p5(sketchPink);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Robins Egg</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

</head>

<body>
  <main>
    <div>
      Sketch #1
    </div>
    
    <div class="container">
      <div id="pinkCanvas">
      </div>
    </div>

    <div>
      Sketch #2
    </div>

    <div class="container">
      <div id="blueCanvas">
      </div>
    </div>

  </main>
</body>

</html>

【讨论】：

@Rabbid76 哎呀！绝对有道理。我想我已经改回了原始代码并在答案中发布了我的编辑。