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

**URL:** https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806
**Category:** Beginners
**Created:** [October 21, 2020, 8:58pm UTC](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806 "2020-10-21T20:58:01Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)
#### Post date: [October 21, 2020, 8:58pm UTC](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806/1 "2020-10-21T20:58:01Z")

</div>

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

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

<head>
  <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>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <script src="../p5.js"></script>
  <script src="../addons/p5.sound.min.js"></script>
  <script src="sketch.js"></script>
  <script src="oooo.js"></script>
</head> 

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

</html>

```

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 21, 2020, 9:09pm UTC](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806/2 "2020-10-21T21:09:59Z")

</div>

> [@olaf000olaf](#):
>
> … but the second one is not showing up,

Use an `<iframe>` for the 2nd sketch: 🖼

[Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](http://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe)

> <https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22>
>
> There are more than three files. show original

https://glitch.com/embed/#!/embed/noisy-char-grid?path=index.html&previewSize=0&sidebarCollapsed=true

---

<div class="post-metadata">

### Author: ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)
#### Post date: [October 21, 2020, 9:48pm UTC](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806/3 "2020-10-21T21:48:18Z")

</div>

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

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 21, 2020, 9:54pm UTC](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806/4 "2020-10-21T21:54:33Z")

</div>

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:

> **[HTMLIFrameElement.src](https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/src)**
>
> The HTMLIFrameElement.src property reflects the HTML referrerpolicy attribute of the iframe element defining which referrer is sent when fetching the resource.

---

<div class="post-metadata">

### Author: ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)
#### Post date: [October 21, 2020, 10:08pm UTC](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806/5 "2020-10-21T22:08:30Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 21, 2020, 10:34pm UTC](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806/6 "2020-10-21T22:34:29Z")

</div>

> [@olaf000olaf](#):
>
> , what should that new HTML document have inside it?

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

## [global.html](https://bl.ocks.org/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22#global.html)

```auto
<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>

```

## iframe.html:

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

```

---

<div class="post-metadata">

### Author: ![Willian\_Xz](https://avatars.discourse-cdn.com/v4/letter/w/aca169/32.png) [@Willian\_Xz](https://discourse.processing.org/u/Willian_Xz)
#### Post date: [October 22, 2020, 12:43am UTC](https://discourse.processing.org/t/why-cant-i-run-2-5pjs-sketches-on-a-html-website/24806/7 "2020-10-22T00:43:50Z")

</div>

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
