How to play multiple of a gif in in different positions each loop?

p5.js Coding Questions
1

So what I’m trying to do is play a 5 frame gif of a star I made in multiple random positions. And every time the gif is finished playing it then plays in a new random position.
This is the code I current have

// Variable setups
let imagePath = 'assets/star.gif'
let randomPosX;
let randomPosY;
let numOfStars = 0;
let starGif;


// Preloads the star image
function preload() {
  starGif = loadImage(imagePath);
}

// Setup the canvas, resizes the gif, and sets a random position 
function setup() {
  createCanvas(windowWidth, windowHeight);
  starGif.resize(30, 0)
  randomPosX = random(width)
  randomPosY = random(height)
}

// Every frame: draws the background, then a loop adds 20 stars to the canvas in random positions. 
function draw() {
  background(0);

  for (let numOfStars = 0; numOfStars < 20; numOfStars++) {
    image(starGif, randomPosX, randomPosY)

    if (starGif.getCurrentFrame() === 5) {
        starGif.reset()
        randomPosX = random(width)
        randomPosY = random(height)
    }

  }
}

The problem I assume I’m having is that it is actually drawing 20 different stars but in the same position each time. Because when I run the code it works but it looks like there is only 1 star.
I’m new to p5 and JS. I’m guessing I have to do something with arrays or objects but I’m not quite sure.

2

Hello @LuluLuna

If I am reading your question correctly…
You want 20 stars, in 20 random positions?

If so, you should move:

out of setup(), and into draw().

Setup runs only once, so your random number is selected only once in setup, Then the same position is used each time a star is placed. Draw is always looping, so with each loop a new random number is chosen, and each star is placed in a new random position.

Hopefully this helps!
:nerd_face:

3

Sorry if I didn’t word my question that well. I don’t want a new position every frame I want a new position every time the gif reaches frame 5 which I already have and that code already works. But the problem is that there is only 1 star that is drawn and not 20 of them.