0

I'm setting up a web page that will have space for 3 different p5 sketches. The problem is when I try to load a p5 sketch into an index.html page, it does not load properly or work properly. However, when I attempted the same thing with a p5 sketch that did not include an image, it worked perfectly fine.

I have tried using the <script src= script src="sketch.js"></script> and this has worked for p5 sketches that do not include images, however it did not work for any sketches that have images with them.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script;
<script src="sketch.js"></script>
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Thatonecj
  • 1
  • 2
    Can you please post a [mcve]? Can you please try to be more specific than saying it didn't work? Can you check your [developer tools](https://happycoding.io/tutorials/javascript/developer-tools) for JavaScript or network errors? – Kevin Workman Mar 28 '19 at 22:51
  • There are two things that come to mind from your question. You cannot put multiple sketch.js files in one HTML script tag. Let's say you have two sketches named sketch1.js and sketch2.js. You will need Since you have multiple sketches you will have to use instance mode. See: https://github.com/processing/p5.js/wiki/Global-and-instance-mode and https://stackoverflow.com/a/55388897/1978785 – Charlie Wallace Mar 29 '19 at 13:39

1 Answers1

0

You can't just access local files with JavaScript like you do with HTML. You need to use the File API as detailed here: https://www.html5rocks.com/en/tutorials/file/dndfiles/ Source: Local file access with javascript

Regarding the "place sketches on Page" problem. I think the best way to do this is as detailed in this article: https://github.com/processing/p5.js/wiki/Positioning-your-canvas#relocating-the-canvas

Nicolo Lüscher
  • 595
  • 7
  • 22