(Hey I am trying to use the gif.js together with p5.js in the Processing Launcher.

I have trouble getting gif.js to work in the first place because I get the Uncaught ReferenceError: GIF is not defined so I am wondering if I have added the Library correctly. I downloaded them from Github and used them like this:

<!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="createGif.js"></script>
  <script language="javascript" type="text/javascript" src="myShader.js"></script>
  <script language="javascript" type="text/javascript" src="Larrytarium.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
  <script language="javascript" type="text/javascript" src="libraries/gif.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/gif.worker.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/ready.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/mootools.js"></script>

I am sorry but as being kinda new to all of this, I cannot really work with the minimal Information given on the official GitHub.

This is my current code (createGif.js) where the Error persists, whatever I do:

var CanvasElement = this.p5Canvas

var gif = new GIF({
  workers: 2,
  quality: 10
});

// add a canvas element
gif.addFrame(CanvasElement, {delay: 200});

gif.on('finished', function(blob) {
  window.open(URL.createObjectURL(blob));
});

gif.render();

Maybe it is just something so stupid I cannot see it after looking at it for hours :D Thanks in advance!

EDIT: To further explain: I have two main .js files with one being the p5.js File which includes all the animation and Canvas stuff and the other one is the one for gif.js which content is posted above. The HTML is empty otherwise the imports, like Processing generates it.