How to use p5.js?

Hey, i have wandered if i can use p5.js on glitch, and i really hope so.
My only problem is i don’t know how to install/make p5.js work in glitch.
I tried downloading the npm (npm i p5) and i tried to install the p5.js file into my website page.
Unfortunately, it did not work.
Can you guys help me?
my project: https://glitch.com/edit/#!/happyweb?path=views/snake/snake.html:5:33 (i think it sends you to the page path, if not, it is views/snake/snake.html)
The website link is: https://happyweb.glitch.me/snake

Hey @happyNight21,

Check out the project Glitch :・゚✧ where I have created a basic p5.js project. You can remix it and use the project. In that project, everything is on client side and there is no need to install the npm package.

i mean, it is really nice i can remix this and thank you very much, but how do i install p5 for an existing project?

All you need is a index.html, script.js and a style.css (if you want to style page). Then in your index.html, add a <script> tag before the closing </body> tag with the href towards p5.js CDN. Like this:

<script src="https://cdn.jsdelivr.net/npm/p5"></script>

Then, in the script.js, add all the p5.js code you want. You might see errors saying that some functions such as createCanvas() is not defined, but you should ignore it as it it caused by the code linting.

This is completely front end and there is no need for Node.js or to install the npm package!

May I ask what the error was (if any)?

Yep! If you can’t use node, use a node CDN!

p5.js is completely front end based as it consists of creating and manipulating canvases based on user input and other parameters. And p5.js is completely front-end! But if you use the npm package, you can use it to generate the files you need to create a p5.js project. You can read more about it here: https://github.com/processing/p5.js/wiki/p5.js,-node.js,-socket.io

1 Like

Okay, it would do well in our symbian-revival project!

Symbian OS revival

You saved me (:
i also think it was really working at first now that you say it shows error xd

1 Like