Is this a data-efficient way to display an animation (a sequence of images)?

randomdude

Hello! I am working on a project that involves a lot of 30-40 frame image sequences, so I am looking to discover the best way to implement them without eating up too much RAM. This is what I came up with, it seems short and simple enough and runs smoothly, but of course it's just a single animation following the mouse, so I can't know if it will be data-efficient with various multi-image sprites, and I need to know that before I can start working on creating and programming the sprites.

PImage[] runner = new PImage[6];
int frame;
int displaytimer;
void setup() {
  frameRate(80);
  size(500, 500);
  for (int i = 0; i < runner.length; i++) {
    runner[i] = loadImage("run"+(i+1)+".jpeg");
  }
}
void draw() {
  background(255);
  image(runner[frame], mouseX, mouseY, 100, 100);
  if (millis()>displaytimer+180) {
    displaytimer = millis();
    if (frame<5) {
      frame = frame+1;
    } else {
      frame = 0;
    }
  }
}

Note that the sequence is of 6 images named "run1" to "run6" in a consecutive order.

Any help would be greatly appreciated.

koogs

Resize the images in setup. It's too expensive to do every frame.

You could use modulo instead of the condition, replace lines 16 to 20 with one statement.

Chrisir

yes, as has been said, this:

 image(runner[frame], mouseX, mouseY, 100, 100);

is expensive.

Better use image with 3 parameters and do the resize in setup().

randomdude

Excuse the stupid question, but how do I resize the images in setup? I just learned using images a few hours ago so things are still a bit cloudy in my head.

Chrisir

runner[i].resize(100, 0);

GoToLoop

https://Processing.org/reference/PImage_resize_.html

/** 
 * Animated Cursor 2.0 (v1.0.2)
 * RandomDude (2017/Sep/24)
 * mod GoToLoop
 *
 * Forum.Processing.org/two/discussion/24239/
 * is-this-a-data-efficient-way-to-display-
 * an-animation-a-sequence-of-images#Item_5
 */

static final String NAME = "run", EXT = ".jpeg";
static final int FPS = 60, DELAY = 11;
static final int IMAGES = 6, SIZE = 100;

final PImage[] anims = new PImage[IMAGES];
PImage frame;
int idx;

void setup() {
  size(500, 500);
  smooth(3);
  frameRate(FPS);

  noCursor();
  imageMode(CENTER);

  for (int i = 0; i < IMAGES; 
    (anims[i++] = loadImage(NAME + i + EXT)).resize(SIZE, SIZE));

  frame = anims[idx];
}

void draw() {
  background(-1);
  if (frameCount % DELAY == 0)  frame = anims[(idx+1) % IMAGES];

  image(frame, mouseX, mouseY);
  // alt.: set(mouseX - SIZE/2, mouseY - SIZE/2, frame);
}

koogs

ignore that, concentrate on fixing your own code.

Chrisir

Put my line with resize after line 8 in the initial code above