Short 5 second .PNG animation

please format code with </> button * homework policy * asking questions

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]);

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:

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:

PImage [] img = new PImage[numFrames];

You could also automate the image loading process with a for() loop (see for \ Language (API) \ Processing 3+ 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:

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 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

2 Likes

Nightsky1

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

Nightsky2

Nightsky3

Nightsky4

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?

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?

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

Awesome! Yeah no problem