1. How to load p5.play into code editor

 There are two (2) ways to load p5.play into your code editor:

 1. Use a CDN (link an online p5.play)

        This method has advantages and disadvantages:

    • no downloading files
    • need a decent internet connection when using it
If you are using the p5 web editor put this script tag into the <head> section of the index.html file:

<script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script>

The <head> section should look something like this:


For CDNs, the src of each <script> is the website address for each JavaScript file.  

If you are not using the p5 web editor and using another code editor (like VS Code), you will need a CDN for p5 and p5.play.

You can find a CDN for p5.js here: https://cdnjs.com/

2. Download p5.play and put it into code editor directory

You can download the p5.play library from here:  https://molleindustria.github.io/p5.play/

The folder is compressed, so you will have to extract the files.  Right-click the folder and click on "Extract".  

The bonus with this method is that the folder includes many code examples, sprite images and sprite sheets in the "examples" folder.

The file you need (p5.play.js) is in the "lib" folder.  You can drag and drop or put the file into your code editor.

You will also need p5.js in your code editor.  You can download p5.js or p5.min.js here: https://p5js.org/download/.  p5.min.js is just a compressed version of p5.js.  Both work well.

You will need to link p5.js and p5.play.js in the <head> section of your html file with <script> tags.  

The script tags contain the location (file path) of p5.js and p5.play in your code editor directory.  

For example:


p5.min.js and p5.play.js are located in my "libraries" folder.

The path to these files in the script tags is the libraries folder and then the file name (src = "libraries/p5.play.js").

Now you are ready to use p5.play!


 


 

Comments

Post a Comment