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

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.

Answers

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

  • Answer ✓

    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().

  • edited September 2017

    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.

  • runner[i].resize(100, 0);
    
  • edited September 2017

    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);
    }
    
  • ignore that, concentrate on fixing your own code.

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

Sign In or Register to comment.