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

**URL:** <https://discourse.processing.org/t/how-to-play-multiple-of-a-gif-in-in-different-positions-each-loop/30920>\
**Category:** Coding Questions\
**Created:** [June 26, 2021, 12:01am UTC](https://discourse.processing.org/t/how-to-play-multiple-of-a-gif-in-in-different-positions-each-loop/30920 "2021-06-26T00:01:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![LuluLuna](https://avatars.discourse-cdn.com/v4/letter/l/87869e/32.png) [@LuluLuna](https://discourse.processing.org/u/LuluLuna)\
**Post date:** [June 26, 2021, 12:01am UTC](https://discourse.processing.org/t/how-to-play-multiple-of-a-gif-in-in-different-positions-each-loop/30920/1 "2021-06-26T00:01:57Z")

</div>

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

```auto
// 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.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 26, 2021, 12:25am UTC](https://discourse.processing.org/t/how-to-play-multiple-of-a-gif-in-in-different-positions-each-loop/30920/2 "2021-06-26T00:25:47Z")

</div>

Hello @LuluLuna

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

**If so, you should move:**

> [@LuluLuna](#):
>
> ```auto
> randomPosX = random(width)
> randomPosY = random(height)
> 
> ```

**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!  
🤓

---

<div class="post-metadata">

**Author:** ![LuluLuna](https://avatars.discourse-cdn.com/v4/letter/l/87869e/32.png) [@LuluLuna](https://discourse.processing.org/u/LuluLuna)\
**Post date:** [June 26, 2021, 12:30am UTC](https://discourse.processing.org/t/how-to-play-multiple-of-a-gif-in-in-different-positions-each-loop/30920/3 "2021-06-26T00:30:36Z")

</div>

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.