# Short 5 second .PNG animation

**URL:** <https://discourse.processing.org/t/short-5-second-png-animation/27664>\
**Category:** Coding Questions\
**Created:** [February 8, 2021, 3:39am UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664 "2021-02-08T03:39:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Huber542](https://avatars.discourse-cdn.com/v4/letter/h/34f0e0/32.png) [@Huber542](https://discourse.processing.org/u/Huber542)\
**Post date:** [February 8, 2021, 3:39am UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/1 "2021-02-08T03:39:48Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hey everyone!  
I’m VERY new, I’ve been assigned a small task of creating a moving animation. So what I decided I’d do is create some frames in photo shop 500x500 pixels and play them in processing as a sequence. I for the life of me can not get the language right haha. basically I am trying to create a gif with the images i’ve drawn already in PS.

Rob  
int numFrames=5;  
PImage img = new PImage[5];

//Shooting Star frame Array  
void setup(){  
size(500,500);  
frameRate(5);  
img[0]=loadImage(“NightSky0.png”);  
img[1]=loadImage(“Nightsky1.png”);  
img[2]=loadImage(“Nightsky2.png”);  
img[3]=loadImage(“Nightsky3.png”);  
img[4]=loadImage(“NightSky0.png”);

}

// Frames of shooting star moving from left to right  
void draw() {  
background(img[0]);

---

<div class="post-metadata">

**Author:** ![WeinSim](https://avatars.discourse-cdn.com/v4/letter/w/db5fbb/32.png) [@WeinSim](https://discourse.processing.org/u/WeinSim)\
**Post date:** [February 8, 2021, 11:09am UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/2 "2021-02-08T11:09:45Z")

</div>

The way you have your code here is not too bad, just two minor tweaks.

First, It looks like you load “NightSky0.png” into the last element of the array, it should probably be “NightSky4.png”.

And second, In your code, you always use the `img[0]` as the background, but you would want to advance by one image on each frame. Processing has an internal variable called `frameCount`, which starts at 1 and automatically increases by 1 every frame. You could use this as the index into `img[]`, but it would start at index 1 and not 0, and on frame 5 you will have an `ArrayIndexOutOfBoundsException` (since the array has a length of 5, so `img[4]` refers to the last element, and anything beyond that isn’t defined). To fix the first problem, just subtract 1 from `frameCount`, and to fix the second problem, modulo the result by 5. In case you are not familiar with the modulo operation, it returns the remainder of a division (and is written as a `%` sign in Java), so 2%5 = 2, 8%5 = 3, 10%5=0 and so on.  
In total, it should look something like this:

```auto
void draw() {
  background(img[(frameCount-1)%numFrames]);
}

```

Furthermore, you could write the `setup()` method more efficiently. `img[]` should always have the length `numFrames`, so you should declare it like this:

```auto
PImage [] img = new PImage[numFrames];

```

You could also automate the image loading process with a `for()` loop (see [for \ Language (API) \ Processing 3+](https://processing.org/reference/for.html) for a reference). Basically, element `n` of `img[]` should contain `"NightSky-n-.png"`. In Processing, you would write it like this: `img[n] = loadImage("NightSky" + str(n) + ".png");` (using `+` to join to Strings together and `str()` to convert an `int` to a `String`). Combining this with a `for()` loop, it would look like this:

```auto
for (int i=0; i<numFrames; i++) {
  img[i] = loadImage("NightSky" + str(i) + ".png");
}

```

Now, you only have to change `numFrames`, and the rest changes with it. Reducing redundancy in your code is always a good practice.

I don’t know what all these images look like that you want to display, but I’m pretty sure there is some way to render the images in Processing directly, without using Photoshop. That would probably be pretty advanced, depending on what the images are. Look up [https://procesing.org/reference](https://procesing.org/reference) to see an overview of all the methods there are, you could probably find something there. If it is just a star moving across the screen, then the following methods are probably all you need:  
`background()`, `stroke()`, `strokeWeight()`, `fill()`, `translate()`, `rotate()`, `scale()`, `beginShape()`, `vertex()`, `endShape()`

I hoped this helped you, and feel free to send over the images you want to display.

Simon

---

<div class="post-metadata">

**Author:** ![Huber542](https://avatars.discourse-cdn.com/v4/letter/h/34f0e0/32.png) [@Huber542](https://discourse.processing.org/u/Huber542)\
**Post date:** [February 8, 2021, 5:57pm UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/3 "2021-02-08T17:57:27Z")

</div>

![Nightsky1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e8be99d3f65080b51e58d755811f4246bd0b792a.jpeg)

Thank you very much, I feel like I am getting close to what I am trying to do. basically what I am trying to do, is flip through the images at a speed that gives me the illusion of motion. This will make the stars twinkle and the shoot star move across the image right? I guess I am trying to make a .gif

---

<div class="post-metadata">

**Author:** ![Huber542](https://avatars.discourse-cdn.com/v4/letter/h/34f0e0/32.png) [@Huber542](https://discourse.processing.org/u/Huber542)\
**Post date:** [February 8, 2021, 5:58pm UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/4 "2021-02-08T17:58:08Z")

</div>

![Nightsky2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b79d1a8ee92f8b907ba934426002b302836004e8.jpeg)

---

<div class="post-metadata">

**Author:** ![Huber542](https://avatars.discourse-cdn.com/v4/letter/h/34f0e0/32.png) [@Huber542](https://discourse.processing.org/u/Huber542)\
**Post date:** [February 8, 2021, 5:58pm UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/5 "2021-02-08T17:58:43Z")

</div>

![Nightsky3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bf3f9b0ab7c9583a72bfafaee01b40654d6b3b21.jpeg)

---

<div class="post-metadata">

**Author:** ![Huber542](https://avatars.discourse-cdn.com/v4/letter/h/34f0e0/32.png) [@Huber542](https://discourse.processing.org/u/Huber542)\
**Post date:** [February 8, 2021, 5:59pm UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/6 "2021-02-08T17:59:18Z")

</div>

![Nightsky4](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f2d8ed883475d88062505edf96a97f58e701ebd8.jpeg)

---

<div class="post-metadata">

**Author:** ![WeinSim](https://avatars.discourse-cdn.com/v4/letter/w/db5fbb/32.png) [@WeinSim](https://discourse.processing.org/u/WeinSim)\
**Post date:** [February 9, 2021, 9:18pm UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/7 "2021-02-09T21:18:31Z")

</div>

Ok, my idea of drawing these shapes in processing directly probably isn’t going to work. But whatever, You should be able to get it running now, right?

---

<div class="post-metadata">

**Author:** ![Huber542](https://avatars.discourse-cdn.com/v4/letter/h/34f0e0/32.png) [@Huber542](https://discourse.processing.org/u/Huber542)\
**Post date:** [February 11, 2021, 2:49am UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/8 "2021-02-11T02:49:20Z")

</div>

int numFrames=5;  
PImage [] img = new PImage[numFrames];

//Shooting Star frame Array  
void setup(){  
size(500,500);  
frameRate (60);

img[1]=loadImage(“Nightsky1.png”);  
img[2]=loadImage(“Nightsky2.png”);  
img[3]=loadImage(“Nightsky3.png”);  
img[4]=loadImage(“Nightsky4.png”);

}

// Frames of shooting star moving from left to right

void draw() {  
background(img[(frameCount-1)%numFrames]);  
for (int i=0; i\<numFrames; i++)  
img[i] = loadImage(“NightSky” + str(i) + “.png”);  
}

I’m still confused, If I don’t get an array exception, I get a Nullpointer exception.  
So I’m not there yet. anythoughts?

---

<div class="post-metadata">

**Author:** ![Huber542](https://avatars.discourse-cdn.com/v4/letter/h/34f0e0/32.png) [@Huber542](https://discourse.processing.org/u/Huber542)\
**Post date:** [February 11, 2021, 8:37am UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/9 "2021-02-11T08:37:19Z")

</div>

I figured it out, I just had things in the wrong order! thanks a lot for all of your help!

---

<div class="post-metadata">

**Author:** ![WeinSim](https://avatars.discourse-cdn.com/v4/letter/w/db5fbb/32.png) [@WeinSim](https://discourse.processing.org/u/WeinSim)\
**Post date:** [February 11, 2021, 7:42pm UTC](https://discourse.processing.org/t/short-5-second-png-animation/27664/10 "2021-02-11T19:42:41Z")

</div>

Awesome! Yeah no problem