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.
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.
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.
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.
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:
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’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.
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’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?
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: