Animation problem: delay

Processing Coding Questions
1

Hi i have a problem with my code, i have 6 png and need to load this png from 0 to 5, but when i start program i have instantly 5

 PImage zero, jeden, dwa, trzy, cztery, piec;
void setup()
{
  size(200, 200);
  zero=loadImage("zero.jpeg");
  jeden=loadImage("jeden.jpeg");
  dwa=loadImage("dwa.jpeg");
  trzy=loadImage("trzy.jpeg");
  cztery=loadImage("cztery.jpeg");
  piec=loadImage("piec.jpeg");
  frameRate(30);
}

void draw()
{
  PImage[] tablica=new PImage[6];
  tablica[0]=zero;
  tablica[1]=jeden;
  tablica[2]=dwa;
  tablica[3]=trzy;
  tablica[4]=cztery;
  tablica[5]=piec;

  for (int i=0; i<tablica.length; i++)
  {

    PImage liczby=tablica[i];
    background(liczby);
  }
}
1 Like
2

Hi,

Welcome to the forum! :slight_smile:
First of all, you should format your code by pressing Ctrl+T in the Processing IDE then using the </> button when editing your message on the forum.

For the code, I suggest you do the following :

  • Don’t declare variables inside the draw() function if they are going to be global to the program because every frame, you are going to recreate your array and put images inside.

  • For this example, try to use ArrayList because they are much more adapted to hold instances of objects (here PImage) and they are easy to use.

  • Instead of naming your images “one.jpeg”, “two.jpeg”, “three.jpeg”… it’s better to name them “image1.jpeg”, “image2.jpeg”, “image3.jpeg”… so you can dynamically load them in your code :

// Declare an ArrayList of PImages
ArrayList<PImage> images = new ArrayList<PImage>();

// Number of images to load
int nb_images = 5;

void setup(){
  // Loop to load the images
  for(int i=0; i<nb_images; i++){
    // Load dynamically the image
    images.add(loadImage("image" + i + ".jpeg"));
  }
}
2 Likes
3

This is a whole code or a bit of code? When i implements to processing i have grey screen nothing is displayed

4

No it’s just the beginning of the code with this structure :

  1. Declare global variables
  2. setup() function where you load your images
  3. draw() function where you display your images

I am not going to give you the whole solution, it’s an exercise :slight_smile:

But if I understand well, you want your images to display one after another. Remember that the draw() function is being executed roughly 60 times per second (in order for your eye to see an animation like in movies).

So in order to display your images at a regular interval (1 second for example), you need to be able to measure time.

Check some useful functions :

2 Likes