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.

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.

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.

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

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.

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.

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:

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 and Fetch API.