How can I upload GIF in P5.image

p5.js Beginners
1

I want to upload gif in image() but it is not getting rendered. I am saving a gif in asset folder from which it is taking other img, png file but it is not loading gif file.

2

The below code works for using a gif in p5.js

let gifLoadImage;
function preload(){
  gifLoadImage = loadImage("file_name.gif");
}
function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
//   load only first frame
  image(gifLoadImage,0,0);
}

The loadImage() function loads an image and create a p5.Image from it. You can get more information regarding that on reference | p5.js.
A live demo of the above code → p5.js Web Editor

3

Hi, @rt1301. Thank you so much for your help. I am new to p5.web-editor. Can you please tell me how I can upload a new GIF into this?

4

@Shubham In my above code example, all you need to do is replace the “file_name.gif” in loadImage() function with the path where you have stored your gif file. Eg. If you have uploaded your gif file in assets folder, simply put assets/file_name.gif in the loadImage() method and your gif will get rendered.


For uploading a new file, there will be an upload option in the down arrow next to Sketch tab(which contains all the files of your project). The upload option will only get shown if you are logged in the p5.js editor.

1 Like
5

Ohh, Thanks @rt1301 again for your kind reply!!

1 Like