# Loop gif n number of times?

**URL:** <https://discourse.processing.org/t/loop-gif-n-number-of-times/27449>\
**Category:** Coding Questions\
**Created:** [January 28, 2021, 11:15pm UTC](https://discourse.processing.org/t/loop-gif-n-number-of-times/27449 "2021-01-28T23:15:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mweinberg](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mweinberg](https://discourse.processing.org/u/mweinberg)\
**Post date:** [January 28, 2021, 11:15pm UTC](https://discourse.processing.org/t/loop-gif-n-number-of-times/27449/1 "2021-01-28T23:15:31Z")

</div>

Hi everyone! I’m trying to figure out how to loop a gif a specific number of times, after which it stops at the first frame.

I know that I can stop and pause a gif with play() ([reference | p5.js](https://p5js.org/reference/#/p5.Image/play)) and manipulate the speed of the gif with delay() (I can’t include a third link in this post but I can post the link in a response if it is relevant).

My main goal is to modify the input example ([examples | p5.js](https://p5js.org/examples/dom-input-and-button.html)) so that after a user clicks the submit button the greet() function loops the gif the number of times that corresponds to the number that the user entered into the field. I think I have most of it figured out, but I can’t quite figure out how to deal with the gif looping.

Any ideas or pointers would be most welcome.

thank you!

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 4, 2021, 12:35am UTC](https://discourse.processing.org/t/loop-gif-n-number-of-times/27449/2 "2021-02-04T00:35:24Z")

</div>

Hi,

In the [documentation](https://p5js.org/reference/#/p5.Image), you also have those methods :

- [`p5.Image.getCurrentFrame()`](https://p5js.org/reference/#/p5.Image/getCurrentFrame)
- [`p5.Image.numFrames()`](https://p5js.org/reference/#/p5.Image/getCurrentFrame)

But with those, it’s going to be tedious to get the number of repetitions since the current number of frame loops constantly.

```auto
p5.Image.prototype.getCurrentFrame = function() {
  if (this.gifProperties) {
    const props = this.gifProperties;
    return props.displayIndex % props.numFrames;
  }
};

```

I looked at the source code and I found that you can access the actual number of frames played since the beginning :

```auto
gif.gifProperties.displayIndex

```

So then it’s easy :

```auto
let nRepetitions;

function setup() {
  // The number of repetitions of the gif
  nRepetitions = getUserInput();

  gif.play();
}

function draw() {
  // Stop the gif if reached the number of repetitions
  if (gif.gifProperties.displayIndex % gif.numFrames() >= nRepetitions) {
    gif.stop();
  }
}

```

---

<div class="post-metadata">

**Author:** ![mweinberg](https://avatars.discourse-cdn.com/v4/letter/m/e19b73/32.png) [@mweinberg](https://discourse.processing.org/u/mweinberg)\
**Post date:** [February 5, 2021, 12:35am UTC](https://discourse.processing.org/t/loop-gif-n-number-of-times/27449/3 "2021-02-05T00:35:16Z")

</div>

Amazing! Thank you so much!