I'm a beginner! This should be an easy fix! (Gif in P5js)

Livi

Hey!

Trying to load a Gif in P5js and it's coming up with "9: Uncaught ReferenceError: Gif is not defined"

Can anyone see what I'm doing wrong?

var hoCho;
var steamGif;
var snowText;

function setup() {
  createCanvas(980, 1409);
  hoCho = loadImage("hocho.png");
  snowText = loadImage("staycosy.png");
  steamGif = new Gif("steam", 15);              <<<<<< THIS LINE!
}

function draw() {
  background(0, 0, 0);
  steamGif.draw(0, 0, 400, 400);
  image (hoCho, 100, 500, 978.4, 746.4);
  image (rainText, 300, 200, 900, 900);
}

Lord_of_the_Galaxy

Where does the Gif class (or class equivalent of JavaScript) exist? It is probably in some external library, one that you haven't included in your HTML file.
Check out this page on how to use gifs in p5.js.

Livi

@Lord_of_the_Galaxy Hey! Thanks for the comment! Ive checked out the links but my Gif has been saved as separate frames in the project folder. I've taken a few screenshots I'll attach?

Lord_of_the_Galaxy

P.S. Remove all the loadImage() from inside setup(), it should be put in preload().

Lord_of_the_Galaxy

If that is the case, you should load all the images into an array, and then play them one by one.
Example -
Loading into array:

var gif = [];
void preload(){
  //other loads
  for(var i = 0; i < 15; i++){
    gif[i] = loadImage("frame" + i + ".png");
  }
}  

Using in draw():

int index = 0;//index 
void draw(){
  //other drawing stuff
  image(gif[index], 0, 0, 400, 400);//drawn as in your code
  index++;
  if(index >= 15){
    index = 0;
  }
}  

Livi

wow thank you so much! I'll try that now! ^:)^

GoToLoop

http://p5js.SketchPad.cc/sp/pad/view/ro.COx$0Iy6rWpzsc/latest

jeremydouglass

@Livi -- in the future, keep in mind that when you write new Gif or new Foo this refers to an object of class Foo.

That is why you got the error -- you hadn't defined a special Gif class, so new wouldn't work. You just wanted to use that as a variable name.