P5.js - not displaying static gif image

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):

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

1 Like

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

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

Thank you.

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/). 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, which seems fine.

//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

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>

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

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) (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.

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:

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:
  • 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:
<!-- 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:

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

2 Likes

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

1 Like

Thanks for trying to help me.

I used the library files from 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”. 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

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:

<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>

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

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.

Hello GoToLoop.

I’ve looked at using 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:

<!-- 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:

<!-- 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

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!

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.

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

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

Hope this helps

Tom

1 Like

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:

Your options (in order of my preference) are:

  • Run a web server on your local machine.
  • 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).
2 Likes

Thank you Sven for clearing up the situation.

1 Like