Run p5js with Parcel

p5.js Libraries
1

Hi there,

I’m trying to run a script based on p5js library, it works well in a classic file (index.html, css, and scripts) but if I run this with parcel (npm run dev), there are no errors but the elements expected are not created in the page.

(I create a canvas in the setup function, to have a cursor trail one my page, but the canvas don’t appears when i run width Parcel)

Do someone know how to fix that ?

I share my repository : https://github.com/Diarit-S/Site-Portfolio

Sorry for my english and thanks for the help !

1 Like
2

no idea, but i see at

index.html

you link to a old p5.js version

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

p5.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers !

just for info, good luck.

3

Thanks for that ! It’s not working with the latest version too

4

@Lotas94 Hey there I can help you. Parcel bundles the libraries that are imported into your code. Moreover, when you do this with p5, you’ll need to use the instance mode of p5. This is because Parcel will create separate scopes for all modules (i.e. no more global variables!).

I have a project that does exactly this (parcel and p5). You can see the code and learn from there.

3 Likes
5

Thank you for your response mebble ! I will check the instance mode and your work ! I’m coming back to give news :slight_smile:

6

@mebble thankkkkk youu it works ! And I learn somthing new ! Have a nice week !

1 Like
7

Glad I could help! Happy coding :nerd_face: