I put two script sources but the second one is not showing up, why and how can I fix this?
<!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>
Use an <iframe> for the 2nd sketch:
Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe
.block
height: 650
scrolling: no
border: yes
license: cc-by-4.0adjustFrameSize.js
'use strict';
p5.prototype.adjustFrameSize = function () {
if (frameElement) {
frameElement.height = frameElement.frameBorder = 0;
frameElement.height = this.getDocHeight() + 'px';
frameElement.width = this.getDocWidth() + 'px';
}
};
show original
all.html
<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>
<iframe src=global.html></iframe>
<script defer src=instance.js></script>
<script defer src=instance.js></script>
There are more than three files. show original
1 Like
Thanks for answering,
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?
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
