How can I store different loadgif in an different instances of an object?

GregNiemeyer · September 2016

I have this code here to create objects with gifs, and it all works well until I try to make this.gif different for each object.

function setup() { createCanvas(800, 600); //make objects

for (var i=0; i<8; i++) { x.push(new Track(i*50.0, 0.0)); x[i].gif = loadGif('gif/flower78.gif'); // why not with many different gifs? } }

where the Track object looks like this:

//define object= function Track(px, py){ this.xpos = px; this.ypos = py; this.xspeed = 0.0;
this.yspeed = 0.0; this.name = 0; this.gif;

this.load = function() { this.gif = loadGif('gif/flower'+this.name+'.gif'); } this.display = function() { image(this.gif, this.xpos, this.ypos); } }

GoToLoop · September 2016

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

https://forum.Processing.org/two/discussion/16053/p5-gif-question#Item_1

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

GregNiemeyer · September 2016

Thanks @gotoloop here is my entire code properly formattted:

    <html>
      <head>
        <script type='text/javascript' src='js/p5.min.js'></script>
        <script type='text/javascript' src='js/p5.gif.js'></script>
        <style>
          html, body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            background:white;
          }
        </style>
        <script>
    //variables
    var x = []; 
    var y = []; 

    function setup() {
      createCanvas(800, 600);
      //make objects

      for (var i=0; i<8; i++) {
        x.push(new Track(i*50.0, 0.0));
        x[i].gif = loadGif('gif/flower78.gif');
        // why not with many different gifs? 
      }
    }

    function draw() {
      background(128, 128, 128, 10);
        for (var i=0; i<8; i++) {

              if (x[i].gif.loaded()) {
                    x[i].display(); 
                }
        //x[3].display(); 
    }
    }

    //define object=
    function Track(px, py){ 
      this.xpos = px; 
      this.ypos = py; 
      this.xspeed = 0.0;  
      this.yspeed = 0.0; 
      this.name = 0;
      this.gif;

      this.load = function() {
        this.gif = loadGif('gif/flower'+this.name+'.gif');
      }
      this.display = function() {
        image(this.gif, this.xpos, this.ypos);
      }
    }
        </script>
      </head>
      <body>
      </body>
    </html>

and yes, I am loading p5 before anything else... but still, all instances of the object only work if they show the same image. Can you advise me how to show an array of gifs via object?

GregNiemeyer · September 2016

It seems like some gifs load well and others cause the page to crash.

GregNiemeyer · September 2016

indeed here is an example of a valid gif file that will not load and will cause the program to crash:

http://www.gifcollider.com/giftest.html

url for gif file alone:

http://www.gifcollider.com/gif/flower65.gif

Howdy, Stranger!

Categories

In this Discussion

How can I store different loadgif in an different instances of an object?

Answers