Issue with defining functions from a p5 example

parabyte

Hey all,

I've been experimenting with the reference/play section of the p5 library and have tried to emulate this example (http://p5play.molleindustria.org/examples/index.html?fileName=sprite5.js#)

However, I keep getting 2 reference errors: "allSprites is not defined" then "createSprite" is not defined.

Any ideas why or how these are not defined?

    //Accessing and deleting sprites
    //click to create new sprites

    var GRAVITY = 0.2;

    function setup() {
      createCanvas(800,400);  
    }

    function draw() {
      background(255,255,255);  

      fill(0);
      textAlign(CENTER);
      text("Click to create a new sprite", width/2, height-20);

      //the best way to organize sprites is to use a custom group (see Group class)
      //however, all sprites are automatically added to a default group allSprites
      //that you can access like a normal array of objects

      for(var i=0; i<allSprites.length; i++)
        {
        var mySprite = allSprites[i];

        //adding a speed at 90 degrees (down)
        //equivalent to: mySprite.velocity.y += GRAVITY;
        mySprite.addSpeed(GRAVITY, 90);

        //even if they are out of the canvas, sprites keep getting updated
        //consuming precious memory
        //use Sprite.remove() to remove a sprite from the sketch
        if(mySprite.position.y > height + 100)
          mySprite.remove();
        }

      //if(frameCount%10 == 0)
        //print("Sprite in the scene: " +allSprites.length);

      //draw the sprites
      drawSprites();
    }

    //every mouse press
    function mousePressed() {
      //I create a sprite at mouse position
      var newSprite = createSprite(mouseX, mouseY);

      //assign an animation
      newSprite.addAnimation("normal","images/man.jpg", "images/man2.jpeg");

      //and set it to a random frame
      newSprite.animation.stop();
      var f = round(random(0, newSprite.animation.getLastFrame()));
      newSprite.animation.changeFrame(f);
    }

KevinWorkman

Well, where are you defining allSprites and drawSprites()?

parabyte

I thought it would be defined if I placed it inside function draw - drawSprites on line 40 and allSprites on line 23. Do they both need to be global variables in order for it to be declared? ( var allSprites = []; )

jeremydouglass

Edit: Oops! I thought this was a beginning programming question, but it looks like a library linking question.

The crucial thing I was missing here is that your example is not from the "p5 library" -- it is from the playp5 library. As per molleindustria's Getting Started, you need to link p5.play.js in order for that code to work. That's (probably?) why it can't find drawSprites().

---

---

@parabyte -- your line 40 drawSprites(); is not a variable -- it is a function call. Your line 40 says: "Now go find the place in the code marked function drawSprites() and execute those lines of code."

drawSprites();

So, the computer asks: "Where are you defining drawSprites()?" Fix this by creating a function and defining it.

Your line 23 is declaring a variable mySprite. It does it in terms of an array allSprites. So, the computer asks: what's an allSprites? This is as if I told you "Benjamin is a flurdle." So, you say, ok, now I know that there is someone named Benjamin, but what's a flurdle? Fix this by declaring allSprites -- probably as a global variable so that it doesn't get recreated every draw loop.

var mySprite = allSprites[i];

Some helpful information on the idea of a function vs. a variable in Processing:

• https://processing.org/tutorials/overview/
• https://processing.org/tutorials/anatomy/

Your code has some other problems. You may want to start with simple examples, check that they are running, and then change one or two things -- gradually -- and check that they are still running! When something breaks, stop to figure out why.

khazardous

Did you make sure to add the line to your index.html?