More than one sketch in same HTML page

GoToLoop · December 14, 2024, 6:44pm

On my repo version, p5 is accessed twice:

GoToLoop/ESM-Sun-Manifesto-Demo/blob/main/index.mjs#L4-L5


      
          // Instantiates sketch() and places it in <div> id="second-sketch-holder":
          new p5(sketch, "second-sketch-holder");

github.com

GoToLoop/ESM-Sun-Manifesto-Demo/blob/main/js/secondsketch.mjs#L10-L11


      
          // Instantiates firstSketch() and places it in <div> id="first-sketch-holder":
          p.firstSketch = new p5(firstSketch, "first-sketch-holder");

And I make sure “p5.js” runs before “index.mjs”; so p5 exists before “index.mjs” runs new p5:

github.com

GoToLoop/ESM-Sun-Manifesto-Demo/blob/main/p5js.html#L8-L9


      
          <script defer src="//cdn.JsDelivr.net/npm/p5"></script>
          <script type="module" src="index.mjs"></script>

Sorry, but I have no idea how Vercel would interfere w/ that loading order.

github.com/processing/p5.js

Error deploying to Vercel

opened 06:45PM - 14 Dec 24 UTC

ejgutierrez74

Discussion

### Topic Not showing p5,js sketches as Vercel gives an not defined error, in V…ite works fine. Also would like to go to myrpoject/docs and show the jsdoc documentation. Load my project, and sketches are not shown… [vercel.com] (https://vercel.com/login?next=%2Fejgutierrez74s-projects%2Fpacman2024windows) [Dashboard] (https://vercel.com/login?next=%2Fejgutierrez74s-projects%2Fpacman2024windows) With vite works fine, but in vercel i got an error when i deploy to Vercel ``` Uncaught ReferenceError: p5 is not defined Nn https://pacman2024windows.vercel.app/assets/index-Df26wdtU.js:1776 An https://pacman2024windows.vercel.app/assets/index-Df26wdtU.js:1 <anonymous> https://pacman2024windows.vercel.app/assets/index-Df26wdtU.js:1776 ``` As vite in local i want to access my index.html showing some p5.js sketches, and then if i go to myproject/docs show de index of documentation. Structure of my project; ![imagen](https://github.com/user-attachments/assets/ea8cf2f8-3e30-4054-809a-f9c09d849903) This is the caling of scripts in index.html in root project: ``` <script type="module" src="js/libraries/p5.min.js"></script> <script type="module" src="/js/sketch.mjs"></script> <script type="module" src="/js/secondsketch.mjs"></script> ``` I really need help im a teacher in vocational education, and with my students we are stuck. Thanks

github.com/processing/p5.js

[p5.js 2.0 RFC Proposal]: Be fully compatible with popular tools as Vite and Vercel

opened 06:39PM - 14 Dec 24 UTC

ejgutierrez74

Area:Core p5.js 2.0

### Increasing access By now is a headache to get to work p5.js libraries in Vi…te, and when i got to work in Vite, then it doesnt work in Vercel... So would be nice that same tutorial or examples would work in local vite, and Vercel. Thanks ### Which types of changes would be made? - [ ] Breaking change (Add-on libraries or sketches will work differently even if their code stays the same.) - [ ] Systemic change (Many features or contributor workflows will be affected.) - [ ] Overdue change (Modifications will be made that have been desirable for a long time.) - [X] Unsure (The community can help to determine the type of change.) ### Most appropriate sub-area of p5.js? - [ ] Accessibility - [ ] Color - [X] Core/Environment/Rendering - [ ] Data - [ ] DOM - [ ] Events - [ ] Image - [ ] IO - [ ] Math - [ ] Typography - [ ] Utilities - [ ] WebGL - [X] Build process - [ ] Unit testing - [ ] Internationalization - [ ] Friendly errors - [ ] Other (specify if possible) ### What's the problem? Make p5.js work in Vite and Vercel is a headache ### What's the solution? One way of working and writing code, fully compatible with Vite and Vercel ### Pros (updated based on community comments) - Using standard of industry tools like vite, vercel ### Cons (updated based on community comments) None so far ### Proposal status Under review

Topic		Replies	Views
Multiple p5 sketches on one page Beginners	2	1191	February 24, 2021
Canvas.parent() with Multiple HTML files p5.js	3	394	August 26, 2021
Why cant I run 2 5pjs sketches on a html website? Beginners	6	539	October 22, 2020
Multiple Canvas Development	2	365	June 29, 2022
Can I use multiple p5.js on my website..? Coding Questions	2	636	December 29, 2019

More than one sketch in same HTML page

Related topics