# P5.js - not displaying static gif image

**URL:** <https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948>\
**Category:** Coding Questions\
**Created:** [May 16, 2020, 7:33pm UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948 "2020-05-16T19:33:27Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 16, 2020, 7:33pm UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/1 "2020-05-16T19:33:27Z")

</div>

```auto

```

Hello everyone.

Please may you help me.

I am learning p5.js by going through the book by Lauren McCarthy titled “Make: Getting Started with p5.js” and I have become stuck with Example 7-4 on page 108. Basically the gif did not appear but I did get the background.

I’ve searched online for solutions but totally stuck.

The web editor for p5.js shows an example of loading gif images, which worked well enough. However, after downloading it and running it by various methods I could only see animation and not the static first image. I can see jpg and png images absolutely fine but loading gif images simply does not work for me.

Here is the code I found from the p5.js web editor (ive added comments):

```auto
var gif_loadImg, gif_createImg;

function preload() {
  gif_loadImg = loadImage("vegetables.gif");
  gif_createImg = createImg("vegetables.gif");
}

function setup() {
  createCanvas(500, 700);
  background(0);
}

function draw() {
  // loads only first frame
  image(gif_loadImg, 50, 50); //this just does not happen in any of my browsers!!!
  
  // updates animation frames by using an html
  // img element, positioning it over top of
  // the canvas.
  gif_createImg.position(50, 350); //this works fine!!
}

Just to test things out I did run some Processing 3 code to do the same thing to try to load gif images. I found that Processing 3 code will work absolutly fine using the Processing 3.5.4 IDE, and I can load gif files. So the following code is fine and does what I expect it should:

PImage img;

void setup() {
  img = loadImage("laptop.gif");
}

void draw() {
  background(0);
  image(img, 0, 0);
}

```

I am just getting nowhere trying to load gif images using p5.js and I would very much appreciate any help.

Thank you,  
Chrissy Swain

```auto

```

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 16, 2020, 7:51pm UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/2 "2020-05-16T19:51:29Z")

</div>

Sorry. I should have added that the example via the p5.js editor is this one, which works fine: [https://editor.p5js.org/kjhollen/sketches/rysbqThnX](https://editor.p5js.org/kjhollen/sketches/rysbqThnX)

What does not work is running the same sketch from my local machine.

Thank you.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 16, 2020, 8:12pm UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/3 "2020-05-16T20:12:46Z")

</div>

