How can I display two p5js sketches on the same html page?

Admin 1
Viewed 342

I'm hoping to set up a website for my animation studio, and I'm hoping to have a few p5 sketches set up in the background to add some flair. For right now, I have two basic sketches set up, just to be sure that everything is working properly. One displays as pink, and one displays as blue, and they're designed to be drawn above and below the line "Who we are".

My problem is that my html page seems to be capable of loading one of my scripts, but not both. I can comment out the pink script, and the blue will show up, properly parented to my div, and vice versa.

Does anyone know how to make these two sketches show up on the same page?

Thanks

p.s. I've tried using instance mode, but I still wasn't able to make it work. I've heard that instance mode is helpful for this, but I don't know how to go from instance mode to having two sketches on the same page. If anyone has resources on that I'd appreciate it!

    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>

p5.js html5-canvas html javascript
1 Answers

I fixed it after some noodling! I wasn't using the instance mode properly. I had been keeping each sketch as a separate file and expecting html to load each separately.

////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>

Admin1
Related