Library import won´t work

p5.js Libraries
1

Hello I am pretty new to coding and very new to processing/p5.
I have the simple problem that if I want to include a library in my p5 project it just won´t work.
In the web editor I made it work though by simply including the “necessary line of code” in the html index file. But when ever I do this in processing with p5 mode enabled it shuts down completely.
Just to know if I get this right:
In p5 (and maybe javascript in general i dont know) you include libraries ONLY by including the line in the html file… and then thats pretty much it?
Or is there more to it? Could maybe somebody send me a simple edited html index file that only includes the p5 sound library for example?
Thanks!

2

You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code.
The <script> tag can be placed in the <head> section of your HTML, in the <body> section, or after the </body> close tag, depending on when you want the JavaScript to load.
Generally, any external libraries to be included are added in the <head> section of the HTML file. This is where you can add the p5.js library.
Your p5.js sketch can go in the <body> section as it isn’t essential to load a visual sketch before all the other elements of a webpage are loaded.

Yeah. You just need to add the <script> tag in the <head> section inorder to include that library. Basically the index.html file gathers all the relevant javascript/css/other files at one place. So you can only add javascript libraries/files only in the html file.

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js" integrity="sha512-b/htz6gIyFi3dwSoZ0Uv3cuv3Ony7EeKkacgrcVg8CMzu90n777qveu0PBcbZUA7TzyENGtU+qZRuFAkfqgyoQ==" crossorigin="anonymous"> 
    </script>
</head>
<body>
<script src="location of the p5.js sketch file"></script>
</body>
</html>

To include any p5.js related library, go to this link

Click on the </> button which will automatically copy the line which you can paste into the <head> section of the html file.
In the <script> tag, there is a src attribute where you can add the link to the library(either the CDN or local link)

This has more to do with basic html/javascript knowledge than the p5.js library. Read more about basic html tags on w3schools.

1 Like
3

Yes I had that feeling myself. Sometimes when stuff doesnt work out at all and I dont really get a lot of things at the same time its hard for me to ask the right questions!
This answer was just perfect. Will definitely check out html as well as a bunch of front end related stuff which really don´t know anything about. Thank you very much!

1 Like