Why cant I run 2 5pjs sketches on a html website?

I put two script sources but the second one is not showing up, why and how can I fix this?

<!DOCTYPE html>
<html lang="

  <title>MNCE P5.js2020 Neon Gallery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
    body {
      padding: 0;
      margin: 0;
  <script src="../p5.js"></script>
  <script src="../addons/p5.sound.min.js"></script>
  <script src="sketch.js"></script>
  <script src="oooo.js"></script>

<body style="background-color: rgb(0,0,0);">
  <h1 style="color: rgb(11,255,1);"> I replaced this </h1>
  <p style="color: rgb(254,0,246)"> I replaced this too  </p>


Use an <iframe> for the 2nd sketch: :framed_picture:


1 Like

Thanks for answering,
I changed “script” to “iframe” and now its showing me the raw code not the output.

Pay close attention how the tag <iframe> is used within the “index.html” file on the 2 example sketches I’ve previously posted:

Bouncing Colorful Balls:

<iframe src=global.html></iframe>

Noisy Char Grid:

<iframe src=iframe.html scrolling=no frameborder=0></iframe>

Notice on both sketches we’ve got an attribute src which points to another HTML file:

1 Like

I’m still really new, what should that new HTML document have inside it?
Or should I just make one huge javascript doc with all my projects inside it?

You can take a peek at my “global.html” & “iframe.html” files:


<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer src=adjustFrameSize.js></script>
<script defer src=ball.js></script>
<script defer src=global.js></script>

<h3>Bouncing Colorful Balls [Global Mode]:</h3>


<script async src=https://cdn.JsDelivr.net/p5.js/latest></script>
<script defer src=NoisyCharGrid.js></script>
1 Like

Hello greetings from Brazil !!

Usually this problem is solved using graphics, see the P5 documentation to learn how to use them.

Basically you can create other canvas to work with P5.JS