> [@Chrissy](#):
>
> What does not work is running the same sketch from my local machine.

> [@Maximum size of a method in Processing](https://discourse.processing.org/t/maximum-size-of-a-method-in-processing/17136/29):
>
> Another workaround: [Chrome-allow-file-access-from-file.com](http://Chrome-allow-file-access-from-file.com) A more complete solution: More solutions: [GitHub.com/processing/p5.js/wiki/Local-server](http://GitHub.com/processing/p5.js/wiki/Local-server)

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 17, 2020, 8:44am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/4 "2020-05-17T08:44:11Z")

</div>

Hello. I am still experiencing problems.

As far as I can tell, and i’ve hopefully set it up correctly, when I execute code to display static gif images, the program runs through a server.

I’ve tried Processing IDE 3.5.4 using p5.js mode. When I execute a script through that it appears in a web browser with the URL as local IP address ([http://127.0.0.1:8325/](http://127.0.0.1:8325/)). So that seems fine.

I’ve also been using ATOM, with the p5js-toolbar plug-in. When I run the following code it appears in the browser with the URL of [http://localhost:8000/index.html](http://localhost:8000/index.html), which seems fine.

```auto
//SCRIPT=
var img;

function preload() {
    img = loadImage('laptop.gif');
}

function setup() {
  createCanvas(480,120);
}

function draw() {
  background(204);
  image(img, 0, 0);
  image(img, 0, mouseY * -1);
}

```

I also set privacy.file\_unique\_origin to false in firefox as you suggested, but nothing changed. I still get a background but the gif does not appear on the screen.

Any further help would be gratefully received.

Thank you  
Chrissy Swain

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 17, 2020, 8:46am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/5 "2020-05-17T08:46:19Z")

</div>

```auto
Sorry the html (index.html) which I used in ATOM is this =

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <script src="libraries/p5.accessibility.js"></script>
  <script src="p5.sound.min.js"></script>
  <script src="p5.gif.min.js"></script>
  <script src="p5.gif.js"></script>
  <script src="p5.min.js"></script>
  <script src="p5.js"></script>
  <script src="sketch.js"></script>
</head>

<body>
</body>

</html>

```

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 17, 2020, 8:50am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/6 "2020-05-17T08:50:46Z")

</div>

Is there any further information needed to resolve this problem? I am still not sure why gif images do not appear in any browser on my local machine. Any help will be gratefully received.

Thank you,  
Chrissy Swain

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 17, 2020, 1:36pm UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/7 "2020-05-17T13:36:10Z")

</div>

Hello Everyone,

I somehow got this working: “Example 7-4: Transparency with a Gif”. I then stepped through everything in detail and narrowed the problem right down to the latest p5.min.js library, which I got from p5.js website (here: [https://github.com/processing/p5.js/releases/download/1.0.0/p5.zip](https://github.com/processing/p5.js/releases/download/1.0.0/p5.zip)) (accessed 17 May 2020 14:00 GMT).

I am so new to p5.js that I don’t think I can actully work out which part of p5.min.js is causing me a problem but I have got hold of another, older version, of p5.min.js that allows me to run the code successfully.

Please may someone investigate why the latest p5.min.js file doesn’t allow me to successfully execute Example 7-4, or similar programs that display single static gif images.

Thank you.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 18, 2020, 12:52am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/8 "2020-05-18T00:52:43Z")

</div>

> [@Chrissy](#):
>
> I’ve also been using Atom, with the “p5js-toolbar” plug-in.

For Atom I use “atom-live-server-plus” + “tool-bar” plugins in order to get a button to open a local server on a browser for the current project folder:

> **[GitHub - richiksc/atom-live-server-plus: Enhanced version of...](https://github.com/richiksc/atom-live-server-plus)**
>
> Enhanced version of jas-chen/atom-live-server. Launch a HTTP server with live reload capability. - GitHub - richiksc/atom-live-server-plus: Enhanced version of jas-chen/atom-live-server. Launch a H...

> **[GitHub - atom-community/tool-bar: Package providing customisable toolbar for...](https://github.com/atom-community/tool-bar)**
>
> Package providing customisable toolbar for Atom. Contribute to atom-community/tool-bar development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 18, 2020, 1:11am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/9 "2020-05-18T01:11:02Z")

</div>

> [@Chrissy](#):
>
> I am still not sure why gif images do not appear in any browser on my local machine.

Some notes about your posted “index.html” file:

- You’re loading the same library 2 times: the unmodified & minimized versions.
- That is, “p5.js” + “p5.min.js”, “p5.gif.js” + “p5.gif.min.js”. Should pick 1 or the other:

> [@P5.js vs p5.min.js; Which one should I use?](https://discourse.processing.org/t/p5-js-vs-p5-min-js-which-one-should-i-use/19920/2):
>
> “p5.js” - use for development: \<script async src=https://Unpkg.com/p5\>\</script\> \<script defer src=sketch.js\>\</script\> “p5.min.js” - use for deployment: \<script async src=https://cdn.JsDelivr.net/npm/p5\>\</script\> \<script defer src=sketch.js\>\</script\>

- And a more serious 1: you’re loading p5.js addon libraries before the p5.js main library!
- Here’s their correct order for each category:

```auto
<!-- p5.js main library: -->
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<!-- p5.js addon libraries: -->
<script defer src=https://Unpkg.com/p5/lib/addons/p5.sound.min.js></script>
<script defer src=https://cdn.JsDelivr.net/p5.gif.js/latest></script>
<script defer src=https://cdn.JsDelivr.net/gh/processing/p5.accessibility/dist/p5.accessibility.min.js></script>

<!-- p5.js sketch code: -->
<script defer src=sketch.js></script>

```

- And below an online example along w/ its source code:

https://glitch.com/embed/#!/embed/gif---p5-accessibility?path=sketch.js&previewSize=0&sidebarCollapsed=true

> [@Chrissy](#):
>
> I also set “privacy.file\_unique\_origin” to `false` in Firefox as you suggested, but nothing changed.

I’ve tested my own online example locally on Firefox under the “file://” scheme and it runs OK.

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 18, 2020, 10:55pm UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/10 "2020-05-18T22:55:24Z")

</div>

Thank you for your advice about the Packages that you use. I have installed these, which you have suggested, and started using them.

Thank you,  
Chrissy

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 18, 2020, 11:22pm UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/11 "2020-05-18T23:22:33Z")

</div>

> [@GoToLoop](#):
>
> `cdn.JsDelivr.net`

Thanks for trying to help me.

I used the library files from [https://www.jsdelivr.com/](https://www.jsdelivr.com/) in my code just as you showed them in your html file. Unfortunately I experienced the same problem of the gif not displaying. I stripped down my html file also to just use the latest p5.js file and that didn’t solve the problem. I have found out that both the p5.js file and the p5.min.js file neither solve the problem of displaying a single gif image.

What I believe does work is the p5.js file (and p5.min.js file) that accompanies the Generative Design book, which is found here: “[https://github.com/generative-design/Code-Package-p5.js/archive/v1.1.0.zip](https://github.com/generative-design/Code-Package-p5.js/archive/v1.1.0.zip)”. I’ve not had problems with that.

I’d like to know if anyone else has succeeded in using the latest p5.js and p5.min.js files to get Example 7-4, from Lauren McCarthy’s book, to work on their local PC without problems.

Thank you so much for trying to help me with this.

Best regards,  
Chrissy Swain

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 19, 2020, 12:14am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/12 "2020-05-19T00:14:56Z")

</div>

> [@Chrissy](#):
>
> the p5.js file (and p5.min.js file) that accompanies the Generative Design book,

I’ve found `/*! p5.js v0.7.2 September 02, 2018 */` from that big file.  
We can choose which version we want from a CDN link btW:

```auto
<script defer src=https://cdn.JsDelivr.net/npm/p5@0.7.2></script>
<script defer src=https://Unpkg.com/p5@0.7.2/lib/addons/p5.dom.min.js></script>
<script defer src=sketch.js></script>

```

> [@Chrissy](#):
>
> … succeeded in using the latest “p5.js” and “p5.min.js” files to get Example 7-4, from Lauren McCarthy’s book, to work on their local PC without problems.

I don’t have that book. As any JS code, it’s best to host it online so others can have a look.

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 19, 2020, 9:59am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/13 "2020-05-19T09:59:53Z")

</div>

> [@GoToLoop](#):
>
> I don’t have that book. As any JS code, it’s best to host it online so others can have a look.

Hello GoToLoop.  
There is a pdf copy of the book online, which can be found here:  
[http://people.uncw.edu/tompkinsj/112/JavaScript/GettingStartedwithP5js.pdf](http://people.uncw.edu/tompkinsj/112/JavaScript/GettingStartedwithP5js.pdf)

This is the code found in the book:  
var img;  
function preload() {  
img = loadImage(“clouds.gif”);  
}  
function setup() {  
createCanvas(480, 120);  
}  
function draw() {  
background(204);  
image(img, 0, 0);  
image(img, 0, mouseY \* -1);  
}

I believe Lauren McCarthy’s book is a really good starting point to learn p5.js but it’s a shame I can’t get the code to run with the latest p5.js javascript library.

I will look into using CDN in more detail.

Thank you once again.

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 19, 2020, 10:37am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/14 "2020-05-19T10:37:27Z")

</div>

> [@GoToLoop](#):
>
> I’ve found `/*! p5.js v0.7.2 September 02, 2018 */` from that big file.  
> We can choose which version we want from a CDN link btW:

Hello GoToLoop.

I’ve looked at using [jsdelivr.com](http://jsdelivr.com) URLs in my html file. It looks like a good way of doing things instead of using a local version of the file. Sometimes I am not connected to the internet so I will still need to ensure I have the option of using locally stored URLs.

Anyway looking at my problem,  
using this in my html file works:

```auto
<!-- p5.js main library: -->
<script defer src=https://cdn.jsdelivr.net/npm/p5@0.7.2/lib/p5.js></script>

```

and using this in my html file results in an error:

```auto
<!-- p5.js main library: -->
<script defer src=https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js></script>

```

So, please may you concur with me that the latest core libraries have some sort of error that prevents gif images from being displayed correctly?

Thank you,  
Chrissy Swain

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 19, 2020, 11:45am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/15 "2020-05-19T11:45:29Z")

</div>

> [@Chrissy](#):
>
> and using this in my html file results in an error:

Just saying the word error w/o describing its full message doesn’t help much.

Regardless, seems like recent changes on how **loadImage()** treats GIF files now makes it incompatible w/ some of them.

As an example, the GIF file “vegetables.gif” from your posted online sketch crashes on my code when invoking **image()** for it!

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [May 19, 2020, 11:08pm UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/16 "2020-05-19T23:08:46Z")

</div>

> [@GoToLoop](#):
>
> Just saying the word error w/o describing its full message doesn’t help much.

The error (the mistake that has been made in coding) is that the gif, described in Lauren McCarthy’s book (page 108, Example 7-4), will not load whilst using the latest p5.js or p5.min.js library files.

So, I guess I now need to try to work out how to formally report this error in the p5.js defect reporting system. I would like to find out if anybody else has found this specific issue with trying to run McCarthy’s code.

Thank you.

---

<div class="post-metadata">

**Author:** ![everythingability](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/everythingability/32/937_2.png) [@everythingability](https://discourse.processing.org/u/everythingability)\
**Post date:** [May 21, 2020, 8:50am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/18 "2020-05-21T08:50:32Z")

</div>

I hope my personal experience might help.

The BEST way to work with gifs is to manipulate the DOM, so creating web elements with createImg() and then they animate fine. Loading with loadImage() will never work. This way of working means you don’t really need a canvas so sort of loses all the benefits of p5js really. I avoid gifs.

A library worth exploring is p5Play which lets you use sprite lists, and so as well as animation, you also get other really handy routines such as collision detection, or click detection etc.

Here’s an example/experiment of mine.  
[https://editor.p5js.org/remarkability/sketches/Yx\_MacZ1](https://editor.p5js.org/remarkability/sketches/Yx_MacZ1)

You can find tools to turn gifs into a series of pngs.

Hope this helps

Tom

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 21, 2020, 10:55pm UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/19 "2020-05-21T22:55:54Z")

</div>

Hello @Chrissy,

In relation to the age of the p5.js project and speed of development, that book is pretty old (2015). It is reasonable to expect some compatibility issues when running code examples from that time on the latest version of the p5.js library.

That said: the example does work fine as long as you serve the sketch via a web server (not from the local file system). I recently explained why it isn’t working locally in another thread:

> [@Looking for help downloading from editor with interactive sketch](https://discourse.processing.org/t/looking-for-help-downloading-from-editor-with-interactive-sketch/20669/3):
>
> This has to do with how `loadImage` and `loadSound` are implemented. The functions use something called Fetch API and have that configured in such a way that downloading of files isn’t allowed locally. Believe it or not, it’s related to security.
> 
> There’s not much you can do about it really (except patching p5.js). Running a web server (locally or elsewhere) as you did is the way to go.
> 
> If you’re interested in the technical details, read up on [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) and [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

Your options (in order of my preference) are:

- [Run a web server on your local machine](https://github.com/processing/p5.js/wiki/Local-server).
- Configure your web browser to allow access to local files (if that’s supported in your browser).
- Run an older version of the p5.js library (as you figured out yourself).
- Avoid `loadImage` as a workaround (as @everythingability suggested).

---

<div class="post-metadata">

**Author:** ![Chrissy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrissy/32/6659_2.png) [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Post date:** [June 18, 2020, 10:02am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/20 "2020-06-18T10:02:50Z")

</div>

Thank you Sven for clearing up the situation.