[ SOLVED ] How to import Collide2D

p5.js Libraries
1

Hello, I am trying to import Collide2D by @bmoren into my p5js project. I added the rawgithubcontent link to the minified library in my index.html, but it didn’t import properly. How do I properly import it?
Here is my current index.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
    <script src="https://raw.githubusercontent.com/bmoren/p5.collide2D/master/p5.collide2d.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="child.js"></script>
    <script src="mace.js"></script>
  </body>
</html>
1 Like
2

And here’s mine: :stuck_out_tongue:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=https://cdn.JsDelivr.net/gh/bmoren/p5.collide2D/p5.collide2d.min.js></script>
<script defer src=sketch.js></script>

And an online running sketch too: :running_man:

2 Likes
3

this is likely because the raw version that github sends is encoded as plain text and is subject to MIME type sniffing. basically, we need to see this as a js file instead of a text file when it hits the browser.

more info here:


example from the JS console:

23%20AM
Screen Shot 2019-08-31 at 8.55.23 AM.png3810×128 36.2 KB

try using a CDN service like GoToLoop suggested, or download the file and include it in your sketch locally!

2 Likes
4

Thanks for the link, helps a lot!

5

Ooh, okay, that makes sense. I looked up how to import a library and saw someone use a rawgithubcontent link before so I figured it would work for me. Thanks for explaining it!